<template>
	<view class="login-page">
		<view class="banner">
			<image :src="banner" style="width: 100%;height: 500rpx;" mode="aspectFill"></image>
		</view>
		<view class="form tn-m-lg tn-p-xl tn-border tn-gray-disabled_border tn-radius tn-shadow tn-shadow-md">
			<view class="title tn-text-2xl tn-text-center tn-grey-dark_text tn-pb-lg tn-pt-lg">
				用户登录
			</view>
			<tn-form ref="formRef" :model="formData" :rules="formRules">
			    <tn-form-item  prop="username" class="tn-pt-xl tn-pb-xl">
			      <tn-input v-model="formData.username" type="text" underline placeholder="请输入用户名"/>
				  <template #label>
					  <tn-icon size="40rpx" color="tn-grey-light" name="my"/>		
				  </template>
			    </tn-form-item>
				<tn-form-item prop="password" class="tn-pt-xl tn-pb-xl">
				  <tn-input v-model="formData.password" type="password" underline placeholder="请输入密码" />
				  <template #label>
				  		<tn-icon size="40rpx" color="tn-grey-light" name="lock"/>			  
				  </template>
				</tn-form-item>
			</tn-form>
			<view class="tn-mt tn-pt-xl tn-pb-xl">
				<view class="tn-flex-center tn-m-sm">
					<tn-button size="lg" @click="submitForm" shape="round" width="400"> 登 录 </tn-button>
				</view>
				<!-- #ifdef MP -->
				<!-- <view class="tn-text-center tn-grey-dark_text tn-text-xs tn-aquablue-dark_text tn-p-sm
				" @click="toRegister">
					还没账号？注册&gt;&gt;
				</view> -->
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive } from 'vue';
	import type { FormRules, TnFormInstance } from '@tuniao/tnui-vue3-uniapp'
	import baseUrl from '@/config/config';
	import TnForm from '@/uni_modules/tuniaoui-vue3/components/form/src/form.vue'
	import TnFormItem from '@/uni_modules/tuniaoui-vue3/components/form/src/form-item.vue'
	import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'
	import storage from '@/utils/storage'

	const banner = ref('https://resource.tuniaokj.com/images/swiper/ad1.jpg')
	
	const formRef = ref<TnFormInstance>()
	
	const formData = reactive<{
		username:string,
		password:string
	}>({
		username:'',
		password:''
	})
	
	const formRules: FormRules = {
	  username: [
	    { required: true, message: '请输入用户名', trigger: 'blur'},
	    {
			min: 3,
			max: 10,
	        message: '长度在 3 到 10 个字符',
	        trigger: 'blur'
	    },
	  ],
	  password:[
		  {required: true, message: '请输入密码', trigger: 'blur'},
		  {
		    pattern: /^[\w-]{4,16}$/,
		    message: '请输入4-16位英文、数字、下划线、横线',
		    trigger: ['change', 'blur'],
		  },
	  ]
	}
	
	const submitForm = () => {
		formRef.value?.validate((valid) => {
		    if (valid) {
				uni.request({
					url:baseUrl + '/front/login',
					data:formData,
					method:'POST',
					success: (res:any) => {
						if(res.data.code === 0){
							storage.set('isLogin',true)
							storage.set('storageUser',res.data.data.user)
							storage.set('token',res.data.data.access_token)
							uni.navigateTo({
								url:'/pages/index/index'
							})
						}
						uni.showToast({
							icon:'none',
							title:res.data.message
						})
					}
				})
		    } else {
		      uni.showToast({
		        title: '表单校验失败',
		        icon: 'none',
		      })
		    }
		})
	}
</script>

<style lang="scss" scoped>
	.banner{
		position: relative;
		left: -25%;
		width: 150%;
		border-radius: 0 0 50% 50%;
	}
	.form{
		border-radius: 1em;
		position: relative;
		top: -150rpx;
		background-color: #fff;
	}
</style>