<template>
	<view class="content" style="padding-top: var(--status-bar-height);">
		<view style="height: 88rpx;">
		</view>
		<view class="bar" style="padding-top: var(--status-bar-height);">
			<i class="iconfont icon-xiangzuo" style="color: black;"></i>
			<view class="">
				商户入住
			</view>
			<view class="" @click="jumpToList">
				申请记录
			</view>
		</view>
		<view class="heder-tips">
			简单3步 享开店好礼 {{step}}
		</view>
		<view class="steps">
			<view class="steps-li" @click="step=1">
				<view class="num act">
					1
				</view>
				<view class="" style="font-size: 28rpx;color: #35BD3E;">
					添加店铺
				</view>
			</view>
			<u-line color="#99999B" length="148rpx" style="transform: translateY(-80rpx);"></u-line>
			<view class="steps-li" @click="step=2">
				<view class="num" :class="{act:step>1}">
					2
				</view>
				<view class="" style="font-size: 28rpx;" :style="{color:step>1?'#35BD3E':''}">
					资质认证
				</view>
			</view>
			<u-line color="#99999B" length="148rpx" style="transform: translateY(-80rpx);"></u-line>
			<view class="steps-li" @click="step=3">
				<view class="num" :class="{act:step>2}">
					3
				</view>
				<view class="" style="font-size: 28rpx;" :style="{color:step>2?'#35BD3E':''}">
					入驻审核
				</view>
			</view>

		</view>
		<view class="" style="display: flex;align-items: center;margin-top: 30rpx;">
			<u--image :showLoading="true" src="/static/images/YDT.png" style="margin: 0 auto;" width="670rpx"
				height="202rpx"></u--image>
		</view>
		<u-transition :show="step==1" mode="slide-left">
			<view class="step1" v-if='step==1'>
				<view class="card">
					<view class="card-tit">
						店铺名称
					</view>
					<u--input placeholder="店铺名称" :maxlength='20' style="height: 100rpx;" border="surround"
						v-model="formData.mer_name">
						<!-- <template slot="suffix">
							{{12}}/20
						</template> -->
					</u--input>
				</view>
				<view class="card">
					<view class="card-tit">
						店铺分类
					</view>
					<view class="card-cont">
						<view class="card-cont-li" @click="showMerchantCategoryPicker=true">
							{{formData.merchant_category_name|| '请选择店铺分类'}}
							<u-icon name="arrow-right" color="#444444" size="15"></u-icon>
						</view>
						<u-line style="margin: 28rpx 0;"></u-line>
						<view class="card-cont-li" @click="showStoreType=true">
							{{formData.mer_storeType||'请选择店铺类型'}}
							<u-icon name="arrow-right" color="#444444" size="15"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-transition>

		<u-transition :show="step==2" :mode="step==1?'slide-right':'slide-right'">
			<view class="step2" v-if='step==2'>
				<view class="card">
					<view class="card-tit">
						公司性质
					</view>
					<view class="card-cont">
						<view class="card-cont-li" @click="showCompanyType=true">
							{{formData.is_company?'对公户':'个体户'}}
							<u-icon name="arrow-right" color="#444444" size="15"></u-icon>
						</view>
					</view>
				</view>
				<view class="card">
					<view class="card-tit">
						请上传营业执照
					</view>
					<view class="upload">
						<view class='uploadimg' @click="handleChooseImage(1)">
							<u--image v-if="formData.images[0]" :showLoading="true" :src="formData.images[0]"
								width="140rpx" height="140rpx"></u--image>
							<u-icon v-if='!formData.images[0]' name="plus" color="#777777"></u-icon>
							<view v-if='!formData.images[0]' style="color: #777777;font-size: 20rpx;">
								上传图片
							</view>
						</view>
					</view>
				</view>
				<view class="card">
					<view class="card-tit">
						店铺资质
					</view>
					<view class="card-cont">
						<view class="card-cont-li">
							<view class="ellipsis" style="display: flex;align-items: center;">
								详细地址 <u--input style="margin-left: 40rpx;width: 500rpx;" border="none"
									v-model="formData.address">
								</u--input>
							</view>
						</view>
						<u-line style="margin: 28rpx 0;"></u-line>
						<view class="card-cont-li">
							<view class="ellipsis" style="display: flex;align-items: center;">
								公司名称 <u--input style="margin-left: 40rpx;width: 500rpx;" border="none"
									v-model="formData.company_name">
								</u--input>
							</view>
						</view>
						<u-line style="margin: 28rpx 0;"></u-line>
						<view class="card-cont-li">
							<view class="ellipsis" style="display: flex;align-items: center;">
								法人名称 <u--input style="margin-left: 40rpx;width: 500rpx;" border="none"
									v-model="formData.name">
								</u--input>
							</view>
						</view>
						<u-line style="margin: 28rpx 0;"></u-line>
						<view class="card-cont-li">
							<view class="ellipsis" style="display: flex;align-items: center;">
								社会信用代码 <u--input style="margin-left: 40rpx;width: 500rpx;" border="none"
									v-model="formData.social_credit_code">
								</u--input>
							</view>
						</view>
					</view>
				</view>
				<view class="card">
					<view class="card-tit">
						其他相关资质证明
					</view>
					<view class="upload" style="display: flex;flex-wrap: wrap;">
						<u--image v-for="(item,index) in (formData.images.filter((i,k)=>k>0 ))"
							style="margin-right: 20rpx;margin-bottom: 20rpx;" :showLoading="true" :src="item"
							width="140rpx" height="140rpx"></u--image>
						<view class='uploadimg' @click="handleChooseImage(0)">
							<u-icon name="plus" color="#777777"></u-icon>
							<view class="" style="color: #777777;font-size: 20rpx;">
								上传图片
							</view>
						</view>
					</view>
				</view>
				<view class="card">
					<view class="card-tit">
						电话认证
					</view>
					<view class="card-cont">
						<view class="card-cont-li">
							联系电话 {{formData.phone}}
						</view>
						<u-line style="margin: 28rpx 0;"></u-line>
						<view class="card-cont-li">
							<view class="" style="flex: 4;display: flex;align-items: center;">
								验证码 <u--input style="margin-left: 40rpx;" border="none" v-model="formData.code">
								</u--input>
							</view>
							<view class="" style="flex: 1;">
								<u-button @click="handleVerify" type="success" shape="circle" :plain="true"
									:text="text"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-transition>

		<u-transition :show="step==3" mode="slide-right">
			<view class="step3" v-if='step==3'>
				<view style="font-size: 36rpx;margin: 50rpx 0 34rpx 0;text-align:center">
					店铺等待审核
				</view>
				<view style="font-size: 32rpx;font-family: PFR;margin-bottom: 40rpx;text-align:center">
					店铺已提交入驻申请
				</view>
				<view class="step3-card">
					<view class="" style="display: flex;justify-content: space-between;font-size: 32rpx;">
						<text>{{formData.mer_name}}</text>
						<text style="font-family: PFR;" v-if='formData.status==0'>等待审核</text>
						<text style="font-family: PFR;color: #20B128;" v-if='formData.status==1'>审核通过</text>
						<text style="font-family: PFR;color: #FC452F;" v-if='formData.status==2'>审核失败</text>
					</view>
					<view class="" style="color: #777;font-size: 24rpx;margin-top: 28rpx;">
						提交时间：{{formData.create_time}}
					</view>
					<u-line color="#ECECEC" style="margin: 36rpx 0;"></u-line>
					<view v-if='formData.status==2' class=""
						style="color: #777;font-size: 24rpx;margin-top: 28rpx;margin-bottom: 36rpx;">
						备注：阿斯顿撒
					</view>
					<u-button v-if='formData.status==2' @click="step=1" style="color: #FC452F;" color="#F8E9E7"
						shape="circle" type='error' text="重新申请"></u-button>
					<view v-if='formData.status==1' class=""
						style="color: #777;font-size: 24rpx;margin-top: 28rpx;margin-bottom: 36rpx;">
						可以登录我们的工作台，把您的商品推向市场了
					</view>
					<u-button v-if='formData.status==1' @click="openApplet" color="#3ABD40" shape="circle"
						text="立即发布产品"></u-button>
				</view>
			</view>
		</u-transition>
		<view class="agreen" v-if='step==1'>
			<u-checkbox-group activeColor="#20B128" v-model="checkboxValue1" placement="column">
				<u-checkbox :customStyle="{marginBottom: '8px'}" label="已阅读并同意" name="1">
				</u-checkbox>
			</u-checkbox-group>
			<text style="color: #35BD3E;" @click="getConfig">《入驻协议》</text>
		</view>
		<view class="submit-btn" v-if='step!=3'>
			<u-button text="添加店铺" @click="submit" shape='circle'
				color=" linear-gradient( 132deg, #38BE41 0%, #20B128 100%)"></u-button>
		</view>

		<u-picker cancelColor='#3ABE40' confirmColor='#3ABE40' @cancel='showMerchantCategoryPicker=false'
			@confirm='confirmCate' :show="showMerchantCategoryPicker" keyName="category_name"
			:columns="MerchantCategoryColumn"></u-picker>
		<u-picker cancelColor='#3ABE40' confirmColor='#3ABE40' @cancel='showStoreType=false' @confirm='confirmType'
			:show="showStoreType" keyName="type_name" :columns="StoreTypeColumn">
		</u-picker>
		<u-picker cancelColor='#3ABE40' confirmColor='#3ABE40' @cancel='showCompanyType=false' @confirm='confirmCompany'
			:show="showCompanyType" :columns="companyColumn" keyName='label'>
		</u-picker>

		<view class="settlementAgreement" v-if="showProtocol">
			<view class="setAgCount" style="width: 656rpx;height: 458px;">
				<view class="close" @click="showProtocol = false">
					<u-icon name="close-circle-fill" color="#B4B1B4" size="24"></u-icon>
				</view>
				<div class="title">'商户入驻协议'</div>
				<view class="content">
					<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
				</view>
			</view>
		</view>
		<Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }"
			ref="verify">
		</Verify>
	</view>
