<template>
	<view class="">
		<view class="step">
			<uni-steps active-color="#FF6A69" :options="[
			{title: '注册账号',url:'./getShop'},
			{title: '扫码授权',url:'./qrCode'},
			{title: '提交支付资质',url:'./addPay'}, 
			{title: '基础信息',url:'./basics'} ]" :active="2"></uni-steps>
		</view>

		<view style="height: 130rpx;"></view>

		<form @submit="onSubmit">
			<view class="content">

<!-- 				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>小程序APPID</text>
					</view>
					<view class="desc">
						<text>{{obj.appid}}</text>
					</view>
				</view> -->

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>主体类型</text>
					</view>
					<view class="desc ft30 flex-grow-1 box-pack-between" @click="onPrinterStatusChange">
						<text></text>
						<view class="flex-y-center">
							{{codeStatus}}
							<text class="iconfont icongengduo"></text>
						</view>
					</view>
				</view>

				<view class="box-pack-between border-b header-version flex-y-center item" @click="uploadFile(1)">
					<view class="header-img ft28">
						营业执照照片
						<view class="ft22">
							(最大1M，暂不限制宽高)
						</view>
					</view>
					<view class="home-img">
						<image :src="URL+business_license_photo.src" class="home-img-icon"></image>
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>注册号/统一社会信用代码</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.license_number" name="license_number" class="input-box"
							placeholder="注册号/统一社会信用代码" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>商户名称</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.merchant_name" name="merchant_name" class="input-box"
							placeholder="请输入商户名称" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>商户简称</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.merchant_shortname" name="merchant_shortname" class="input-box"
							placeholder="请输入商户简称" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>个体户经营者/法人姓名</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.legal_person" name="legal_person" class="input-box"
							placeholder="请输入个体户经营者/法人姓名" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>法人手机</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.contact_phone" name="contact_phone" class="input-box"
							placeholder="请输入法人手机" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>法人邮箱</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.contact_email" name="contact_email" class="input-box"
							placeholder="请输入法人邮箱" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>证件类型</text>
					</view>
					<view class="desc">
						中国大陆居民-身份证
					</view>
				</view>

				<view class="box-pack-between border-b header-version flex-y-center item" @click="uploadFile(2)">
					<view class="header-img ft28">
						身份证正面(人像)
						<view class="ft22">
							(最大1M，暂不限制宽高)
						</view>
					</view>
					<view class="home-img">
						<image :src="URL+id_card_photo1.src" class="home-img-icon"></image>
					</view>
				</view>

				<view class="box-pack-between border-b header-version flex-y-center item" @click="uploadFile(3)">
					<view class="header-img ft28">
						身份证反面(国徽)
						<view class="ft22">
							(最大1M，暂不限制宽高)
						</view>
					</view>
					<view class="home-img">
						<image :src="URL+id_card_photo2.src" class="home-img-icon"></image>
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>身份证姓名</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.id_card_name" name="id_card_name" class="input-box"
							placeholder="请输入身份证姓名" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>身份证号码</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.id_card_number" name="id_card_number" class="input-box"
							placeholder="请输入身份证号码" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>身份证有效期开始时间</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.card_period_begin" name="card_period_begin" class="input-box"
							placeholder="请输入身份证有效期开始时间" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>身份证有效期结束时间</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.card_period_end" name="card_period_end" class="input-box"
							placeholder="请输入身份证有效期结束时间" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="box-pack-between border-b header-version flex-y-center item" @click="uploadFile(4)">
					<view class="header-img ft28">
						特殊资质
						<view class="ft22">
							(最大1M，暂不限制宽高)
						</view>
					</view>
					<view class="home-img">
						<image :src="URL+qualifications_photo.src" class="home-img-icon"></image>
					</view>
				</view>

			</view>

			<button class="sub-btn" hover-class="none" form-type="submit">
				立即提交
			</button>

		</form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL: getApp().globalData.URL,
				codeStatus: '个体工商户（营业执照上的主体类型一般为个体户、个体工商户、个体经营）',
				// obj: {},
				
				business_license_photo:{},
				
				id_card_photo1:{},
				
				id_card_photo2:{},
				
				qualifications_photo:{},
				info:{},
			}
		},

		onLoad(e) {
			this.wechat_store();
		},

		methods: {
			
			uploadFile(type) {
				var url =  "Wechatstore/upload";
				uni.chooseImage({
					success: (res) => {
						res.tempFilePaths.forEach((v, i) => {
							console.log(v)
							this.Upload({
								url: url,
								data: {
									url: v,
									admin_id: uni.getStorageSync("admin_id"),
								}
							}).then(r => {
								console.log(r, "res")
									let res={
										pay_media_id:r.pay_media_id,
										src:r.src,
										url:r.url,
									}
								    type == 1 ? (this.business_license_photo = res) :
									type == 2 ? (this.id_card_photo1 = res) :
									type == 3 ? (this.id_card_photo2 = res) : (this.qualifications_photo = res);
							}).catch({});
						})
					}
				});
			},

			onPrinterStatusChange() {
				let statusArr = ['个体工商户（营业执照上的主体类型一般为个体户、个体工商户、个体经营）',
					'企业（营业执照上的主体类型一般为有限公司、有限责任公司）'
				]
				uni.showActionSheet({
					itemList: statusArr,
					success: (r) => {
						console.log(r.tapIndex)
						this.code_type = r.tapIndex==1?2:4;
						this.codeStatus = statusArr[r.tapIndex];
					}
				})
			},

			wechat_store() {
				this.request({
					url: 'Wechatstore/wechat_store',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					}
				}).then(res => {
					this.info = res.data;
			this.codeStatus = res.data.subject_type == 2 ? '企业（营业执照上的主体类型一般为有限公司、有限责任公司）' : res.data.subject_type == 4 ? '个体工商户（营业执照上的主体类型一般为个体户、个体工商户、个体经营）' :
				'';
			this.code_type = res.data.subject_type;
			
			this.business_license_photo=res.data.business_license_photo;
			
			this.id_card_photo1=res.data.id_card_photo1;
			
			this.id_card_photo2=res.data.id_card_photo2;
			
			this.qualifications_photo=res.data.qualifications_photo;

				})
			},
			
			onSubmit(e){
				
				let data=e.detail.value;
				data.subject_type=this.code_type;
				
				data.admin_id=uni.getStorageSync("admin_id");
				
				data.business_license_photo=this.business_license_photo;
				
				data.id_card_photo1=this.id_card_photo1;
				
				data.id_card_photo2=this.id_card_photo2;
				
				data.qualifications_photo=this.qualifications_photo;
				
				data.id_doc_type='IDENTIFICATION_TYPE_IDCARD';
				
				console.log(data,"data")
				// return
				this.request({
					url: "Wechatstore/wechat_store_submit",
					data: data,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({
								url:'./basics'
							})
						}, 2000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			},


		},
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}

	.item {
		background-color: #FFF;
		padding: 0 25rpx;
	}

	.title-block {
		margin-right: 20rpx;
		max-width: 220rpx;
	}
	
	.title-block text{
		font-size: 28rpx;
	}
	.desc {
		text-align: right;
		flex: 1;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.rund {
		width: 40rpx;
		height: 40rpx;
	}

	.red {
		color: red;
		padding: 10rpx 25rpx;
		font-size: 26rpx;
	}

	.sub-btn {
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(315deg, #FF6A69 2%, #FF6A69 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		margin: 0 auto;
		margin-top: 30px;
	}

	.home-upload {
		border: 1rpx solid #e3e4e5;
		height: 80rpx;
		border-radius: 6rpx;
		padding: 0 32rpx;
		min-width: 180rpx;
		font-size: 28rpx;
		letter-spacing: 0;
		background: #f6f7f8;
	}

	.home-img-icon {
		border: 1rpx solid #ccc;
		width: 200rpx;
		height: 200rpx;
	}

	.header-img {
		max-width: 300rpx;
	}

	.header-version {
		padding: 20rpx 25rpx;
	}
</style>
