<template>
	<view class="content">
		<!-- 基本用法 -->
		<view class="step">
			<uni-steps active-color="#3387FF" :options="[{title: '扫码授权',url:'./qrCode'}, {title: '小程序配置',url:'./deploy'}, 
			{title: '提交版本',url:'./addVersion'},
		    {title: '提交审核',url:'./addExamine'},{title: '版本管理',url:'./Versioning'} ]" :active="3"></uni-steps>
		</view>
		<view style="height: 130rpx;"></view>
		<form @submit="save">
			<view class="bgf" style="padding: 0 30rpx;">

				<view class="box-pack-between border-b header-version flex-y-center">
					<view class="header-img">
						营业执照照片
						<view class="ft22">
							(最大宽度 2160px，最大高度 3840px,不超过1M)
						</view>
					</view>
					<view class="home-img" @click="uploadFile" data-type='1'>
						<image :src="URL+license_pic" class="home-img-icon"></image>
					</view>
				</view>

				<view class="box-pack-between border-b header-version flex-y-center">
					<view class="header-img">
						资质照片
						<view class="ft22">
							(最大宽度 2160px，最大高度 3840px,不超过1M)
						</view>
					</view>
					<view class="home-img" @click="uploadFile" data-type='2'>
						<image :src="URL+special_license_pic" class="home-img-icon" ></image>
					</view>
				</view>

				<view class="box-pack-between border-b header-version flex-y-center">
					<view class="header-img">
						小程序logo图标
						<view class="ft22">
							(上传像素为180*180 px，logo图片最大 256KB，图片高度与宽度必须一致,如果头像过大,加载会慢点)
						</view>
					</view>
					<view class="home-img" @click="uploadFile" data-type='3'>
						<image :src="URL+app_logo" class="home-img-icon"></image>
					</view>
				</view>
			</view>

			<view class="bgf">
				<view class="box-pack-between list flex-y-center br">
					<text class="ft28">营业执照名称:</text>
					<input class="flex-grow-1 tr ft28" :value="info.name" maxlength="128" name='name'
						placeholder="请输入营业执照名称" />
				</view>
			</view>

			<view class="bgf">
				<view class="box-pack-between list flex-y-center br">
					<text class="ft28">营业执照有效期:</text>
					
					<input class="flex-grow-1 tr ft28" :value="info.date" maxlength="64" name='date'
						placeholder="营业执照有效期" />
						
				</view>
			</view>

			<view class="ft24 tip" >
				Tip:营业执照有效期，格式为 yyyy-MM-dd，9999-12-31表示长期有效。
			</view>

			<!-- <view class="bgf">
				<view class="box-pack-between list flex-y-center br">
					<text class="ft28">小程序应用名称:</text>
					<input class="flex-grow-1 tr ft28" :value="info.app_name" maxlength="64" name='app_name'
						placeholder="请输入小程序应用名称" />
				</view>
			</view> -->
			
			<view class="bgf">
				<view class="box-pack-between list flex-y-center br">
					<text class="ft28">小程序客服电话:</text>
					<input class="flex-grow-1 tr ft28" :value="info.phone" maxlength="32" name='phone'
						placeholder="请输入小程序客服电话" />
				</view>
			</view>
			
			<view class="bgf">
				<view class="box-pack-between list br" style="height: auto;padding: 20rpx 30rpx;">
					<text class="ft28" style="min-width: 230rpx;">小程序版本描述:</text>
					<textarea auto-height="true" class="flex-grow-1 tr ft28" :value="info.version_desc" maxlength="128" name='version_desc'
						placeholder="小程序版本描述，30-500个字符。"  />
						
				</view>
				<view class="tip ft24" @click="copy">
					*参考：优化支付成功之后需要点击完成，才监听状态订单状态，修改为接口回调监听
					 <text class="copy">点击复制</text>
				</view>	
				
			</view>
			 
			<view class="bgf mar-24" @click="open" data-type="1">
				<view class="box-pack-between list flex-y-center br">
					<text class="ft28">门店地址</text>
					<view class="flex-y-center ft26">
						{{address.Prov_title || ''}} {{address.City_title || ''}} {{address.Dist_title || ''}}
						<text class="iconfont icongengduo"></text>
					</view>
				</view>
			</view>
			
			<view class="bgf" @click="open" data-type="2">
				<view class="box-pack-between list flex-y-center br">
					<text class="ft28" style="min-width: 120rpx;">小程序类目:</text>
					<view class="flex-y-center ft26">
						{{Mcc.mccCd1_title || ''}} {{Mcc.mccCd2_title || ''}} {{Mcc.mccCd3_title || ''}}
						<text class="iconfont icongengduo"></text>
					</view>
				</view>
			</view>
			<view style="height: 140rpx;">
				
			</view>
			<view class="flex-center pof">
				<button formType="submit" class="flex-center login-btn">提交审核</button>
			</view>
			
		</form>

		<uni-popup ref="uniScroll" type="bottom">
			<uni-scroll :Prov_arr="Prov_arr" @select="select"></uni-scroll>
		</uni-popup>

		<uni-popup ref="uniScrollailOne" type="bottom">
			<uni-scrollail-one :Prov_arr="MccCd" @setlet="selectOne"></uni-scrollail-one>
		</uni-popup>

	</view>
