<template>
	<div>
		<van-nav-bar title="新增成员" left-text="返回" left-arrow @click-left="onClickLeft" />
		<van-form @failed="onFailed" @submit="onSubmit">
			<label style="font-size: 15px;color: red;">&nbsp;&nbsp;&nbsp;&nbsp;父辈：</label>
			<van-cell-group inset>
				<!-- 输入任意文本 -->
				<van-field v-model="nickname" label="姓名" placeholder="请输入姓名" />
				<van-field name="radio" label="性别">
					<template #input>
						<van-radio-group v-model="checked" direction="horizontal">
							<van-radio name="1">男</van-radio>
							<van-radio name="2">女</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field v-model="nickname" label="父亲" placeholder="请输入姓名" />
				<van-field v-model="nickname" label="母亲" placeholder="请输入姓名" />
				<van-field v-model="nickname" label="出生日期" placeholder="请输入出生日期" />
				<van-field v-model="birsday" is-link readonly name="datePicker" label="出生日期" placeholder="请输入出生日期"
					@click="showPicker = true" />
				<van-popup v-model:show="showPicker" position="bottom">
					<van-date-picker :min-date="minDate" @confirm="onConfirm" @cancel="showPicker = false" />
				</van-popup>
				<van-field v-model="nickname" label="出生地" placeholder="请输入出生地" />
				<van-field name="radio" label="生卒">
					<template #input>
						<van-radio-group v-model="checked" direction="horizontal">
							<van-radio name="1">生</van-radio>
							<van-radio name="2">卒</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<!-- 输入手机号，调起手机号键盘 -->
				<!-- <van-field v-model="tel" type="tel" label="手机号" /> -->
				<!-- 允许输入正整数，调起纯数字键盘 -->
				<!-- <van-field v-model="digit" type="digit" label="整数" /> -->
				<!-- 允许输入数字，调起带符号的纯数字键盘 -->
				<!-- <van-field v-model="number" type="number" label="数字" /> -->
				<!-- 输入密码 -->
				<!-- <van-field v-model="password" type="password" label="密码" /> -->
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					提交
				</van-button>
			</div>
		</van-form>
	</div>

	<!-- <view class="container">
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">宗谱表单</text>
		</uni-card>
		<uni-section title="新增" type="line">
			<view class="example">
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<uni-forms-item label="姓名" required>
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="性别" required>
						<uni-data-checkbox v-model="baseFormData.sex" mode="tag" :localdata="sexs" />
					</uni-forms-item>
					<uni-forms-item label="父亲" required>
						<uni-easyinput v-model="baseFormData.fname" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="母亲" required>
						<uni-easyinput v-model="baseFormData.mname" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="出生日期">
						<uni-datetime-picker type="date" return-type="timestamp" v-model="baseFormData.datetimesingle" />
					</uni-forms-item>
					<uni-forms-item label="出生地">
						<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入出生地" />
					</uni-forms-item>
					<uni-forms-item label="生卒" required>
						<uni-data-checkbox v-model="baseFormData.life" mode="button" :localdata="life" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		<button type="primary" @click="submit('customForm')">提交</button>
	</view> -->
</template>

<script setup>
	import {
		ref
	} from "vue";

	const onClickLeft = () => history.back();

	const minDate = ref(new Date(1920, 0, 1));
	const birsday = ref('');
	const showPicker = ref(false);
	const onConfirm = ({
		selectedValues
	}) => {
		birsday.value = selectedValues.join('/');
		showPicker.value = false;
	};

	const baseFormData = ref({});
	const sexs = ref([{
			value: 1,
			text: "男"
		},
		{
			value: 2,
			text: "女"
		}
	]);
	const life = ref([{
			value: 1,
			text: "生"
		},
		{
			value: 2,
			text: "卒"
		}
	]);
	const hobbys = ref([{
			value: 1,
			text: "男"
		},
		{
			value: 2,
			text: "女"
		}
	]);


	function formSubmit() {

	}
</script>

<style lang="scss">
	.textbomcenter {
		text-align: center;
		// top: 20rpx;
		left: 0;
		right: 0;
		position: static;
		bottom: 15rpx;
		text-decoration: underline;
		font-weight: 400;
		color: cornflowerblue;
	}

	.goods-box {
		display: flex;
		flex-wrap: wrap;

		// 图片列表
		.imgList {
			position: relative;
			width: 180rpx;
			height: 180rpx;
			margin: 0 50rpx 30rpx 0;
		}

		// 删除图片
		.del {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			right: 0rpx;
			z-index: 999;
		}
	}
</style>