<template>
	<view class="margin-bottom-lg">
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">实名认证</block>
		</cu-custom>
		<!-- 表单 -->
		<view class="margin-lr-sm margin-top-sm">
			<form @submit="submit">
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input name="name" placeholder="请输入姓名"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">身份证号</view>
					<input name="idCard" placeholder="请输入身份证号码"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">联系电话</view>
					<input name="phone" placeholder="请输入联系人电话"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">公司名称</view>
					<input name="companyName" placeholder="请输入公司名称"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">执照地址</view>
					<input name="licenseAddress" placeholder="请输入执照地址"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">执照号码</view>
					<input name="licenseIdNum" placeholder="请输入执照号码"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">运营意向</view>
					<view class="flex-sub">
						<picker mode="region" @change="regionChange" name="area" :value="formData.area">
							<view class="picker">
								{{formData.area[0]}}，{{formData.area[1]}}，{{formData.area[2]}}
							</view>
						</picker>
						<radio-group @change="changeOperaLevel" class="margin-bottom-sm">
							<label class="radio">
								<radio style="transform:scale(0.7)" class="main-color" value="community"
									:checked="formData.operaLevel=='community'" />
								<text class="margin-left-xs">社区运营</text>
							</label>
							<label class="radio">
								<radio style="transform:scale(0.7)" class="main-color" value="cityArea"
									:checked="formData.operaLevel=='cityArea'" />
								<text class="margin-left-xs">县区运营</text>
							</label>
							<label class="radio">
								<radio style="transform:scale(0.7)" class="main-color" value="city"
									:checked="formData.operaLevel=='city'" />
								<text class="margin-left-xs">城市运营</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">质保金</view>
					<view class="flex flex-sub justify-start">
						<view>{{formData.deposit}}元</view>
						<radio-group @change="changeDepositPayNow" class="margin-left">
							<label class="radio">
								<radio style="transform:scale(0.7)" class="main-color" value=1
									:checked="payNow==1" />
								<text class="margin-left-xs">立即缴纳</text>
							</label>
							<label class="radio">
								<radio style="transform:scale(0.7)" class="main-color" value=0
									:checked="payNow==0" />
								<text class="margin-left-xs">以后缴纳</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="cu-bar bg-white margin-top-sm">
					<view class="action">
						身份证上传（正反面）
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in formData.idCardImgList" :key="index" @tap="viewImage($event, formData.idCardImgList)"
							:data-url="item">
							<image :src="item" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.idCardImgList)" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="chooseIdCardImage" v-if="formData.idCardImgList.length<4">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white margin-top-sm">
					<view class="action">
						公司营业执照、公司账户
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in formData.licenseImgList" :key="index" @tap="viewImage($event, formData.licenseImgList)"
							:data-url="item">
							<image :src="item" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.licenseImgList)" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="chooseLicenseImage" v-if="formData.licenseImgList.length<4">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="margin-lr-sm margin-top">
					<button class="bg-main-color long-btn" form-type="submit">提交</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {}
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.formData = await this.$api.data('certificationInfo');
			},
			regionChange(e) {
				this.formData.area = e.detail.value;
			},
			changeOperaLevel(e) {
				this.formData.operaLevel = e.detail.value;
			},
			changeDepositPayNow(e) {
				this.formData.payNow = e.detail.value;
			},
			viewImage(e, imgList) {
				uni.previewImage({
					urls: imgList,
					current: e.currentTarget.dataset.url
				});
			},
			delImg(e, imgList) {
				uni.showModal({
					title: '',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			chooseLicenseImage(e) {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.formData.licenseImgList.length != 0) {
							this.formData.licenseImgList = this.formData.licenseImgList.concat(res.tempFilePaths)
						} else {
							this.formData.licenseImgList = res.tempFilePaths
						}
					}
				});
			},
			chooseIdCardImage(e) {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.formData.idCardImgList.length != 0) {
							this.formData.idCardImgList = this.formData.idCardImgList.concat(res.tempFilePaths)
						} else {
							this.formData.idCardImgList = res.tempFilePaths
						}
					}
				});
			},
			validateForm(confirmFormData) {
				let formInfoValid = Boolean(confirmFormData.name) &&
					Boolean(confirmFormData.idCard) &&
					Boolean(confirmFormData.phone) &&
					Boolean(confirmFormData.companyName) &&
					Boolean(confirmFormData.licenseAddress) &&
					Boolean(confirmFormData.licenseIdNum) &&
					Boolean(confirmFormData.operaLevel) &&
					Boolean(confirmFormData.payNow);
				if (!formInfoValid) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none',
						mask: true
					})
					formInfoValid = false;
				} else if (!this.$validate.validIdCard(confirmFormData.idCard)) {
					uni.showToast({
						title: '身份证号格式错误',
						icon: 'none',
						mask: true
					})
					formInfoValid = false;
				} else if (!this.$validate.validContactNum(confirmFormData.phone)) {
					uni.showToast({
						title: '联系方式格式错误',
						icon: 'none',
						mask: true
					})
					formInfoValid = false;
				} else if (!this.$validate.validLicenseIdNum(confirmFormData.licenseIdNum)) {
					uni.showToast({
						title: '执照号码格式错误',
						icon: 'none',
						mask: true
					})
					formInfoValid = false;
				} else if (confirmFormData.idCardImgList.length === 0) {
					uni.showToast({
						title: '请上传身份证正反面',
						icon: 'none',
						mask: true
					})
					formInfoValid = false;
				} else if (confirmFormData.licenseImgList.length === 0) {
					uni.showToast({
						title: '请上传公司营业执照',
						icon: 'none',
						mask: true
					})
					formInfoValid = false;
				}
				return formInfoValid;
			},
			uploadImg(imgList) {
				uni.uploadFile({
					
				})
				return new Promise(resolve => {
					resolve();
				})
			},
			async submit(e) {
				let formData = e.detail.value;
				formData.operaLevel = this.formData.operaLevel;
				formData.area = this.formData.area;
				formData.payNow = this.formData.payNow;
				formData.idCardImgList = this.formData.idCardImgList;
				formData.licenseImgList = this.formData.licenseImgList;
				let formValid = this.validateForm(formData);
				console.log(formData);
				if (formValid) {
					let picUploadResult = await this.uploadImg(formData.idCardImgList.concat(formData.licenseImgList));
					if (picUploadResult) {
					}
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						mask: true
					})
				}
			}
		}
	}
</script>

<style>

</style>