</template>
<script>
	import uniScroll from '../components/uni-scroll/uni-scroll.vue'
	import uniScrollailOne from '../components/uni-scroll/uni-scrollail1.vue'
	export default {
		components: {
			uniScroll,
			uniScrollailOne,
		},
		data() {
			return {
				category_arr: [],
				category_index: -1,
				category_id: "",
				URL: getApp().globalData.URL,				
				license_pic: "",
				special_license_pic: "",
				app_logo:"",
				Mcc: {
					mccCd1_title: "请选择",
					mccCd2_title: "",
					mccCd3_title: "",
				},
				address: {
					Prov_title: "请选择",
					City_title: "",
					Dist_title: "",
				},
				Prov_arr: [],
				MccCd: [],
				back_arr: [],
				back_index: -1,
				bank_name: "请选择",
				info: {},
				date:"",
			}
		},
		
		onLoad(e) {
			this.merchant_id = e.merchant_id;
			this.getCategory();
			this.Prov();
			this.preview();
		},
		
		methods: {
			copy(){
				let content='优化支付成功之后需要点击完成，才监听状态订单状态，修改为接口回调监听';
				uni.setClipboardData({
					data: content,
					success: function (r) {
					    getApp().globalData.isApp = false
						console.log('赋能成功',r);
					}
				});
			},
			getBusiness() {
				this.request({
					url: "alipay/getBusiness",
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.category_arr = res.data;
						
					}
				})
			},
			
			pickerDate(e){
				this.date=e.detail.value;
			},
			
			uploadFile(e) {
				var type = e.currentTarget.dataset.type,
				    url = type==3?"setting/logo_upload":"setting/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(res => {
								console.log(res, "res")
									type == 1 ? (this.license_pic = res.src) :
									type == 2 ? (this.special_license_pic = res.src) :
									type == 3 ? (this.app_logo = res.src) : '';
							}).catch({
							});
						})
			
					}
				});
			},
			
			preview(e) {
				this.request({
					url: "setting/alipayxcx",
					data: {
					admin_id:uni.getStorageSync("admin_id")
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.info = res.data;
						this.app_logo = res.data.app_logo;
						this.license_pic = res.data.license_pic;
						this.special_license_pic = res.data.special_license_pic;
									
						this.address = {
							Prov_title: res.data.province_name,
							Prov_code: res.data.province_code,
							City_title: res.data.city_name,
							City_code: res.data.city_code,
							Dist_title: res.data.area_name,
							Dist_code: res.data.area_code,
						}
						this.Mcc = {
							mccCd1_title: res.data.code1_name,
							mccCd2_title: res.data.code2_name,
							mccCd3_title: res.data.code3_name,
							mccCd1: res.data.code1,
							mccCd2: res.data.code2,
							mccCd3: res.data.code3,
						}
					}
				})
			},

			picker_back(e) {
				this.bank_name = this.back_arr[e.target.value].bank_name;
				this.back_index = e.target.value;
			},

			picker_category(e) {
				this.category_id = this.category_arr[e.target.value].id;
				this.category_index = e.target.value;
			},
			
			// 获取一级分类
			getCategory(e) {
				this.request({
					url: "setting/xcx_type",
					data: {
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.MccCd = res.data;
					}
				});
			},

			open(e) {
				var type = e.currentTarget.dataset.type;
				if (type == 1) {
					this.$refs.uniScroll.open();
				} else {
					this.$refs.uniScrollailOne.open();
				}
			},
			
          // 获取省
			Prov(e) {
				this.request({
					url: "setting/getprovince",
					data: {
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.Prov_arr = res.data;
					}
				});
			},
			
			// 获取地址
			select(e) {
				console.log(e)
				this.address = e;
			},
			// 获取分类
			selectOne(e) {
				console.log(e)
				this.Mcc = e;
			},

			save(e) {
				let data = e.detail.value;
			    data.admin_id=uni.getStorageSync("admin_id");
				data.license_pic= this.license_pic;   //营业执照照片
				data.special_license_pic= this.special_license_pic;   //资质照片
				data.app_logo=this.app_logo;
				data.code1 = this.Mcc.mccCd1;   
				data.code2 = this.Mcc.mccCd2;
				data.code3 = this.Mcc.mccCd3;
				data.province_code = this.address.Prov_code;
				data.city_code = this.address.City_code;
				data.area_code = this.address.Dist_code;
				data.id = this.info.id;
				
				// if (!data.contact_email || !data.contact_name || !data.name || !data.oneCategory || !data.threeCategory ||
				// 	!data.twoCategory || !data.detail_address) {
				// 	uni.showToast({
				// 		title: "必填项不能为空",
				// 		icon: 'none'
				// 	})
				// 	return
				// }
             
				this.request({
					url: "setting/alipaysubmit",
					data,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						uni.showToast({
							title: "提交成功"
						})
						setTimeout(() => {
							uni.redirectTo({
								url: "./Versioning",
							})
						}, 2000)
					}
				});
			},


		},
	}
