<template>
	<view class="wrap">
		<u--form :model="applyInfo" ref="uForm" error-type="message">
			<u-form-item prop="shop_type" label-position="left" label="商户类型" label-width="190">
				<view class="" @click="uinp">
					<u--input placeholder="点击选择" type="text" disabled :placeholder-style="placeholderStyle"
						v-model="applyInfo.shop_type"></u--input>
				</view>
				<u-action-sheet @close="close" @select="select" :closeOnClickOverlay="false" cancelText="取消"
					:actions="ysDict.shop_type()" :show="show" round='20' :title="title"></u-action-sheet>
			</u-form-item>
			<u-form-item label="所属行业类型" label-width="190" right-icon="arrow-right" prop="industry">
				<!-- <u--input placeholder="点击查询 接口返" :placeholder-style="placeholderStyle" v-model="applyInfo.industry"
					type="text"></u--input> -->
				<view class="" @click="uinp">
					<u--input placeholder="点击选择" type="text" disabled :placeholder-style="placeholderStyle"
						v-model="applyInfo.industry"></u--input>
				</view>
				<u-action-sheet @close="close" @select="select" :closeOnClickOverlay="false" cancelText="取消"
					:actions="ysDict.shop_type()" :show="show" round='20' :title="title"></u-action-sheet>
			</u-form-item>

			<u-form-item label="店铺名称" label-width="190" prop="shop_name">
				<u--input v-model="applyInfo.shop_name" :placeholder="mercNameFormat" type="text" placeholder="请输入店铺名称"
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<u-form-item label="门头照片" label-width="190" prop='door_photo'>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" width="160"
					height="160" :maxCount="1"></u-upload>
			</u-form-item>
			<u-form-item label="内部照片" label-width="190" prop='interior_photo'>
				<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" width="160"
					height="160" :maxCount="1"></u-upload>
			</u-form-item>
			<u-form-item label="营业执照" prop="license" label-width="190">
				<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" width="160"
					height="160" :maxCount="1"></u-upload>
			</u-form-item>
			<u-form-item label="统一社会信用代码" label-width="190" prop="uscc">
				<u--input v-model="applyInfo.uscc" placeholder='请输入统一社会信用代码号' type="text"
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<u-form-item label="营业执照名称" label-width="190" prop="license_name">
				<u--input v-model="applyInfo.license_name" type="text" :placeholder="mercNameFormat"
					placeholder='请输入营业执照名称' :placeholder-style="placeholderStyle" />
			</u-form-item>

			<u-form-item label="营业执照有效日期" label-width="250" prop="license_validity">
				<u--input v-model="applyInfo.license_validity" type="text" placeholder='请输入营业执照有效日期'
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<u-form-item label="商户营业地区" label-width="190" right-icon="arrow-right" prop="area">
				<u--input placeholder="点击选择" v-model="applyInfo.area" type="text" disabled @click="toSelAdr"
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<!-- 营业执照上的地址 -->
			<u-form-item label="营业执照地址" label-width="190" prop="license_address">
				<u-input v-model="applyInfo.license_address" type="text" placeholder='请输入营业详细地址'
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<!-- 店铺地址 -->
			<u-form-item label="营业地址" label-width="190" prop="address">
				<u-input v-model="applyInfo.address" placeholder='请输入店铺地址' type="text"
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<u-form-item label="法人身份证正面" prop="idcard_front" label-width="190">
				<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" width="160"
					height="160" :maxCount="1"></u-upload>
			</u-form-item>
			<u-form-item label="法人身份证反面" prop="idcard_back" label-width="190">
				<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" width="160"
					height="160" :maxCount="1"></u-upload>
			</u-form-item>
			<u-form-item label="法人姓名" label-width="190" prop="name">
				<u--input v-model="applyInfo.name" type="text" placeholder='请输入法人姓名'
					:placeholder-style="placeholderStyle"></u--input>
			</u-form-item>
			<u-form-item label="法人证件号" label-width="190" prop="id_umber">
				<u--input v-model="applyInfo.id_umber" type="text" placeholder='请输入法人证件号'
					:placeholder-style="placeholderStyle"></u--input>
			</u-form-item>
			<u-form-item label="法人手机号" label-width="190" prop="phone">
				<u--input v-model="applyInfo.phone" type="text" placeholder='请输入手机号'
					:placeholder-style="placeholderStyle"></u--input>
			</u-form-item>
			<u-form-item label="法人邮箱" label-width="190" prop="email">
				<u--input v-model="applyInfo.email" type="text" placeholder='请输入邮箱号'
					:placeholder-style="placeholderStyle"></u--input>
			</u-form-item>
			<u-form-item label="是否法人结算" label-width="190" prop="isCrpSett">
				<u-switch v-model="isCrpSett" size='40'></u-switch>
			</u-form-item>
			<!--  非法人专属-->
			<u-form-item label="结算户名" label-width="190" prop="settlement_name" v-if="!isCrpSett">
				<u--input v-model="applyInfo.settlement_name" placeholder='请输入结算户名'
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<!--非法人专属-->
			<u-form-item label="银行预留手机号" label-width="250" prop="bank_phone" v-if="!isCrpSett">
				<u--input v-model="applyInfo.bank_phone" placeholder='请输入银行预留手机号' type="text"
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<!-- 非法人专属-->
			<u-form-item v-if="!isCrpSett" label="开户人证件号" label-width="190" prop="account_number">
				<u--input v-model="applyInfo.account_number" placeholder='请输入开户人证件号' type="text"
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<!-- 非法人专属 -->
			<u-form-item label="结算账户正面(卡号面)" label-width="250" prop="fbank_copy">
				<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" width="160"
					height="160" :maxCount="1"></u-upload>
			</u-form-item>
			</u-form-item>
			<u-form-item label="结算账户反面" label-width="250" prop="bbank_copy">
				<u-upload :fileList="fileList7" @afterRead="afterRead" @delete="deletePic" name="7" width="160"
					height="160" :maxCount="1"></u-upload>
			</u-form-item>
			<u-form-item label="结算账号" label-width="190" prop="bank_number">
				<u--input v-model="applyInfo.bank_number" placeholder='请输入结算账号址'
					:placeholder-style="placeholderStyle" />
			</u-form-item>

			<u-form-item label="开户支行" label-width="190" right-icon="arrow-right" prop="account_bank">
				<u--input placeholder="请输入开户支行" v-model="applyInfo.account_bank" type="text" @click="toSelBank(0)"
					:placeholder-style="placeholderStyle" />
			</u-form-item>
			<u-form-item label="费率（%）" label-width="190">
				<u--input type="text" v-model="applyInfo.rates" placeholder='费率（%）'
					:placeholder-style="placeholderStyle"></u--input>
			</u-form-item>
			<u-form-item label="设备编号" label-width="190" prop="equipment_no">
				<u-row gutter="16">
					<u-col span="11">
						<u-input style="width: 200px;" placeholder="请输入音箱设备上的条码" v-model="applyInfo.equipment_no"
							type="text" :placeholder-style="placeholderStyle" />
					</u-col>
					<u-col span="1">
						<u-icon name="scan" color="#2979ff" size="60" @click="scancodeDevice"></u-icon>
					</u-col>
				</u-row>
			</u-form-item>
			<u-form-item label="客户经理" label-width="190">
				<u--input v-model="applyInfo.manager" placeholder='请输入客户经理' :placeholder-style="placeholderStyle" />
			</u-form-item>
		</u--form>
		<!-- 协议 -->
		<view class="agreement">
			<view class="agreement-text">
				<u-checkbox-group size='35' iconSize='25' v-model="check_agreement" placement="column"
					@change="check_agreement_Change">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
						:label="item.name" :name="item.name" labelSize='30'>
					</u-checkbox>
				</u-checkbox-group>
				<u-tag v-for="(value,index) in agreement_list" :text="value.title+'、'" :index=index
					border-color="#ffffff" mode="plain" :show="!agreement_show" @click="agreement_Click" />
			</view>
		</view>
		<!-- 签名 -->
		<view v-show="show_sign">
			<view>商户签名</view>
			<signInput ref="sign" canvasId="oneDrowCanvas" canvasIds="oneRotateCanvas" :header="{}"
				:action="post_url+ 'upload_file'" @signToUrl="merchSign"></signInput>
			<view>经理签名</view>
			<signInput ref="sign" canvasId="twoDrowCanvas" canvasIds="twoRotateCanvas" :header="{}"
				:action="post_url+ 'upload_file'" @signToUrl="managerSign"></signInput>
		</view>
		<!-- 协议内容 -->
		<u-popup v-model="agreement_show" mode="center" width="100%" height="100%" :closeable="true"
			close-icon-color="#FF0000">
			<u-parse :html="agreement_content" class="u-padding-20"></u-parse>
		</u-popup>
		<!-- 提交 -->
		<u-button class="subBtn" @click="applySubmit">提交</u-button>


	</view>