</template>

<script>
	import uniMP from '@/utils/uniMP.js';
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		Toast
	} from "../../../libs/uniApi";
	import {
		create,
		verify,
		merchantLicenseIdentify,
		merClassifly,
		getStoreTypeApi,
		getIntention,
		getGoodsDetails
	} from '@/api/store.js';
	import Verify from '@/components/verify/verify.vue';
	export default {
		components: {
			Verify
		},
		// computed: {
		// 	stroeLength() {
		// 		return 12
		// 	}
		// },
		data() {
			return {
				tagStyle: {
					img: 'width:100%;display:block;'
				},
				stroeLength: 0,
				disabled: false,
				checkboxValue1: ['1'],
				protocol: this.sys_intention_agree,
				step: 1,
				showProtocol: false,
				showMerchantCategoryPicker: false,
				showCompanyType: false,
				showStoreType: false,
				MerchantCategoryColumn: [],
				StoreTypeColumn: [

				],
				companyColumn: [
					[{
						label: '对公户',
						is_company: 1
					}, {
						label: '个体户',
						is_company: 0
					}]
				],
				text: '获取验证码',
				formData: {
					"phone": "",
					"mer_name": "",
					"name": "",
					"code": "1212",
					"company_name": "",
					"address": "123号",
					"invitation_code": "",
					"social_credit_code": "",
					"merchant_category_id": 0,
					"merchant_category_name": "",
					"is_company": 1,
					"mer_type_id": 0,
					"mer_storeType": "",
					province_name: "",
					mer_intention_id: "",
					"city_name": "",
					"area_name": "",
					"street_name": "",
					"village_name": '',
					"is_nmsc": 0,
					"images": [],
					step: 1

				}
			}
		},

		computed: configMap({
				sys_intention_agree: ''
			},
			mapGetters(['isLogin', 'viewColor', 'keyColor'])),
		methods: {
			openApplet() {
				// uniMP.loadAppletMP(data)

			},
			splitAddress(str) {
				var reg = /.+?(省|市|自治区|自治州|县|区|镇|社区|街道|街|村)/g; // 省市区的正则
				let list = str.match(reg)
				console.log(list)
				this.formData.province_name = list[0]
				this.formData.city_name = list[1]
				this.formData.area_name = list[2]
				this.formData.street_name = list[3]
				this.formData.village_name = list[4]
			},
			confirmCate(e) {
				console.log(e)
				this.formData.merchant_category_name = e.value[0].category_name
				this.formData.merchant_category_id = e.value[0].merchant_category_id
				this.showMerchantCategoryPicker = false
			},
			confirmType(e) {
				this.formData.mer_storeType = e.value[0].type_name
				this.formData.mer_type_id = e.value[0].mer_type_id
				this.showStoreType = false
			},
			confirmCompany(e) {
				this.formData.is_company = e.value[0].is_company
				this.showCompanyType = false
			},
			getConfig() {
				this.showProtocol = true;
				// 获取配置
				this.protocol = this.sys_intention_agree;
			},
			generateRandomNumbers(count, min, max) {
				const randomNumbers = [];
				for (let i = 0; i < count; i++) {
					const number = Math.floor(Math.random() * (max - min + 1) + min);
					randomNumbers.push(number);
				}
				return randomNumbers;
			},
			// 选择图片
			handleChooseImage(type = 0) {
				let that = this;
				that.$util.uploadImageOne({
					count: 1,
					url: 'upload/image'
				}, function(res) {
					type ? that.getInfoByImg(res.data.path) :
						that.formData.images.push(res.data.path)
				});
			},
			// 识别图片
			getInfoByImg(img) {
				let that = this
				this.formData.images = [img]
				uni.showLoading({
					title: '识别中'
				})
				merchantLicenseIdentify({
					image: img
				}).then(res => {
					uni.hideLoading();
					if (res.status == 200) {
						that.formData.address = res.data.address;
						that.formData.name = res.data.legal_person;
						// that.formData.social_credit_code = res.data.register_number;
						that.formData.social_credit_code = this.generateRandomNumbers(1, 10000, 99999)[0];
						that.formData.company_name = res.data.name;
						console.log(that.splitAddress(res.data.address))
					} else {
						that.$util.Tips({
							title: "识别失败!"
						})
					}
				}).catch((e) => {
					uni.hideLoading();
					that.$util.Tips({
						title: "识别失败"
					})
				})
			},
			handleVerify() {
				this.$refs.verify.show();
			},
			success(data) {
				this.$refs.verify.hide();
				this.code(data);
			},
			async code(data) {
				let that = this;
				await verify({
					phone: that.formData.phone,
					type: 'intention',
					captchaType: 'blockPuzzle',
					captchaVerification: data.captchaVerification
				}).then(res => {
					that.$util.Tips({
						title: res.msg
					});
					that.sendCode();
				}).catch(res => {
					that.$util.Tips({
						title: res
					});
				});
			},
			sendCode() {
				if (this.disabled) return;
				this.disabled = true;
				let n = 60;
				this.text = "剩余 " + n + "s";
				const run = setInterval(() => {
					n = n - 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.text = "剩余 " + n + "s";
					if (this.text < "剩余 " + 0 + "s") {
						this.disabled = false;
						this.text = "重新获取";
					}
				}, 1000);
			},
			submit() {
				if (!this.checkboxValue1[0]) {
					return Toast("请勾选用户协议")
				}
				this.formData.step = this.step
				create(this.formData).then(res => {
					console.log(res.data.mer_intention_id, 'res')
					this.formData.mer_intention_id = res.data.mer_intention_id
					this.step++
				}).catch(err => {
					console.log(err, 'err')
					Toast(err)
				})
			},
			jumpToList() {
				uni.navigateTo({
					url: "/pages/store/applicationRecord/index"
				})
			},
		},
		onLoad() {
			this.formData.phone = this.$store.state.app.userInfo.account
			console.log(this.$store.state.app.userInfo)
			merClassifly().then(res => {
				this.MerchantCategoryColumn = [res.data]
			})
			getStoreTypeApi().then(res => {
				this.StoreTypeColumn = [res.data]
			})
			getIntention(this.$store.state.app.userInfo.uid).then(res => {
				if (Object.keys(res.data).length == 0) return
				this.formData = res.data
				this.step = this.formData.step
				this.formData.phone = this.$store.state.app.userInfo.account
				// if (this.formData.step == 3) {
				// 	getGoodsDetails(this.$store.state.app.userInfo.uid)
				// }

			})
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background-color: #fff;
		padding: 40rpx;
		box-sizing: border-box;
		font-family: PF;
		padding-bottom: 200rpx;

		.heder-tips {
			font-weight: 400;
			font-size: 24rpx;
			color: #20B128;
			text-align: center;
			margin-bottom: 50rpx;

		}

		.steps {
			display: flex;
			justify-content: center;

			.num {
				width: 52rpx;
				height: 52rpx;
				border-radius: 52rpx;
				background-color: #F3F3F3;
				text-align: center;
				line-height: 52rpx;
				margin: 0 auto;
				margin-bottom: 16rpx;
			}

			.act {
				background-color: #20B128;
				color: white;
			}
		}

		.card {
			.card-tit {
				font-size: 32rpx;
				margin: 40rpx 0 30rpx 0;
			}

			.card-cont {
				padding: 30rpx;
				border: 1px solid #F3F3F3;
				border-radius: 16rpx;
				font-family: PFR;
				color: #777777;

				.card-cont-li {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.ellipsis {
					// background-color: red;
					width: 600rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏超出容器的文本 */
					text-overflow: ellipsis;
					/* 使用省略号来表示被截断的文本 */
				}
			}
		}


		.agreen {
			display: flex;
			margin-top: 60rpx;
		}
	}


	.uploadimg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
		border: 2rpx solid #F1F1F1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx 0;
		overflow: hidden;

	}

	.step3-card {
		width: 670rpx;
		background: #FBFBFB;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 50rpx;
	}

	.submit-btn {
		position: fixed;
		bottom: 50rpx;
		width: 670rpx;
	}

	.settlementAgreement {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 12;
		background: rgba(0, 0, 0, .5);
	}

	.settlementAgreement .setAgCount {
		background: #fff;
		width: 694rpx;
		// height: 458px;
		position: absolute;
		top: 50%;
		left: 50%;

		padding: 28rpx;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;

		.content {
			height: 900rpx;
			overflow-y: scroll;

			/deep/ p {
				font-size: 13px;
				line-height: 22px;
			}

			/deep/ img {
				max-width: 100%;
			}
		}
	}

	.settlementAgreement .setAgCount .close {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}

	.settlementAgreement .setAgCount .icon {
		font-size: 42rpx;
		color: #b4b1b4;
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}

	.settlementAgreement .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}

	.settlementAgreement .setAgCount .content {
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		overflow-y: scroll;
		padding-bottom: 20rpx;
	}

	.settlementAgreement .setAgCount .contenta {
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 85%;
		overflow-y: scroll;
	}

	.code {
		position: absolute;
		width: 93px;
		line-height: 27px;
		border: 1px solid var(--view-theme);
		border-radius: 15px;
		color: var(--view-theme);
		text-align: center;
		bottom: 8px;
		right: 0;
		font-size: 12px;
	}

	.code.on {
		background-color: #bbb;
		color: #fff;
		border-color: #bbb;
	}

	.bar {
		position: fixed;
		// height: 88rpx;
		background-color: #fff;
		display: flex;
		z-index: 99;
		justify-content: space-between;
		width: 750rpx;
		box-sizing: border-box;
		top: 0;
		padding-right: 50rpx;
		padding-left: 10rpx;
		padding-bottom: 30rpx;
		// padding

	}
</style>