</script>

<style>
	.copy{
		margin-left: 10px;
		color: #000000;
	}
	page {
		background: #F1F1F1;
	}

	page .act {
		color: #007AFF;
	}
	
	.tip{
		padding: 20rpx;
		color: red;
	}
	.tr {
		text-align: right;
	}

	.header-version {
		padding: 20rpx 0;
	}

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

	.mar-24 {
		margin-top: 24rpx;
	}

	.list {
		height: 100rpx;
		padding: 0 30rpx;
		background: #fff;
		position: relative;
	}

	.addimg {
		width: 90rpx;
		height: 90rpx;
	}

	.icongengduo {
		font-size: 28rpx;
	}

	.btm-btn-block {
		width: 100%;
		padding: 0 30rpx;
		margin: 30px 0;
	}

	.btm-btn-block .btn {
		width: 325rpx;
		height: 98rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin: 0 auto;
	}

	.btm-btn-block .btn11 {
		box-shadow: 0px 0px 8px 0px rgba(207, 219, 234, 0.4);
		color: #3387FF;
		border: 1rpx solid #3387FF;
	}

	.btm-btn-block .btn22 {
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
		color: #fff;
	}

	.login-btn {
		width: 630rpx;
		height: 98rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #fff;
		line-height: 98rpx;
		/* margin: 100rpx auto 0; */
	}

	.home-img {
		font-size: 26rpx;
		text-align: center;
		display: inline-block;
		/* width: 50%; */
	}

	.home-img-icon {
		border: 1rpx solid #ccc;
		width: 200rpx;
		height: 200rpx;
	}
	.pof{
		position: fixed;
		width: 100%;
		bottom: 10rpx;
		z-index: 11;
	}
</style>
