<template>
	<view>
		<view class="u-font-32 font-bold u-m-32 text-center">商户基础信息</view>
		<view class="container">
			<!-- <view class="form-item">
					<view class="font-bold u-m-b-16">店铺</view>
					<shopSelect></shopSelect>
				</view> -->
			<view class="form-item required">
				<view class="title">商户类型</view>
				<up-radio-group v-model="form.userType">
					<up-radio v-for="(value,key) in userTypes" :label="value" :name="key">
					</up-radio>
				</up-radio-group>
			</view>

			<view class="form-item required">
				<view class="title">企业类型</view>
				<up-radio-group v-model="form.companyChildType">
					<up-radio v-for="(value,key) in companyChildTypes" :label="value" :name="key">
					</up-radio>
				</up-radio-group>
			</view>

			<view class="form-item required">
				<view class="title">商户简称</view>
				<up-input placeholder="商户简称" :placeholder-class="placeholderClass" v-model="form.shortName"></up-input>
			</view>
			<view class="form-item required">
				<view class="title"> 行业类目</view>
				<mccCategory v-model="form.mccCode"></mccCategory>
			</view>

			<view class="form-item required">
				<view class="title"> 支付宝账号</view>
				<up-input placeholder="支付宝账号" :placeholder-class="placeholderClass"
					v-model="form.alipayAccount"></up-input>
			</view>


			<view class="form-item required">
				<view class="title">联系人类型</view>
				<up-radio-group v-model="form.contactPersonType">
					<up-radio v-for="(value,key) in contactPersonTypes" :label="value" :name="key">
					</up-radio>
				</up-radio-group>
			</view>

			<template v-if="form.contactPersonType=='SUPER'">
				<view class="form-item required">
					<view class="title"> 联系人身份证正面</view>
					<my-upload-img v-model="form.contactIdCardFrontPic.url" :size="200"
						@uploadSuccess="uploadSuccess($event,'IdCard','contactIdCardFrontPic')"></my-upload-img>
				</view>

				<view class="form-item required">
					<view class="title"> 联系人身份证背面</view>
					<my-upload-img v-model="form.contactIdCardBackPic.url" :size="200"
						@uploadSuccess="uploadSuccess($event,'IdCard','contactIdCardBackPic')"></my-upload-img>
				</view>

				<!-- <view class="form-item required">
					<view class="title">证件类型</view>
					<up-radio-group v-model="form.certType">
						<up-radio v-for="(value,key) in certTypes" :label="value" :name="key">
						</up-radio>
					</up-radio-group>
				</view> -->
				<view class="form-item required">
					<view class="title"> 联系人姓名</view>
					<up-input placeholder="联系人姓名" :placeholder-class="placeholderClass"
						v-model="form.contactName"></up-input>
				</view>
				<view class="form-item required">
					<view class="title"> 联系人身份证号</view>
					<up-input placeholder="联系人身份证号" :placeholder-class="placeholderClass"
						v-model="form.contactPersonId"></up-input>
				</view>
				<view class="form-item required">
					<view class="title"> 联系人身份证开始日期</view>
					<up-datetime-picker hasInput :minDate="minDate" :maxDate="maxDate" format="YYYY-MM-DD"
						placeholder="请选择" v-model="form.contactPersonIdStartDate" mode="date">
					</up-datetime-picker>

				</view>

				<view class="form-item required">
					<view class="title"> 联系人身份证到期日期</view>
					<view class="u-m-b-16">
						<up-radio-group v-model="contactPersonIdEndDateType">
							<up-radio :name="1" label="有结束日期"></up-radio>
							<up-radio :name="2" label="长期有效"></up-radio>
						</up-radio-group>
					</view>
					<template v-if="contactPersonIdEndDateType==1">
						<up-datetime-picker hasInput :minDate="endDataMinDate" :maxDate="maxDate" format="YYYY-MM-DD"
							placeholder="请选择" v-model="form.contactPersonIdEndDate" mode="date">
						</up-datetime-picker>
					</template>


				</view>
				<view class="form-item required ">
					<view class="title"> 联系人电话</view>
					<up-input placeholder="联系人电话" :placeholder-class="placeholderClass"
						v-model="form.contactPhone"></up-input>
				</view>

				<view class="form-item required">
					<view class="title"> 联系人通讯地址</view>
					<up-input placeholder="联系人通讯地址" :placeholder-class="placeholderClass"
						v-model="form.contactAddr"></up-input>
				</view>

				<view class="form-item required">
					<view class="title"> 联系人邮箱
					</view>
					<up-input placeholder="联系人邮箱" :placeholder-class="placeholderClass"
						v-model="form.contactEmail"></up-input>
				</view>







			</template>


		</view>
	</view>

