<template>
	<view class="park" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
		<view class="park-navbar">
			<u-navbar title="" :border-bottom="false" :background="background"></u-navbar>
		</view>
		<view class="park-but">
			<view class="but" @click="handleSortType(10)" :style="{ color: (formData.type==10)?'#794007':'#fff' }">
				公司
			</view>
			<view class="but" @click="handleSortType(20)" :style="{ color: (formData.type==20)?'#794007':'#fff' }">
				个体户
			</view>
		</view>
		<view class="forms">
			<view class="form-title">
				法人姓名<text style="color: red;">*</text>
			</view>
			<view class="form-input">
				<input type="text" v-model="formData.name" placeholder="请输入法人姓名">
			</view>
			<view class="form-title">
				法人手机号码<text style="color: red;">*</text>
			</view>
			<view class="form-input">
				<input type="text" @blur="mobileReg" v-model="formData.mobile" placeholder="请输入法人手机号码">
			</view>
			<view class="form-title">
				法人身份证正面<text style="color: red;">*</text>
			</view>
			<view class="card">
				<u-upload :action="action" :header="header" @on-uploaded="cardJustSuccess" @on-remove="cardJustRemove"
					:file-list="proveList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/news/icon-upload.png'" style="height: 96rpx;" mode="">
							</image>
						</view>
					</template>
				</u-upload>
			</view>
			<view style="font-size: 22rpx;color: #999;margin-bottom: 30rpx;">
				仅支持jpg、png、gif、50M以内/个
			</view>
			<view class="form-title">
				法人身份证反面<text style="color: red;">*</text>
			</view>
			<view class="card">
				<u-upload :action="action" :header="header" @on-uploaded="cardBackSuccessve" @on-remove="cardBackRemove"
					:file-list="proveList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/news/icon-upload.png'" style="height: 96rpx;" mode="">
							</image>
						</view>
					</template>
				</u-upload>
			</view>
			<view style="font-size: 22rpx;color: #999;margin-bottom: 30rpx;">
				仅支持jpg、png、gif、50M以内/个
			</view>
			<view class="form-title">
				营业执照<text style="color: red;">*</text>
			</view>
			<view class="card">
				<u-upload :action="action" :header="header" @on-uploaded="proveSuccess" @on-remove="proveRemove"
					:file-list="proveList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/news/icon-upload.png'" style="height: 96rpx;" mode="">
							</image>
						</view>
					</template>
				</u-upload>
			</view>
			<view style="font-size: 22rpx;color: #999;margin-bottom: 30rpx;">
				仅支持jpg、png、gif、50M以内/个
			</view>
			<view class="form-title">
				法人手持营业执照<text style="color: red;">*</text>
			</view>
			<view class="card">
				<u-upload :action="action" :header="header" @on-uploaded="proveHoldSuccess" @on-remove="proveholdRemove"
					:file-list="proveList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/news/icon-upload.png'" style="height: 96rpx;" mode="">
							</image>
						</view>
					</template>
				</u-upload>
			</view>
			<view style="font-size: 22rpx;color: #999;margin-bottom: 30rpx;">
				仅支持jpg、png、gif、50M以内/个
			</view>
			<view class="form-title" v-if="formData.type==20">
				法人银行卡号
				<!-- <text style="color: red;">*</text> -->
			</view>
			<view class="form-input" v-if="formData.type==20">
				<input type="text" v-model="formData.bank_account_number" placeholder="请输入法人银行卡号">
			</view>
			<view class="form-title" v-if="formData.type==20">
				法人银行卡开户行
				<!-- <text style="color: red;">*</text> -->
			</view>
			<view class="form-input" v-if="formData.type==20">
				<input type="text" v-model="formData.bank_name" placeholder="请输入法人银行卡开户行">
			</view>
			<view class="form-title" v-if="formData.type==20">
				法人收款二维码
				<!-- <text style="color: red;">*</text> -->
			</view>
			<view class="card" v-if="formData.type==20">
				<u-upload :action="action" :header="header" @on-uploaded="proveCodeSuccess" @on-remove="proveCodeRemove"
					:file-list="codeList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/news/icon-upload.png'" style="height: 96rpx;" mode="">
							</image>
						</view>
					</template>
				</u-upload>
			</view>
			<view style="font-size: 22rpx;color: #999;margin-bottom: 30rpx;" v-if="formData.type==20">
				仅支持jpg、png、gif、50M以内/个
			</view>
			<view class="form-title" v-if="formData.type==10">
				对公开户名称<text style="color: red;">*</text>
			</view>
			<view class="form-input" v-if="formData.type==10">
				<input type="text" v-model="formData.corporate_account_name" placeholder="请输入对公开户名称">
			</view>
			<view class="form-title" v-if="formData.type==10">
				对公账号<text style="color: red;">*</text>
			</view>
			<view class="form-input" v-if="formData.type==10">
				<input type="text" v-model="formData.corporate_account_number" placeholder="请输入对公账号">
			</view>
			<view class="form-title" v-if="formData.type==10">
				对公开户行<text style="color: red;">*</text>
			</view>
			<view class="form-input" v-if="formData.type==10">
				<input type="text" v-model="formData.corporate_bank_name" placeholder="请输入对公开户行">
			</view>
			<view class="form-title" v-if="formData.type==20">
				收款二维码商户名称
				<!-- <text style="color: red;">*</text> -->
			</view>
			<view class="form-input" v-if="formData.type==20">
				<input type="text" v-model="formData.merchant_name" placeholder="请输入收款二维码商户名称">
			</view>
			<view class="form-title">
				小程序名称
			</view>
			<view class="form-input">
				<input type="text" v-model="formData.mini_program_name" placeholder="请输入小程序名称">
			</view>
			<view class="form-title">
				小程序AppId
			</view>
			<view class="form-input">
				<input type="text" v-model="formData.mini_program_app_id" placeholder="请输入AppId">
			</view>
			<view class="form-title">
				小程序AppSecret
			</view>
			<view class="form-input">
				<input type="text" v-model="formData.mini_program_app_secret" placeholder="请输入AppSecret">
			</view>
			<view class="form-title">
				法人电子邮箱
			</view>
			<view class="form-input">
				<input type="text" v-model="formData.legal_person_email" placeholder="请输入法人电子邮箱">
			</view>
		</view>
		<view class="park-button" @click="nextStep">
			提交
		</view>
		<view class="dia" v-if="cdDia">
			<view class="diaMain">
				<image src="/static/order/ld.png" mode="" class="ld"></image>
				<view class="cdTitle">
					提交成功
				</view>
				<view class="cdInfo">
					您的开通商城的相关信息已提交，请您耐心等待，谢谢！
				</view>
				<view class="iKnow" @click="meKone()">
					我知道了
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import * as help from '@/api/help'
	import Config from '@/core/config'
	export default {
		data() {
			return {
				background: {
					background: 'none'
				},
				indexBackgroundImage: 'https://www.amiami.com.cn/static/openShopping.png?t=' + new Date().getTime(),
				action: '',
				header: '',
				cdDia: false,
				justList: [],
				backList: [],
				holdList: [],
				proveList: [],
				formData: {
					name: "",
					mobile: "",
					id_card_front_id: "",
					id_card_back_id: "",
					business_license_id: "",
					photo_id: "",
					bank_account_number: "",
					bank_name: "",
					qr_code_id: "",
					merchant_name: "",
					corporate_account_name: "",
					corporate_account_number: "",
					corporate_bank_name: "",
					mini_program_name: "",
					mini_program_app_id: "",
					mini_program_app_secret: "",
					legal_person_email: "",
					type: 10
				},
			}
		},
		onLoad(options) {
			this.storeInfo = JSON.parse(uni.getStorageSync("storeInfo"));
		},
		onShow() {

		},
		onReady() {
			this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
			this.header = {
				'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
				'Access-Token': uni.getStorageSync('AccessToken'),
				'platform': "MP-WEIXIN",
			}
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			// 构建页面参数
			// const params = this.$getShareUrlParams()
			// return {
			// 	title: '诚挚邀请，欢迎开通！',
			// 	path: `/pages/gamll/mall`
			// }
		},
		methods: {
			mobileReg() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.formData.mobile) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				} else if (!reg.test(this.formData.mobile)) { //判断手机号格式时候正确
					uni.showToast({
						title: '手机号码不正确',
						icon: 'none'
					})
					this.formData.mobile = ''
				}
			},
			meKone() {
				this.cdDia = false
			},
			handleSortType(type) {
				Object.keys(this.formData).forEach(key => {
					this.formData[key] = ''; // 或者使用 delete obj[key];
				});
				this.formData.type = type
			},
			nextStep() {
				let that = this
				if (!that.formData.name) {
					uni.showToast({
						title: "请输入法人姓名",
						icon: 'none'
					})
					return
				}
				if (!that.formData.mobile) {
					uni.showToast({
						title: "请输入法人手机号码",
						icon: 'none'
					})
					return
				}
				if (that.formData.id_card_front_id.length == 0) {
					uni.showToast({
						title: "请上传身份证正面",
						icon: 'none'
					})
					return
				}
				if (that.formData.id_card_back_id.length == 0) {
					uni.showToast({
						title: "请上传身份证反面",
						icon: 'none'
					})
					return
				}
				if (that.formData.business_license_id.length == 0) {
					uni.showToast({
						title: "请上传营业执照",
						icon: 'none'
					})
					return
				}
				if (that.formData.photo_id.length == 0) {
					uni.showToast({
						title: "请上传手持营业执照",
						icon: 'none'
					})
					return
				}
				if (that.formData.type == 10) {
					if (!that.formData.corporate_account_name) {
						uni.showToast({
							title: "请输入对公开户名称",
							icon: 'none'
						})
						return
					}
					if (!that.formData.corporate_account_number) {
						uni.showToast({
							title: "请输入对公账号",
							icon: 'none'
						})
						return
					}
					if (!that.formData.corporate_bank_name) {
						uni.showToast({
							title: "请输入对公开户行",
							icon: 'none'
						})
						return
					}
				}
				// if (that.formData.type == 20) {
				// 	if (!that.formData.bank_account_number) {
				// 		uni.showToast({
				// 			title: "请输入法人银行卡号",
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}
				// 	if (!that.formData.bank_name) {
				// 		uni.showToast({
				// 			title: "请输入法人银行卡开户行",
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}
				// 	if (that.formData.qr_code_id.length == 0) {
				// 		uni.showToast({
				// 			title: "请上传法人收款二维码",
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}
				// 	if (!that.formData.merchant_name) {
				// 		uni.showToast({
				// 			title: "收款二维码商户名称",
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}
				// }

				if (that.formData.type == 10) {
					that.formData.bank_account_number = '';
					that.formData.bank_name = '';
					that.formData.merchant_name = '';
					that.formData.qr_code_id = "";
				}
				if (that.formData.type == 20) {
					that.formData.corporate_account_name = '';
					that.formData.corporate_account_number = '';
					that.formData.corporate_bank_name = '';
				}
				help.openShop({
					form: that.formData
				}).then(result => {
					if (result.status == 200) {
						that.cdDia = true
					}
					uni.showToast({
						title: result.message,
						icon: 'none',
						duration: 2000
					})
				})
			},
			// 正面
			cardJustSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.formData.id_card_front_id = idList.join(',');
					}
				}
			},
			cardJustRemove(file, fileList) {
				this.formData.id_card_front_id = this.handleRemove(file, fileList);
			},
			// 反面
			cardBackSuccessve(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.formData.id_card_back_id = idList.join(',');
					}
				}
			},
			cardBackRemove(file, fileList) {
				this.formData.id_card_back_id = this.handleRemove(file, fileList);
			},
			// 手持营业执照
			proveHoldSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.formData.photo_id = idList.join(',');
					}
				}
			},
			proveholdRemove(file, fileList) {
				this.formData.photo_id = this.handleRemove(file, fileList);
			},
			// 营业证
			proveSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.formData.business_license_id = idList.join(',');
					}
				}
			},
			proveRemove(file, fileList) {
				this.formData.business_license_id = this.handleRemove(file, fileList);
			},
			// 二维码
			proveCodeSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.formData.qr_code_id = idList.join(',');
					}
				}
			},
			proveCodeRemove(file, fileList) {
				this.formData.qr_code_id = this.handleRemove(file, fileList);
			},
			handleRemove: function(file, fileList) {
				let idList = []
				fileList.forEach(item => {
					idList.push(item.response.data.fileInfo.file_id)
				});
				return idList.join(',')
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.park {
		overflow: hidden;
		width: 100%;
		background-size: 100% auto;
		height: 3720rpx;
		background-size: cover;

		.park-but {
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			margin: 200rpx 60rpx 110rpx 60rpx;

			.but {
				width: 200rpx;
				background: orange;
				border-radius: 45rpx;
				height: 70rpx;
				text-align: center;
				font-weight: 700;
				font-size: 32rpx;
				color: #fff;
				line-height: 70rpx;
			}
		}

		.park-button {
			width: 630rpx;
			height: 88rpx;
			border-radius: 8rpx;
			margin: 30rpx auto 0 auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #fff;
			background: orange;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.forms {
			margin: 0 60rpx;
			overflow: hidden;

			.form-title {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333;
			}

			.form-input {
				background: #fff;
				border: 1rpx solid mediumpurple;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 24rpx;
				margin: 30rpx 0;
				border-radius: 8rpx;

				input {
					width: 100%;
					height: 100%;
				}
			}

			.card {
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0 20rpx 0;

				.card-box {
					width: 150rpx;
					height: 150rpx;
					background: #fff;
					border-radius: 16rpx;
					border: 1rpx solid mediumpurple;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 60rpx !important;
						height: 60rpx !important;
					}

					.card-tips {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}

				}
			}
		}
	}

	::v-deep .u-list-item {
		width: 153rpx !important;
		height: 153rpx !important;
		margin: 0 !important;
	}

	.dia {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;

		.diaMain {
			width: 560rpx;
			height: 432rpx;
			background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			position: relative;

			.ld {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				top: -50rpx;
				left: 230rpx;
			}

			.cdTitle {
				width: 128rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 44rpx;
				margin: 80rpx 0 0 216rpx;
			}

			.cdInfo {
				width: 498rpx;
				height: 120rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #727272;
				line-height: 38rpx;
				margin-left: 48rpx;
				margin-top: 28rpx;
			}

			.iKnow {
				width: 412rpx;
				height: 72rpx;
				background: #F55349;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 72rpx;
				margin: 36rpx 0 0 74rpx;
				text-align: center;
			}
		}
	}
</style>
