<template>
	<view class="u-page">
		<up-navbar
			title="表单"
			@leftClick="navigateBack"
			safeAreaInsetTop
			fixed
			placeholder
		></up-navbar>
		<view class="u-demo-block">
			<text class="u-demo-block__title">基础使用</text>
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<up-form
					labelPosition="left"
					:model="model1"
					ref="form1Ref"
				>
					<up-form-item
						label="姓名"
						prop="userInfo.name"
						borderBottom
						ref="item1Ref"
					>
						<up-input
							v-model="model1.userInfo.name"
							border="none"
							placeholder="姓名,只能为中文"
						></up-input>
					</up-form-item>
					<up-form-item
						label="性别"
						prop="userInfo.sex"
						borderBottom
						@click="showSex = true; hideKeyboard()"
						ref="item1Ref"
					>
						<view @click.self="showSex = true; hideKeyboard()">
							<up-input
								v-model="model1.userInfo.sex"
								disabled
								placeholder="请选择性别"
								border="none"
							></up-input>
						</view>
						<template #right>
							<up-icon
								name="arrow-right"
							></up-icon>
						</template>
					</up-form-item>
					<up-form-item
						label="年龄"
						prop="userInfo.age"
						borderBottom
						ref="item1Ref"
						:rules="[{
							type: 'string',
							required: true,
							message: '请填写年龄',
							trigger: ['blur', 'change']
						}]"
					>
						<up-input
							placeholder="请输入内容"
							border="surround"
							type="number"
							v-model="model1.userInfo.age"
							clearable
						></up-input>
					</up-form-item>
					<up-form-item
						label="水果"
						prop="radiovalue1"
						borderBottom
						ref="item2Ref"
					>
						<up-radio-group v-model="model1.radiovalue1">
							<up-radio
								:customStyle="{marginRight: '16px'}"
								v-for="(item, index) in radiolist1"
								:key="index"
								:label="item.name"
								:name="item.name"
							>
							</up-radio>
						</up-radio-group>
					</up-form-item>
					<up-form-item
						label="兴趣爱好"
						prop="checkboxValue1"
						borderBottom
						labelWidth="80"
						ref="item3Ref"
					>
						<up-checkbox-group
							v-model="model1.checkboxValue1"
							shape="square"
							@change="change"
						>
							<up-checkbox
								:customStyle="{marginRight: '16px'}"
								v-for="(item, index) in checkboxList1"
								:key="index"
								:label="item.name"
								:name="item.name"
							>
							</up-checkbox>
						</up-checkbox-group>
					</up-form-item>
					<up-form-item
						label="简介"
						prop="intro"
						borderBottom
						ref="item3Ref"
					>
						<up-textarea
							placeholder="不低于3个字"
							v-model="model1.intro"
							count
						></up-textarea>
					</up-form-item>
					<up-form-item
						label="住店时间"
						prop="hotel"
						labelWidth="80"
						borderBottom
						@click="showCalendar = true; hideKeyboard()"
					>
						<up-input
							v-model="model1.hotel"
							disabled
							placeholder="请选择住店和离店时间"
							border="none"
						></up-input>
						<template #right>
							<up-icon
								name="arrow-right"
							></up-icon>
						</template>
					</up-form-item>
					<up-form-item
						label="验证码"
						prop="code"
						labelWidth="80"
						borderBottom
					>
						<up-input
							v-model="model1.code"
							border="none"
							placeholder="请填写验证码"
						></up-input>
						<up-button
							#right
							@tap="getCode"
							:text="tips"
							type="success"
							size="mini"
							style="flex: 0.5;"
							:disabled="disabled1"
						></up-button>
					</up-form-item>
					<up-form-item
						label="生日"
						prop="userInfo.birthday"
						borderBottom
						@click="showBirthday = true; hideKeyboard()"
						ref="item1Ref"
					>
						<up-input
							v-model="model1.userInfo.birthday"
							disabled
							placeholder="请选择生日"
							border="none"
						></up-input>
						<template #right>
							<up-icon
								name="arrow-right"
							></up-icon>
						</template>
					</up-form-item>
				</up-form>
				<up-button
					type="primary"
					text="提交"
					customStyle="margin-top: 50px"
					@click="submit"
				></up-button>
				<up-button
					type="error"
					text="重置"
					customStyle="margin-top: 10px"
					@click="reset"
				></up-button>
				<up-action-sheet
					:show="showSex"
					:actions="actions"
					title="请选择性别"
					description="如果选择保密会报错"
					@close="showSex = false"
					@select="sexSelect"
				>
				</up-action-sheet>
				<up-calendar
					:show="showCalendar"
					mode="range"
					@confirm="calendarConfirm"
					@close="calendarClose"
					startText="住店"
					endText="离店"
					confirmDisabledText="请选择离店日期"
					:formatter="formatter"
				></up-calendar>
				<up-code
					ref="uCodeRef"
					@change="codeChange"
					seconds="20"
					@start="disabled1 = true"
					@end="disabled1 = false"
				></up-code>
				<up-datetime-picker
					:show="showBirthday"
					:value="birthday"
					mode="date"
					closeOnClickOverlay
					@confirm="birthdayConfirm"
					@cancel="birthdayClose"
					@close="birthdayClose"
				></up-datetime-picker>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { test, toast, timeFormat } from '@/uni_modules/uview-plus'

// 响应式数据
const fileList1 = ref<any[]>([]);
const disabled1 = ref(false);
const tips = ref('');
const value = ref('');
const showCalendar = ref(false);
const showBirthday = ref(false);
const showSex = ref(false);
const birthday = ref(Number(new Date()));

