<template>
	<view class="container">
		<u-form :model="legalInfo" ref="uForm" labelPosition="left" labelWidth="80" :rules="rules">
			<view class="content-box">
				<view class="content-item">
					<u-form-item prop="legalRepresentativeName" required label="法人名称" right>
						<view class="item-r">
							<u--input placeholder="请输入法人名称" border="surround"
								v-model="legalInfo.legalRepresentativeName"></u--input>
						</view>
					</u-form-item>
				</view>

				<view class="content-item">
					<u-form-item prop="sexName" required label="性别" right @click="showSex = true">
						<view class="item-r">
							<u--input placeholder="请选择性别" border="surround" v-model="legalInfo.sexName" />
						</view>
					</u-form-item>
					<view class="icon-right-box">
						<u-icon name="arrow-right" color="#c5c5c5" size="20"></u-icon>
					</view>
				</view>

				<view class="content-item">
					<u-form-item prop="documentType" required label="证件类型" right>
						<view class="item-r">
							<u--input placeholder="居民身份证" border="surround" v-model="legalInfo.documentType"
								disabled></u--input>
						</view>
					</u-form-item>
				</view>
				<view class="content-item">
					<u-form-item prop="idCardNumber" required label="证件号" right>
						<view class="item-r">
							<u--input placeholder="请输入证件号" border="surround"
								v-model="legalInfo.idCardNumber"></u--input>
						</view>
					</u-form-item>
				</view>
				<view class="content-item">
					<u-form-item prop="idCardExpirationDate" required label="有效期" right @click="showPicker = true">
						<view class="item-r">
							<u--input placeholder="请输入证件有效期" border="surround"
								v-model="legalInfo.idCardExpirationDate"></u--input>
						</view>
					</u-form-item>
					<view class="icon-right-box">
						<u-icon name="arrow-right" color="#c5c5c5" size="20"></u-icon>
					</view>
				</view>
			</view>

			<view class="content-box">
				<u-form-item prop="idCardFrontPhoto">
					<imgs-upload @update="fileList" :value="1" :imageList="legalInfo.idCardFrontPhoto"></imgs-upload>
					<p class="upload-text">证件正面图(国徽图)</p>
				</u-form-item>
			</view>

			<view class="content-box">
				<u-form-item prop="idCardBackPhoto">
					<imgs-upload @update="fileList" :value="2" :imageList="legalInfo.idCardBackPhoto"></imgs-upload>
					<p class="upload-text">证件反面图(人像图)</p>
				</u-form-item>
			</view>
		</u-form>

		<button class="btn" @click="handlerSkipNext">下一步</button>

		<!-- 性别 -->
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</u-action-sheet>

		<!-- 时间 -->
		<u-datetime-picker :show="showPicker" v-model="valueDate" mode="date" @cancel="showPicker = false"
			@confirm="handleConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	import ImgsUpload from './components/ImgsUpload.vue';
	import {
		formatTime
	} from '@/utils/date';

	export default {
		components: {
			ImgsUpload,
		},
		data() {
			return {
				showSex: false,
				showPicker: false,
				valueDate: Number(new Date()),
				actions: [{
						index: '1',
						name: '男',
					},
					{
						index: '2',
						name: '女',
					},
					{
						index: '0',
						name: '保密',
					},
				],
				legalInfo: {
					legalRepresentativeName: '',
					legalRepresenativeGender: '',
					idCardExpirationDate: '',
					idCardNumber: '',
					idCardFrontPhoto: '',
					idCardBackPhoto: '',
					sexName: '',
				},
				rules: {
					legalRepresentativeName: {
						type: 'string',
						required: true,
						message: '请输入法人名称',
						trigger: ['blur', 'change'],
					},
					sexName: {
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change'],
					},
					idCardNumber: [{
							required: true,
							message: '请输入证件号',
							trigger: ['blur', 'change'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.idCard(value);
							},
							message: '您输入的证件号不正确',
							trigger: ['change', 'blur'],
						},
					],
					idCardExpirationDate: {
						type: 'string',
						required: true,
						message: '请输入证件有效期',
						trigger: ['change'],
					},
				},
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			if (this.$store.state.data.merchantInfo && this.$store.state.data.merchantInfo.idCardNumber) {
				console.log("sadsadas")
				this.legalInfo = {
					legalRepresentativeName: this.$store.state.data.merchantInfo.legalRepresentativeName,
					// legalRepresenativeGender:  this.$store.state.data.merchantInfo.legalRepresentativeName,
					idCardExpirationDate: formatTime(this.$store.state.data.merchantInfo.idCardExpirationDate,
						'YYYY-MM-DD'),
					idCardNumber: this.$store.state.data.merchantInfo.idCardNumber,
					idCardFrontPhoto: this.$store.state.data.merchantInfo.idCardFrontPhoto,
					idCardBackPhoto: this.$store.state.data.merchantInfo.idCardBackPhoto,
					sexName: this.$store.state.data.merchantInfo.legalRepresentativeGender == 1 ? '男' : (this.$store
						.state
						.data.merchantInfo.legalRepresentativeGender == 2 ? '女' : '保密'),
				}
			}
		},
		mounted() {
			console.log(this.$store.state.data.merchantInfo)

		},
		onShow() {


		},
		methods: {
			// 跳转到4/4资质信息
			handlerSkipNext() {
				this.$refs.uForm.validate().then(res => {
					this.$store.commit('SET_LEGALINFO', this.legalInfo);
					setTimeout(() => {
						uni.navigateTo({
							url: '/pageMerchant/mineModule/certification/qualificationInformation',
						});
					}, 1500);
				});
			},
			sexSelect(e) {
				this.legalInfo.sexName = e.name; // 数据渲染
				this.legalInfo.legalRepresenativeGender = e.index; //后端接收
				this.$refs.uForm.validateField('userInfo.sex');
			},
			handleConfirm(data) {
				this.legalInfo.idCardExpirationDate = formatTime(data.value, 'YYYY-MM-DD');
				this.showPicker = false;
			},
			// 处理图片
			fileList(val, data) {
				if (data == 1) {
					this.legalInfo.idCardFrontPhoto = val[0];
				} else if (data == 2) {
					this.legalInfo.idCardBackPhoto = val[0];
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f7f7f7 !important;
		padding-bottom: 40rpx;

		.top-box {
			color: #666666;
			font-size: 26rpx;
			text-align: center;
			padding: 20rpx 40rpx;
			background-color: #fff;
		}

		.content-box {
			padding: 20rpx 40rpx;
			background-color: #fff;
			margin: 10rpx 0;

			.content-item {
				position: relative;

				.item-r {
					background-color: #f7f7f7;
					border-radius: 20rpx;

					.data_select {
						width: 90%;
					}

					::v-deep .u-form-item {
						width: 100%;
					}

					::v-deep .u-form-item__body {
						padding: 0;
					}
				}

				.icon-right-box {
					position: absolute;
					right: 15rpx;
					top: 40rpx;
				}
			}

			.upload-text {
				text-align: center;
				color: #666666;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}

		.btn {
			background-color: #5992bb !important;
			color: #fff;
			font-size: 32rpx;
			border-radius: 40rpx;
			margin-top: 100rpx;
			margin-bottom: 100rpx;
			width: 95%;
		}
	}

	::v-deep .uni-select {
		border: none !important;
	}

	::v-deep .uni-select__input-placeholder {
		font-size: 28rpx !important;
		color: #cbced4 !important;
	}
</style>