<template>
	<view class="container">
		<view class="top-img">
			<image :src="banner" style="width: 100%;height: 100%;"/>
		</view>
		<view class="main tn-m">
			<view class="title tn-text-center tn-text-xl tn-text-bold">用户注册</view>
			<view class="form">
				<TnForm ref="formRef" :model="userInfo" :rules="formRules">
					<TnFormItem label="公司" prop="company">
						<TnInput v-model="userInfo.company" underline/>
					</TnFormItem>
					<TnFormItem label="姓名" prop="name">
						<TnInput v-model="userInfo.name" underline/>
					</TnFormItem>
					<TnFormItem label="职务" prop="position">
						<TnInput v-model="userInfo.position" underline/>
					</TnFormItem>
					<TnFormItem label="电话" prop="phone">
						<TnInput v-model="userInfo.phone" underline/>
					</TnFormItem>
				</TnForm>
			
				<view class="btn tn-flex tn-flex-center-center tn-mt-xl" @click="submit">
					<view class="tn-w-2-3 tn-text-center tn-type-primary_bg tn-p-sm tn-radius">
						提交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	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 type { FormRules, TnFormInstance } from '@tuniao/tnui-vue3-uniapp'
	import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'
	
	const formRef = ref<TnFormInstance>()
	const banner = ref('http://static.cqtlcm.com/attachment/lhyq/20230912/5sg7wLKJfQYYmJaBtjPfapCUev5ne3k564fc9d0q.jpg')
	const meetingId = ref()
	const userInfo = reactive<{
		company?:string,
		name?:string,
		position?:string,
		phone?:string,
		openid?:string
	}>({})
					
	const formRules: FormRules = {
	  company: [
	    { required: true, message: '请输入企业名', trigger: ['change', 'blur'] }
	  ],
	  name: [
	    { required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
	  ],
	  position: [
	    { required: true, message: '请输入职位', trigger: ['change', 'blur'] }
	  ],
	  phone: [
	    { required: true, message: '请输入电话', trigger: ['change', 'blur'] }
	  ],
	}
	
	const submit = () => {
		let user = uni.getStorageSync('user')
		userInfo.openid = user.openid
		formRef.value?.validate((valid)=>{
			if (valid) {
			    request({
			    	url: '/sign/register',
			    	method:'POST',
			    	data:userInfo
			    }).then((res)=>{
			    	if(res.data.code === 0){
			    		uni.reLaunch({
			    			url:'/pages/attendance/index?id=' + meetingId.value
			    		})
			    	}else{
			    		uni.showToast({
			    			icon:'none',
			    			title:res.data.message
			    		})
			    	}
			    })
			} else {
			    uni.showToast({
			        title: '表单校验失败',
			        icon: 'none',
			    })
			}
		})
	}	
							
	onLoad((options) => {
		uni.setNavigationBarTitle({
			title:'信息登记'
		})
		meetingId.value = options.id
	})
						
</script>

<style lang="scss">
	.container{
		background-color: #f5f5f5;
		height: 100vh;
		.top-img{
			width: 100%;
			height: 360rpx;
		}
		.main{
			padding: 80rpx 0;
			background-color: #fff;
			border: 1rpx solid #e8e8e8;
			border-radius: 20rpx;
			box-shadow: 0 0 10rpx 5rpx #e5e5e5;
			.form{
				padding: 60rpx;
			}
		}
	}
</style>