// 定义响应式模型数据
const model1 = reactive({
	userInfo: {
		name: '楼兰',
		sex: '',
		age: 0,
		birthday: ''
	},
	radiovalue1: '苹果',
	checkboxValue1: [],
	intro: '',
	code: ''
});

// 定义表单规则
const rules = {
	'userInfo.name': [{
		type: 'string',
		required: true,
		message: '请填写姓名',
		trigger: ['blur', 'change']
	},
	{
		// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
		validator: (rule: any, value: any, callback: any) => {
			// 调用uview-plus自带的js验证规则，详见：https://uview-plus.jiangruyi.com/js/test.html
			return test.chinese(value);
		},
		message: "姓名必须为中文",
		// 触发器可以同时用blur和change，二者之间用英文逗号隔开
		trigger: ["change", "blur"],
	},
	{
		asyncValidator: (rule: any, value: any, callback: any) => {
			setTimeout(() => {
				callback('异步规则');
			}, 1000)
		},
		// 触发器可以同时用blur和change，二者之间用英文逗号隔开
		trigger: ["change", "blur"],
	} ,
	],
	code: {
		type: 'string',
		required: true,
		len: 4,
		message: '请填写4位验证码',
		trigger: ['blur']
	},
	'userInfo.sex': {
		type: 'string',
		max: 1,
		required: true,
		message: '请选择男或女',
		trigger: ['blur', 'change']
	},
	radiovalue1: {
		type: 'string',
		min: 1,
		max: 2,
		message: '橙子有毒',
		trigger: ['change']
	},
	checkboxValue1: {
		type: 'array',
		min: 2,
		required: true,
		message: '不能太宅，至少选两项',
		trigger: ['change']
	},
	intro: {
		type: 'string',
		min: 3,
		required: true,
		message: '不低于3个字',
		trigger: ['change']
	},
	hotel: {
		type: 'string',
		min: 2,
		required: true,
		message: '请选择住店时间',
		trigger: ['change']
	},
	'userInfo.birthday': {
		type: 'string',
		required: true,
		message: '请选择生日',
		trigger: ['change']
	},
};

// 定义选项列表
const actions = ref([
	{
		name: '男',
	},
	{
		name: '女',
	},
	{
		name: '保密',
	},
]);

const radiolist1 = ref([
	{
		name: '苹果',
		disabled: false
	},
	{
		name: '香蕉',
		disabled: false
	},
	{
		name: '毒橙子',
		disabled: false
	}
]);

const checkboxList1 = ref([
	{
		name: '羽毛球',
		disabled: false
	},
	{
		name: '跑步',
		disabled: false
	},
	{
		name: '爬山',
		disabled: false
	}
]);

// 定义组件引用
const form1Ref = ref(null);
const item1Ref = ref(null);
const item2Ref = ref(null);
const item3Ref = ref(null);
const uCodeRef = ref(null);

// 定义方法
const afterRead = (event: any) => {
	fileList1.value.push({
		url: event.file,
		status: 'uploading',
		message: '上传中'
	})
};

const groupChange = (n: any) => {
	// console.log('groupChange', n);
};

const radioChange = (n: any) => {
	// console.log('radioChange', n);
};

const navigateBack = () => {
	uni.navigateBack()
};

const sexSelect = (e: any) => {
	model1.userInfo.sex = e.name;
	form1Ref.value.validateField('userInfo.sex')
};

const change = (e: any) => {
	// console.log(e);
};

const formatter = (day: any) => {
	const d = new Date()
	let month = d.getMonth() + 1
	const date = d.getDate()
	if (day.month == month && day.day == date + 3) {
		day.bottomInfo = '有优惠'
		day.dot = true
	}
	return day
};

const calendarConfirm = (e: any) => {
	showCalendar.value = false
	model1.hotel = `${e[0]} / ${e[e.length - 1]}`
	form1Ref.value.validateField('hotel')
};

const codeChange = (text: string) => {
	tips.value = text;
};

const getCode = () => {
	if (uCodeRef.value.canGetCode) {
		// 模拟向后端请求验证码
		uni.showLoading({
			title: '正在获取验证码'
		})
		setTimeout(() => {
			uni.hideLoading();
			// 这里此提示会被this.start()方法中的提示覆盖
			toast('验证码已发送');
			// 通知验证码组件内部开始倒计时
			uCodeRef.value.start();
		}, 2000);
	} else {
		toast('倒计时结束后再发送');
	}
};

const calendarClose = () => {
	showCalendar.value = false
	form1Ref.value.validateField('hotel')
};

const birthdayClose = () => {
	showBirthday.value = false
	form1Ref.value.validateField('userInfo.birthday')
};

const birthdayConfirm = (e: any) => {
	showBirthday.value = false
	model1.userInfo.birthday = timeFormat(e.value, 'yyyy-mm-dd')
	form1Ref.value.validateField('userInfo.birthday')
};

const submit = () => {
	// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
	form1Ref.value.validate().then((res: any) => {
		toast('校验通过')
	}).catch((errors: any) => {
		console.log(errors)
		toast('校验失败')
	})
};

const reset = () => {
	const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
	'hotel', 'code', 'userInfo.birthday']
	form1Ref.value.resetFields()
	form1Ref.value.clearValidate()
	setTimeout(()=>{
		form1Ref.value.clearValidate(validateList)
		// 或者使用 this.$refs.form1.clearValidate()
	},10)
};

const hideKeyboard = () => {
	uni.hideKeyboard()
};

// 在onMounted中设置规则
onMounted(() => {
	// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
	form1Ref.value.setRules(rules)
});
</script>

<style lang="scss">

</style>