<template>
	<view>
		<!-- 个人信息完善 -->
		<view class="title-left-border">个人信息</view>
		<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="80">
			<view class="photobox" v-if="baseFormData.photo">
				<image mode="aspectFill" :src="config.baseUrl_api + baseFormData.photo"></image>
			</view>
			<uni-forms-item label="会员编号" required name="perCode">
				<uni-easyinput disabled v-model="baseFormData.perCode" placeholder="请输入会员编号" />
			</uni-forms-item>
			<uni-forms-item label="有效期" required name="validityDate">
				<uni-easyinput disabled v-model="baseFormData.validityDate" placeholder="请输入会员编号" />
			</uni-forms-item>
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput disabled v-model="baseFormData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="性别" required name="sex">
				<uni-data-checkbox v-model="baseFormData.sex" disabled :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item label="证件类型" required name="idcType">
				<uni-data-select v-model="baseFormData.idcType" disabled :localdata="certificates">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="证件号码" required name="idcCode">
				<uni-easyinput v-model="baseFormData.idcCode" placeholder="请输入证件号码" disabled />
			</uni-forms-item>

			<uni-forms-item label="出生日期" required name="birth">
				<!-- <uni-datetime-picker type="date" disabled :clear-icon="false" v-model="baseFormData.birth" /> -->
				<uni-easyinput disabled  v-model="baseFormData.birth" />
			</uni-forms-item>
			<uni-forms-item label="联系方式" required name="phone">
				<uni-easyinput v-model="baseFormData.phone" disabled placeholder="请输入联系方式" />
			</uni-forms-item>
			<uni-forms-item label="所在地区" required name="cityName">
				<uni-easyinput disabled v-model="baseFormData.cityName" placeholder="请输入所在地区" />
			</uni-forms-item>
			<uni-forms-item label="详细地址" required name="address">
				<uni-easyinput disabled v-model="baseFormData.address" placeholder="请输入详细地址" />
			</uni-forms-item>
		</uni-forms>
	</view>

	<view class="fixedBottom">
		<button class="btn btn-red-kx" @click="prev">上一步</button>
		<button class="btn btn-red" @click="next">下一步</button>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		toRefs,
		computed
	} from 'vue'
	import * as train from '@/training/train.js'
	import config from '@/config.js'
	const emit = defineEmits(['prev', 'next'])
	const props = defineProps({
		personal: {
			type: Object,
			default: () => {}
		}
	})
	const baseFormData = computed(() => props.personal)
	const sexs = ref([{
		value: '0',
		text: '女'
	}, {
		value: '1',
		text: '男'
	}])
	const certificates = ref([{
			text: '身份证',
			value: '0'
		},
		{
			text: '港澳台通行证 ',
			value: '1'
		},
		{
			text: '中国护照',
			value: '2'
		},
		{
			text: '外国护照',
			value: '3'
		},
		{
			text: '其它',
			value: '4'
		},
		{
			text: '户口本',
			value: '5'
		}
	])


	onLoad(options => {
		// console.log(baseFormData)
	})

	function prev() {
		emit('prev')
	}

	function next() {
		emit('next')
	}
</script>

<style scoped lang="scss">
	.photobox {
		margin: 30rpx 0;

		image {
			width: 150rpx;
			height: 200rpx;
			display: block;
			margin: auto;
		}
	}
	:deep(.is-disabled.is-input-border){color: #000!important;}
	:deep(.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked.is-disable .checklist-text){
		opacity: 1!important;
	}
	:deep(.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked.is-disable .radio__inner){
		opacity: 1!important;
	}
	
</style>