<template>
	<view class="container">
		<u-form :model="aptitudeInfo" ref="uForm" labelPosition="left" labelWidth="80" :rules="rules">
			<!-- =====================证件类型===================== -->
			<view class="content-box">
				<view class="content-item">
					<u-form-item required label="证件类型" right>
						<view> 营业执照 </view>
					</u-form-item>
				</view>

				<view class="content-item">
					<u-form-item prop="businessLicenseId" required label="证件编号" right>
						<view class="item-r">
							<u--input placeholder="请输入证件编号" border="surround"
								v-model="aptitudeInfo.businessLicenseId" />
						</view>
					</u-form-item>
				</view>

				<view class="content-item">
					<u-form-item prop="businessLicenseExpirationDate" required label="有效期" right
						@click="handelShowPicker(1)">
						<view class="item-r">
							<u--input placeholder="请输入证件有效期" border="surround"
								v-model="aptitudeInfo.businessLicenseExpirationDate" />
						</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="businessPhoto">
						<imgs-upload @update="fileList" :value="1"
							:imageList="aptitudeInfo.businessPhoto"></imgs-upload>
						<p class="upload-text">证件正面图</p>
					</u-form-item>
				</view>
			</view>

			<!-- =====================证件类型===================== -->
			<view class="content-box">
				<view class="content-item">
					<u-form-item required label="证件类型" right>
						<view> 经营许可证 </view>
					</u-form-item>
				</view>
				<view class="content-item">
					<u-form-item prop="businessLicenseNumberValid" required label="证件编号" right>
						<view class="item-r">
							<u--input placeholder="请输入证件编号" border="surround"
								v-model="aptitudeInfo.businessLicenseNumberValid" />
						</view>
					</u-form-item>
				</view>
				<view class="content-item">
					<u-form-item prop="businessLicenseExpirationDateValid" required label="有效期" right
						@click="handelShowPicker(2)">
						<view class="item-r">
							<u--input placeholder="请输入证件有效期" border="surround"
								v-model="aptitudeInfo.businessLicenseExpirationDateValid" />
						</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="businessLicensePhoto">
						<imgs-upload @update="fileList" :value="2"
							:imageList="aptitudeInfo.businessLicensePhoto"></imgs-upload>

						<p class="upload-text">证件正面图</p>
					</u-form-item>
				</view>
			</view>
		</u-form>

		<button class="btn" @click="handlerSkipNext">提交审核</button>

		<!-- 时间 -->
		<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 {
		addMerchantAuth
	} from '@/api/merchant/merchantAuth';
	import {
		formatTime
	} from '@/utils/date';

	export default {
		components: {
			ImgsUpload,
		},
		data() {
			return {
				type: 1, // 1表示营业执照  2表示经营许可
				aptitudeInfo: {
					businessLicenseId: '',
					businessLicenseExpirationDate: '',
					businessPhoto: '',
					businessLicenseNumberValid: '',
					businessLicenseExpirationDateValid: '',
					businessLicensePhoto: '',
				},
				showPicker: false,
				valueDate: Number(new Date()),
				rules: {
					businessLicenseId: {
						type: 'string',
						required: true,
						message: '请输入证件编号',
						trigger: ['blur', 'change'],
					},
					businessLicenseExpirationDate: {
						type: 'string',
						required: true,
						message: '请输入证件有效期',
						trigger: ['change'],
					},
					businessLicenseNumberValid: {
						type: 'string',
						required: true,
						message: '请输入证件编号',
						trigger: ['blur', 'change'],
					},
					businessLicenseExpirationDateValid: {
						type: 'string',
						required: true,
						message: '请输入证件有效期',
						trigger: ['change'],
					},
				},
				merchantInfo: {},
				storeInfo: {},
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (this.$store.state.data.merchantInfo && this.$store.state.data.merchantInfo.businessPhoto) {
				this.aptitudeInfo = {
					businessLicenseId: this.$store.state.data.merchantInfo.idCardNumber,
					businessLicenseExpirationDate: formatTime(this.$store.state.data.merchantInfo
						.businessLicenseExpirationDate, 'YYYY-MM-DD'),
					businessPhoto: this.$store.state.data.merchantInfo.businessPhoto,
					businessLicenseNumberValid: this.$store.state.data.merchantInfo.businessLicenseNumberValid,
					businessLicenseExpirationDateValid: formatTime(this.$store.state.data.merchantInfo
						.businessLicenseExpirationDateValid, 'YYYY-MM-DD'),
					businessLicensePhoto: this.$store.state.data.merchantInfo.businessLicensePhoto,
				}
			
			}
		},

		onShow() {
			this.legalInfo = this.$store.state.data.legalInfo;
			this.storeInfo = this.$store.state.data.storeInfo;


		},
		methods: {
			// 图片
			fileList(val, data) {
				if (data == 1) {
					this.aptitudeInfo.businessPhoto = val[0];
				} else if (data == 2) {
					this.aptitudeInfo.businessLicensePhoto = val[0];
				}
			},
			handelShowPicker(data) {
				this.type = data;
				this.showPicker = true;
			},

			// 跳转到提交成功页面
			handlerSkipNext() {
				this.$refs.uForm.validate().then(res => {
					/* 发起认证 */
					let params = Object.assign({
						...this.legalInfo,
						...this.storeInfo,
						...this.aptitudeInfo,
					});

					addMerchantAuth({
						...params,
					}).then(res => {
						console.log(res);

						/* 将数据存储 */
						this.$store.commit('SET_APTITUDEINFO', this.aptitudeInfo);

						/* 路由跳转 */
						setTimeout(() => {
							uni.navigateTo({
								url: '/pageMerchant/mineModule/certification/messageSubmit',
							});
						}, 2000);
					});
				});
			},

			handleConfirm(data) {
				if (this.type === 1) {
					this.aptitudeInfo.businessLicenseExpirationDate = formatTime(data.value, 'YYYY-MM-DD');
				} else if (this.type === 2) {
					this.aptitudeInfo.businessLicenseExpirationDateValid = formatTime(data.value, 'YYYY-MM-DD');
				}
				this.showPicker = false;
			},
		},
	};
</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>