<style lang="scss">
	.container {
		padding: 30rpx;
	}
	.form {
		margin-bottom: 20rpx;
		.margin_b {
			margin-bottom: 40rpx;
		}
		.shop_avatar {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			background-color: rgba(240, 85, 73, 0.2);
			.zyhs {
				font-size: 50rpx;
				color: rgba(240, 85, 73, 0.5);
			}
			image {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}
		}
		.zyhs-dizhi {
			margin-left: 20rpx;
			color: rgba(240, 85, 73, 1);
		}
		.form_item {
			
		}
		.tips {
			color: rgba(240, 85, 73, 1);
		}
		input {
			flex: 1;
			font-size: 28rpx;
			text-align: right;
		}
		textarea {
			width: 100%;
			height: 200rpx;
		}
		.upload_box {
			width: 300rpx;
			height: 200rpx;
			position: relative;
			.border {
				position: absolute;
				color: rgba(145, 46, 47, 1);
			}
			.zyhs-yuanjiaolt {
				left: 0;
				top: 0;
			}
			.zyhs-yuanjiaort {
				right: 0;
				top: 0;
			}
			.zyhs-yuanjiaolb {
				left: 0;
				bottom: 0;
			}
			.zyhs-yuanjiaorb {
				right: 0;
				bottom: 0;
			}
			.shop_avatar {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: rgba(240, 85, 73, 0.5);
				z-index: 2;
				.zyhs {
					font-size: 50rpx;
					color: #fff !important;
					color: rgba(240, 85, 73, 0.5);
				}
			}
			.zyhs-shenfenzhengzhengmian, .zyhs-shenfenzhengbeimian {
				font-size: 180rpx;
			}
			.image {
				image {
					width: 286rpx;
					height: 180rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
	.license {
		.image {
			width: 286rpx;
			height: 180rpx;
			border-radius: 20rpx;
			background-color: rgba(240, 85, 73, 0.2);
		}
	}
	.agreement {
	  color: rgba(240, 85, 73, 1);
	  margin-left: 10rpx;
	}
	.btn_submit {
		padding: 20rpx 0;
		border-radius: 40rpx;
		margin-top: 30rpx;
		background: linear-gradient(90deg, rgb(235, 109, 78), rgb(233, 51, 36));
	}
</style>
<template>
	<view class="container">
		<view class="bg-w border-radius-16 form padding30 font28">
			<view class="form_item flex flex-between margin_b" @click="selectLogo('logoImage')">
				店铺头像
				<view class="shop_avatar flex flex-center">
					<text v-if="!logoImage" class="zyhs zyhs-xiangji1fill"></text>
					<image v-else :src="logoImage"></image>
				</view>
			</view>
			<view class="form_item flex flex-between margin_b">
				商家名称
				<input type="text" placeholder="请输入商家名称" :maxlength="30" v-model="infor.name" >
			</view>
			<view class="form_item flex flex-between margin_b">
				信用代码
				<input type="text" placeholder="请输入企业社会信用代码" :maxlength="30" v-model="socialCreditCode" >
			</view>
			<view class="form_item flex flex-between" @click="goPage('/pages/merchants/settleIn/industry')">
				所属行业
				<text class="color-b9">请选择 <text class="zyhs zyhs-jiantou"></text></text>
			</view>
		</view>
		<view class="bg-w border-radius-16 form padding30 font28">
			<view class="form_item flex flex-between margin_b">
				真实姓名
				<input type="text" placeholder="和身份证上的名字保持一致">
			</view>
			<view class="form_item flex flex-between">
				身份证号
				<input type="text" placeholder="请输入身份证号">
			</view>
		</view>
		<view class="bg-w border-radius-16 form padding30 font28">
			<view class="form_item flex flex-between margin_b">
				身份证正面
				<text class="tips">上传的图片大小控制在3M以内!</text>
			</view>
			<view class="form_item flex flex-space-between color-b9">
				上传身份证正面
				<view class="upload_box flex flex-center" @click="uplodingImg('foodBusinessLicenseImg')">
					<text class="zyhs zyhs-yuanjiaolt border"></text></text>
					<text class="zyhs zyhs-yuanjiaort border"></text></text>
					<text class="zyhs zyhs-yuanjiaolb border"></text></text>
					<text class="zyhs zyhs-yuanjiaorb border"></text></text>
					<view class="shop_avatar flex flex-center">
						<text class="zyhs zyhs-xiangji1fill color-w"></text>
					</view>
					<view class="image flex flex-center">
						<text class="zyhs zyhs-shenfenzhengzhengmian" v-if="!foodBusinessLicenseImg"></text>
						<image :src="foodBusinessLicenseImg" mode="" class="image" v-else></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-w border-radius-16 form padding30 font28">
			<view class="form_item flex flex-between margin_b">
				身份证背面
				<text class="tips">上传的图片大小控制在3M以内!</text>
			</view>
			<view class="form_item flex flex-space-between color-b9">
				身份证背面
				<view class="upload_box flex flex-center" @click="uplodingImg('legalIdNumberBackImg')">
					<text class="zyhs zyhs-yuanjiaolt border"></text></text>
					<text class="zyhs zyhs-yuanjiaort border"></text></text>
					<text class="zyhs zyhs-yuanjiaolb border"></text></text>
					<text class="zyhs zyhs-yuanjiaorb border"></text></text>
					<view class="shop_avatar flex flex-center">
						<text class="zyhs zyhs-xiangji1fill color-w"></text>
					</view>
					<view class="image  flex flex-center">
						<text v-if="!legalIdNumberBackImg" class="zyhs zyhs-shenfenzhengbeimian"></text>
						<image :src="legalIdNumberBackImg" mode="" class="image" v-else></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-w border-radius-16 form padding30 font28 ">
			<view class="form_item flex flex-between margin_b" @click="visible = true">
				营业地址(城市)
				<text class="color-b9">{{pickerText||'请选择城市'}} <text class="zyhs zyhs-jiantou"></text></text>
			</view>
			<view class="form_item flex flex-between margin_b">
				营业地址（乡镇）
				<text class="color-b9">选择街道或城市 <text class="zyhs zyhs-jiantou"></text></text>
			</view>
			<view class="form_item flex flex-between margin_b">
				详细地址
				<input v-model="infor.addressDetails" type="text" placeholder="请输入详细地址" />
			</view>
		</view>
		<view class="bg-w border-radius-16 form padding30 font28 license">
			<view class="form_item flex flex-between margin_b">
				上传营业执照
				<text class="tips">上传的图片大小控制在3M以内!</text>
			</view>
			<view class="form_item flex flex-space-between color-b9">
				上传营业执照
				<view class="upload_box flex flex-center" @click="uplodingImg('businessLicenseImg')">
					<text class="zyhs zyhs-yuanjiaolt border"></text></text>
					<text class="zyhs zyhs-yuanjiaort border"></text></text>
					<text class="zyhs zyhs-yuanjiaolb border"></text></text>
					<text class="zyhs zyhs-yuanjiaorb border"></text></text>
					<view class="shop_avatar flex flex-center">
						<text class="zyhs zyhs-xiangji1fill color-w"></text>
					</view>
					<view class="image">
						<image :src="businessLicenseImg" mode="" class="image" v-if="businessLicenseImg"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-w border-radius-16 form padding30 font28 ">
			<view class="form_item flex flex-between margin_b">
				手机号
				<input v-model="infor.mobile" type="text" placeholder="请输入手机号" />
			</view>
			<view class="form_item flex flex-between margin_b">
				邮箱
				<input type="text" placeholder="请输入邮箱" />
			</view>
		</view>
		<view class="bg-w border-radius-16 form padding30 font28 ">
			<view class="form_item flex flex-between">
				是否同时是线下商家
				<view class="flex">
					<radio-group @change="radioChange" class="flex">
						<label class="flex" v-for="(item, index) in radioList" :key="item.value">
							<view>
								<radio 
								style="transform:scale(0.7)"
								color="rgba(240, 85, 73, 1);" 
								:value="item.value" 
								:checked="index === radio" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<block v-if="radio == 1">
			<view class="bg-w border-radius-16 form padding30 font28">
				<view class="form_item flex flex-between margin_b">
					店铺描述
				</view>
				<view class="form_item flex flex-between">
					<textarea v-model="infor.introduce" class="font28" name="" id="" cols="30" rows="10" placeholder="请填写店铺简介"></textarea>
				</view>
			</view>
			<view class="bg-w border-radius-16 form padding30 font28" @click="handlerStoreAddress">
				<view class="form_item flex flex-between">
					详情地址
					<text class="color-b9">{{ infor.storeAddress || '请选择详细地址'}}<text class="zyhs zyhs-dizhi"></text></text>
				</view>
			</view>
		</block>
		<view class="flex font24 flex-align-center">
			<checkbox-group class="flex flex-align-center">
				<label class="flex flex-align-center">
					<checkbox 
					style="transform:scale(0.7)"
					color="rgba(240, 85, 73, 1);" 
					:checked="isAgree"/>提交即视为同意
				</label>
			</checkbox-group>
			<text class="agreement">中亿华商服务协议</text>
		</view>
		<view @click="commit" class="btn_submit flex flex-center color-w">提交</view>
		<w-picker
			:visible.sync="visible"
			ref="mpvueCityPicker"
			mode="region"
			:value="positionValue"
			@confirm="onConfirm"
			themeColor="#3a2397"
		></w-picker>
		
		<avatar @upload="myUpload" ref="avatar"></avatar>
	</view>
</template>

<script>
	import url from '@/common/http/url.js';
	import upload from "@/common/http/upload.js";
	import publics from "@/common/utils/public.js"
	import wPicker from "@/components/w-picker/w-picker.vue"
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import { mapState } from "vuex"
	export default {
		components: { wPicker, avatar },
		data() {
			return {
				radioList: [
					{
					    value: '0',
					    name: '否'
					},
					{
					    value: '1',
					    name: '是'
					}
				],
				radio: 0,
				isAgree: false,
				licenseImg: this.$staticUrl + 'merchants/license.png',
				businessImg: this.$staticUrl + 'merchants/business.png',
				visible:false,
				loading: false,
				positionValue: [],
				pickerText: '',
				infor: {},
				callbackList: [],
				logoImage: "", // 店铺logo
				businessLicenseImg: "", // 营业执照
				foodBusinessLicenseImg: "", // 食品经营许可证
				legalIdNumberJustImg: "",  // 法人身份证正面
				legalIdNumberBackImg: "",  // 法人身份证反面
				legalHealthCertificateImg: "",  // 法人健康证
				othreOneImg: "",  // 其它图片01
				othreTwoImg: "",  // 其它图片02
				othreThreeImg: "",  // 其它图片03
				isEdit: false
			};
		},
		onLoad(opt){
			let examineData = uni.getStorageSync("examineData")
			uni.removeStorageSync("examineData")
			if (examineData) {
				if (examineData.status === 3) this.isEdit = true
				this.infor = examineData
				delete this.infor.updateTime
				delete this.infor.createTime
				this.logoImage = examineData.logoImage
				this.businessLicenseImg = examineData.businessLicenseImg
				this.foodBusinessLicenseImg = examineData.foodBusinessLicenseImg
				this.legalIdNumberJustImg = examineData.legalIdNumberJustImg
				this.legalIdNumberBackImg = examineData.legalIdNumberBackImg
				this.legalHealthCertificateImg = examineData.legalHealthCertificateImg
				this.othreOneImg = examineData.othreOneImg
				this.othreTwoImg = examineData.othreTwoImg
				this.othreThreeImg = examineData.othreThreeImg
				let addrObj = publics.getLngAndLatByCode(examineData.threeAdcode)
				if (addrObj){
					this.pickerText = ""
					addrObj.map(v=>{
						this.pickerText = this.pickerText + v.name
						this.positionValue.push(v.name)
					})
				}
			}
		},
		onShow () {
			this.getMyAsset();
		},
		computed: {
			...mapState(["locationObj"])
		},
		methods:{

			radioChange (e) {
				let { value } = e.detail;
				this.radio = value
			},
			goPage (path) {
				console.log('path', path)
				this.$navigateTo(path)
			},
			commit(){
				let _this = this
				if (this.regForm()) return this.$msg(this.regForm())
				this.loading = true
				let num = 0
				uni.showLoading({
					mask: true
				});
				this.callbackList.forEach(v =>{
					upload.getOssSignature(v.path, 10, 1).then(data=>{
						upload.uploadImageOss(data, false).then(list=>{
							num++
							_this.infor[v.name] = JSON.stringify({
								resourceTemporaryUUID: list[0].resourceTemporaryUUID,
								ossWidth: v.ossWidth,
								ossHeight: v.ossHeight,
								size: v.size
							})
							if (num === _this.callbackList.length) {
								uni.hideLoading();
								let path = this.isEdit ? url.store.updateApply : url.store.submitApply
								_this.$http('POST', path, _this.infor).then(res =>{
									uni.showModal({
										content: '商户入驻申请提交成功,请耐心等待。',
										showCancel: false,
										success: e => {
											_this.$navigateBack(2)
										}
									});
								}).catch(()=>{
									_this.loading = false
								})
							}
						})
					})
				})
			},
			regForm(){
				if (!this.logoImage) {
					return "请上传店铺头像"
				} else if (!this.infor.name){
					return "请输入商家名称"
				} else if (!this.infor.mobile){
					return "请输入商家联系电话"
				} else if (!this.pickerText){
					return "请选择商家所在位置"
				} else if (!this.infor.nameOfEnterprise){
					return "请输入企业名称"
				} else if (!this.infor.socialCreditCode){
					return "请输入企业社会信用代码"
				} else if (!this.businessLicenseImg){
					return "请上传营业执照照片"
				} else if (!this.foodBusinessLicenseImg){
					return "请上传食品经营许可证照"
				} else if (!this.legalIdNumberJustImg){
					return "法人身份证正面照"
				} else if (!this.legalIdNumberBackImg){
					return "法人身份证反面照"
				} else {
					return false
				}
			},
			onConfirm(e) {
				let _this = this
				this.pickerText = e.result
				this.infor.oneAdcode = e.obj.province.value
				this.infor.twoAdcode = e.obj.city.value
				this.infor.threeAdcode = e.obj.area.value
				let addressInfo = e.obj.area
				uni.chooseLocation({
					longitude: addressInfo.centerLng.toString(),
					latitude: addressInfo.centerLat.toString(),
					success(res) {
						if (res.address.startsWith(e.result)){
							_this.infor.addressDetails = res.address.split(e.result)[1]
						} else if (res.name === '地图位置' || res.name === res.address){
							_this.infor.addressDetails = res.address
						} else {
							_this.infor.addressDetails = res.name + res.address
						}
						_this.infor.lng = res.longitude
						_this.infor.lat = res.latitude
						_this.$forceUpdate()
					}
				})
			},
			handlerStoreAddress () {
				let _this = this
				uni.chooseLocation({
					longitude: this.locationObj.longitude,
					latitude: this.locationObj.latitude,
					success(res) {
						console.log('res', res)
						if (res.name === '地图位置' || res.name === res.address){
							_this.infor.storeAddress = res.address
						} else {
							_this.infor.storeAddress = res.name + res.address
						}
						_this.$forceUpdate()
					}
				})
			},
			selectDetail(){
				let _this = this
				uni.chooseLocation({
					longitude: _this.addressInfo.centerLng.toString(),
					latitude: _this.addressInfo.centerLat.toString(),
					success(res) {
						if (res.address.startsWith(_this.pickerText)){
							_this.infor.addressDetails = res.address.split(_this.pickerText)[1]
						} else if (res.name === '地图位置' || res.name === res.address){
							_this.infor.addressDetails = res.address
						} else {
							_this.infor.addressDetails = res.name + res.address
						}
						_this.infor.lng = res.longitude
						_this.infor.lat = res.latitude
						_this.$forceUpdate()
					}
				})
			},
			// 上传图片
			selectLogo(){
				upload.showAvatarModal(this, 500, 500)
			},
			myUpload(rsp) {
				let _this = this
				this.callbackList.forEach((v, i)=>{
					if (v.name === "logoImage") {
						this.callbackList.splice(i, 1)
						return false
					}
				})
				this.logoImage = rsp.path
				uni.getImageInfo({
					src: rsp.path,
					success: function (image) {
						_this.callbackList.push({
							name: "logoImage",
							path: rsp.path,
							ossWidth: image.width,
							ossHeight: image.height
						})
					}
				});
			},
			uplodingImg (name) {
				console.log('name', name)
				let _this = this
				this.callbackList.forEach((v, i)=>{
					if (v.name === name) {
						this.callbackList.splice(i, 1)
						return false
					}
				})
				uni.chooseImage({
					count: 1,
					success: (res) => {
						let tempFilePath = res.tempFilePaths[0]
						_this[name] = tempFilePath
						uni.getImageInfo({
							src: tempFilePath,
							success: function (image) {
								_this.callbackList.push({
									name: name,
									path: tempFilePath,
									ossWidth: image.width,
									ossHeight: image.height,
									size: res.tempFiles[0].size
								})
							}
						});
						
					}
				})
			},
			keydown(){
				return false
			}
		}
	}
</script>