</template>

<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref,
		watch
	} from 'vue';
	import shopSelect from './shop-select.vue'
	import mccCategory from '@/entryManager/components/mcc-category.vue'
	import {
		userTypes,
		contactPersonTypes,
		companyChildTypes,
		certTypes
	} from '@/entryManager/data.js'
	import {
		getInfoByImg
	} from '@/http/api/order/entryManager.js'


	import dayjs from 'dayjs';
	const minDate = dayjs('1970-01-01 00:00:00').valueOf()
	const maxDate = dayjs('2099-12-31 23:59:59').valueOf()
	const endDataMinDate = computed(() => {
		if (!form.contactPersonIdStartDate) {
			return minDate
		}
		if (form.contactPersonIdStartDate) {
			return dayjs(form.contactPersonIdStartDate).add(10, 'year').valueOf()
		}
		return minDate
	})

	const contactPersonIdEndDateType = ref(1)
	watch(() => contactPersonIdEndDateType.value, (newval) => {
		if (newval == 2) {
			form.contactPersonIdEndDate = maxDate
		} else {
			form.contactPersonIdEndDate = dayjs().valueOf()
		}
	})


	function uploadSuccess(url, type, key) {
		uni.showLoading({
			type: '识别中，请稍等……！'
		})
		getInfoByImg({
			url,
			type
		}).then(res => {
			uni.hideLoading()
			if (res) {
				const data = res.subImages[0].kvInfo.data
				if (key == 'contactIdCardBackPic') {
					if (data.validPeriod) {
						const [start, end] = data.validPeriod.split('-')
						if (start) {
							form.contactPersonIdStartDate = dayjs(start).valueOf()
						}
						if (end) {
							if (end.includes('长期')) {
								contactPersonIdEndDateType.value = 2
							} else {
								form.contactPersonIdEndDate = dayjs(end).valueOf()
							}

						}
					}
				}
				if (key == 'contactIdCardFrontPic') {
					form.contactName = data.name
					form.contactPersonId = data.idNumber
					form.contactAddr = data.address

				}
			}
		})
	}
	const form = reactive({
		userType: '0',
		shortName: '',
		mccCode: '',
		alipayAccount: '',
		contactPersonType: 'LEGAL',
		contactName: '',
		certType: '0',
		contactPersonId: '',
		contactPersonIdStartDate: '',
		contactPersonIdEndDate: '',
		contactIdCardBackPic: {
			url: ''
		},
		contactIdCardFrontPic: {
			url: ''
		},
		contactPhone: '',
		contactAddr: '',
		contactEmail: '',
		companyChildType: '1',
	})

	const placeholderClass = ref('u-font-28')


	const props = defineProps({
		data: {
			type: Object,
			default: () => {

			}
		}
	})
	const emits = defineEmits(['update'])
	watch(() => form, (newval) => {
		console.log('form', form);
		emits('update', newval)
	}, {
		deep: true,
		immediate: true
	})

	watch(() => props.data, (newval) => {
		for (let key in form) {
			if (props.data.hasOwnProperty(key)) {
				form[key] = props.data[key]
			}
		}
	}, {
		deep: true,
		immediate: true
	})
	watch(()=>form.contactPersonIdEndDate,(newval)=>{
		if(dayjs(newval).format('YYYY-MM-DD')==='2099-12-31'){
			contactPersonIdEndDateType.value=2
		} 
	})
	onMounted(() => {

	})
</script>

<style lang="scss">
	.container {
		padding: 32rpx 28rpx;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
	}

	.form-item {
		margin-bottom: 32rpx;

		.title {
			font-weight: 700;
			margin-bottom: 16rpx;
		}

		&.required {
			.title::before {
				content: '*';
				color: red;
			}
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
</style>