</template>

<script>
	import ysDict from '@/pages/index/dictDatas.js'
	import signInput from "@/pages/index/am-sign-input.vue"
	import {
		getBase64Image
	} from '@/utils/imgtobase.js'
	import {
		get_agreement,
		uploadInfoToYs,
		modifyInfoToYs,
		uploadImgsToYs,
		auditInfoToYs,
		signToYs
	} from '@/utils/api.js'
	export default {
		components: {
			signInput
		},
		data() {
			return {
				checkboxList1: [{
					name: '代表同意',
					disabled: false
				}],
				title: '商户类型',
				show: false, //商户类型
				ysDict: [],
				check_agreement: [],
				show_sign: false, //显示签名
				agreement_list: [],
				fileList1: [], //图片
				fileList2: [], //图片
				fileList3: [], //图片
				fileList4: [], //图片
				fileList5: [], //图片
				fileList6: [], //图片
				fileList7: [], //图片
				applyInfo: {
					//基本信息
					shop_name: '', //商户名称
					shop_type: '', //商户类型
					industry: '', //所属行业类型
					email: '', //联系人邮箱
					manager: '', //客户经理，推广人姓名
					//图片信息
					door_photo: '', //门头照片
					interior_photo: "", //内部照片
					license: "", //营业执照
					id_card: { //身份证 json的转字符串
						front_img: '', //正面照片
						back_img: "", //反面照片
					},
					bank_card: { //银行卡 json的转字符串
						front_img: '', //正面照片
						back_img: "", //反面照片
					},
					//法人信息
					id_umber: '', //法人证件号
					name: '', //法人姓名
					phone: '', //法人手机号
					//结算信息
					is_legal: '', //是否非法人结算,Y是 N否，默认否
					settlement_name: '', //结算户名
					bank_number: '', //结算账号
					account_bank: '', //开户支行
					bank_phone: '', //银行预留手机号,非法人结算必填
					account_number: '', //开开户证件号,非法人结算必填
					//营业信息
					uscc: '', //营业执照号
					license_name: '', //营业执照名称
					license_validity: '', //营业执照有效期
					area: '', //省市区
					license_address: '', //营业详细地址
					address: '', //真是店铺地址
					equipment_no: '', //机器条码
					rates: '' //费率
				},
				isCrpSett: true, //是否法人结算
				post_url: "",
				idcard_front: {
					'type': 'idcard',
					'id_card_side': 'front'
				}, //身份证正面
				idcard_back: {
					'type': 'idcard',
					'id_card_side': 'back'
				}, //身份证反面
				license_copy: {
					'type': 'business_license'
				}, //营业执照
				merch_sign: '', //商家签名图片
				manager_sign: '', //经理签名图片
				agreement_content: '', //协议内容
				agreement_show: false, //显示协议内容
				sigUrl: '',
				mercNameFormat: '',
				placeholderStyle: 'font-size:22rpx;color:#c0c4cc;'
			}
		},

		onLoad() {
			this.post_url = getApp().globalData.baidu_sdk_url
			this.ysDict = ysDict
			// this.busOpenTypes = ysDict.busOpenTypes()
			var curUser = uni.getStorageSync('user_info')
		},
		watch: {
			//监听法人结算值
			isCrpSett: {
				handler: function(n, o) {
					console.log(n)
					this.applyInfo.is_legal = n ? 'N' : 'Y'
				},
				immediate: true
			},
		},

		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				// let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					getBase64Image(item.file).then((dataURL) => {
						console.log('data:image/jpeg;base64,' + dataURL); //这就是转换成功后的base64格式的图片
					});
					this[`fileList${event.name}`].push({
						...item,
						// status: 'uploading',
						message: '上传中'
					})
				})

				// for (let i = 0; i < lists.length; i++) {
				// 	const result = await this.uploadFilePromise(lists[i].url)
				// 	let item = this[`fileList${event.name}`][fileListLen]
				// 	this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
				// 		status: 'success',
				// 		message: '',
				// 		url: result
				// 	}))
				// 	fileListLen++
				// }
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			check_agreement_Change(e) { // 勾选版权协议
				if (e.length > 0) {
					this.applyInfo.agreement = true;
					this.show_sign = true
				} else {
					this.show_sign = false
				}
			},
			agreement_Click(index) { //协议内容弹窗
				this.agreement_content = this.agreement_list[index].content
				this.agreement_show = true
			},
			//商户类型
			uinp() {
				this.show = true
			},
			close() {
				this.show = false
			},
			select(e) {
				this.applyInfo.shop_type = e.name
				this.close()
			},
			//扫设备码
			scancodeDevice(e) {
				let that = this;
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.applyInfo.equipment_no = res.result
					}
				});
			},

			//获取协议
			get_agreement() {
				get_agreement().then(res => {
					if (res.code === "200") {
						var res_list = res.data

						for (var i = 0; i < res_list.length; i++) {

							res_list[i].content = res_list[i].content.replace(/seal/g,
								"<img src='static/gongzhang.png' width='100px' />");
							res_list[i].content = res_list[i].content.replace(/legal/g,
								"<img src='static/legal.png' width='100px' />");
						}
						this.agreement_list = res_list
					}
				})
			},
			//商户签名
			merchSign(e) {
				if (e.statusCode === 200) {
					var result = JSON.parse(e.data);
					this.merch_sign = "data:image/png;base64," + result.data.img_base64
				} else {
					this.$u.toast("签名异常 请联系管理处理")
				}
			},

			//经理签名
			managerSign(e) {
				if (e.statusCode === 200) {
					var result = JSON.parse(e.data);
					this.manager_sign = "data:image/png;base64," + result.data.img_base64
				} else {
					this.$u.toast("签名异常 请联系管理处理")
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 0 30rpx 30rpx;

		.u-size-default {
			padding: 0rpx
		}

		.signature .inputs .explain {
			width: 200rpx;
		}

		.button-line {
			transform: rotate(90deg);
			position: fixed;
			bottom: 170rpx;
			left: -100rpx;
			width: 340rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 999;
		}
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}

	.subBtn {
		margin-top: 30rpx;
	}

	.clollC {
		padding-left: 20rpx;
		width: 630rpx;
	}

	.feeItme {
		padding-left: 30rpx;
	}
</style>