<template>
	<view class="">
		
	
	<view class="page-content padding">
		<!-- 步骤条 -->
		<view class="regist-top">
			 <view class="regist-top-1 align-center flex">
			 	<view class="" >
					<image src="@/static/one.png" class="top-image-1" style="" mode=""></image>
				</view>
				<view class="">
					<image src="@/static/arrow-right.png" class="top-image-2" style="" mode=""></image>
				</view>
				<view class="" >
					<image src="@/static/two.png" class="top-image-1" mode=""></image>
				</view>
				<view class="">
					<image src="@/static/arrow-right.png" mode="" class="top-image-2"></image>
				</view>
				<view class="" >
					<image src="@/static/three.png" class="top-image-1" mode=""></image>
				</view>
			 </view>
			 <view class="regist-top-2 align-center flex">
			 	<view class="">提交申请</view>
				<view class="">平台审核</view>
				<view class="">享受返利</view>
			 </view>
		</view>
		<view class="regist-consult align-center flex justify-between">
			<view class="" style="width: 60%;">入驻助手,帮你解决入驻问题,快速上手赢取品牌返利。</view>
			<view class="">
				<button style="background:#D42E78;width:124rpx;font-size: 24rpx;color: #FFF;">咨询</button>
			</view>
		</view>
		<view class="reg-materials">
			<view class="font-32 materials-top fontw-6">所需材料</view>
			<view class="align-center flex justify-between" style="margin-top: 28rpx;">
				<view class="" style="width: 60%;">
					<view class="font-28" >1.营业执照</view>
					<view class="">需提供有效期内商家本人的,与门头照片相符合的营业执照.</view>
				</view>
				<view class="">
					<image src="@/static/bg/bgs.png" mode="" style="width: 166rpx;height:112rpx"></image>
				</view>
			</view>
			<view class="align-center flex justify-between" style="margin-top: 28rpx;">
				<view class="" style="width: 60%;">
					<view class="font-28">2.门头照片</view>
					<view class="">需提供营业执照对应的门店,门头照片一张.</view>
				</view>
				<view class="">
					<image src="@/static/bg/bgs.png" mode="" style="width: 166rpx;height:112rpx"></image>
				</view>
			</view>
		</view>
		<!-- 门店资料 -->
		<view class="regist-store">
			<view class="font-32 fontw-6" style="margin-bottom: 28rpx;">门店资料</view>
			<view class="flex-col">
				<!-- <view class="label">门店地址</view> -->
				<view class="flex justify-between align-center zd-address"  @click="getMyLocation">
					<input v-model="form.address" placeholder="门店地址" class="flex-1"></input>
					<view style="height: 96rpx;line-height: 96rpx;width: 60rpx;">
						<text class="cuIcon-locationfill" style="font-size: 42rpx;"></text>
					</view>
				</view>
			</view>
			<view class="flex-col" @click="showPopup = true">
				<input v-model="form.bar" placeholder="所在地区" :readonly="readonlys"  @click="showPopup = true"  class="zd-input"
				:style="{ pointerEvents: readonlys ? 'none' : 'auto' }"></input>
			</view>
			<view class="flex-col">
				<!-- <view class="label">门店名称</view> -->
				<input v-model="form.barName" placeholder="门店名称" class="zd-input"></input>
			</view>
			<view class="flex-col">
				<!-- <view class="label">联系电话</view> -->
				<input v-model="form.phone" placeholder="联系电话" class="zd-input"></input>
			</view>
			<view class="flex-col">
				<!-- <view class="label">您的营业执照</view> -->
				<view class="zd-img-box flex align-center justify-between">
					<view>
						<image v-if="form.businessLicense" :src="form.businessLicense" style="width: 200rpx;height:94rpx">
						</image>
					</view>
					<text class="upload-text" @click="handleUpload('businessLicense')">上传营业执照</text>
				</view>
			</view>
			<view class="flex-col">
			<!-- 	<view class="label">您的门头照</view> -->
				<view class="zd-img-box flex align-center justify-between">
					<view>
						<image v-if="form.storefrontPhoto" :src="form.storefrontPhoto" style="width: 200rpx;height: 94rpx">
						</image>
					</view>
					<text class="upload-text" @click="handleUpload('storefrontPhoto')">上传门头照</text>
				</view>
			</view>
			<!-- <view class="flex-col">
				<input v-model="form.position" placeholder="店内职务" class="zd-input"></input>
			</view> -->
		</view>
		
		<view>
		    <regionPicker :show.sync="showPopup" @selected="onAreaSelected" />
		</view>
		<!-- 上传logo -->
		<!-- <view class="flex justify-center">
			<image v-if="form.barLogo" :src="form.barLogo" style="width: 260rpx;height: 260rpx;border-radius: 50%;">
			</image>
			<view v-else class="bg-zd flex align-center justify-center"
				style="width: 260rpx;height: 260rpx;border-radius: 50%;" @click="handleUpload('barLogo')">
				上传logo
			</view>
		</view>
		<view class="flex-col">
			<view class="label">您的昵称</view>
			<input v-model="form.nickName" placeholder="昵称" class="zd-input"></input>
		</view>
		<view class="flex-col">
			
			<input v-model="form.phone" placeholder="联系电话" class="zd-input"></input>
		</view>
		<view class="flex-col">
			<view class="label">门店名称</view>
			<input v-model="form.barName" placeholder="门店名称" class="zd-input"></input>
		</view>
		<view class="flex-col">
	

			<view class="flex justify-between align-center zd-address"  @click="getMyLocation">
				<input v-model="form.address" placeholder="门店地址" class="flex-1"></input>
				<view style="height: 96rpx;line-height: 96rpx;width: 60rpx;">
					<text class="cuIcon-locationfill" style="font-size: 42rpx;"></text>
				</view>
			</view>
		</view>
		<view class="flex-col">
			<view class="label">您的营业执照</view>
			<view class="zd-img-box flex align-center justify-between">
				<view>
					<image v-if="form.businessLicense" :src="form.businessLicense" style="width: 200rpx;height:94rpx">
					</image>
				</view>
				<text class="upload-text" @click="handleUpload('businessLicense')">上传营业执照</text>
			</view>
		</view>
		<view class="flex-col">
			<view class="label">您的门头照</view>
			<view class="zd-img-box flex align-center justify-between">
				<view>
					<image v-if="form.storefrontPhoto" :src="form.storefrontPhoto" style="width: 200rpx;height: 94rpx">
					</image>
				</view>
				<text class="upload-text" @click="handleUpload('storefrontPhoto')">上传门头照</text>
			</view>
		</view>
		<view class="flex-col">
			<view class="label">您的店内职务</view>
			<input v-model="form.position" placeholder="店内职务" class="zd-input"></input>
		</view> -->
		<uni-popup ref="consultRefs" type="center" border-radius="6px 6px 6px 6px" :is-mask-click="false">
			<view class="" style="position: relative;">
				<view class="" @click="consultClick">
					<image src="@/static/icons/cencels.svg" style="width: 48rpx;height: 48rpx;position: absolute;top:10rpx;right: 20rpx;" mode=""></image>
				</view>
				
				<view class="bg-white flex flex-col align-center justify-center"
					style="width: 676rpx;border-radius: 12rpx;">
					<view class="" style="font-size: 36rpx;margin: 32rpx 0 22rpx;color: #3D3D3D;font-weight: 600;">
						添加官方助手 
					</view>
					<image src="@/static/cg.png" style="width: 380rpx;height: 380rpx;"></image>
					<view class="margin-tb-xl" style="font-size: 28rpx;">长按上方二维码识别并添加</view>
					<!-- <button class="cu-btn  sucbtn" style="background: #4E63E0;color: #FFF;" @click="toHome">进入首页</button> -->
				</view>
			</view>
			
		
		</uni-popup>
		<uni-popup ref="successRef" type="center" border-radius="6px 6px 6px 6px" :is-mask-click="false">
			<view class="bg-white flex flex-col align-center justify-center"
				style="width: 676rpx;height: 596rpx;border-radius: 12rpx;">
				<image src="@/static/cg.png" style="width: 376rpx;height: 262rpx;"></image>
				<view class="margin-tb-xl" style="font-size: 28rpx;">提交成功，等待审核</view>
				<button class="cu-btn  sucbtn" style="background: #4E63E0;color: #FFF;" @click="toHome">进入首页</button>
			</view>

		</uni-popup>
	</view>
	<view class="sub-btn flex align-center justify-between" >
		<view class="flex align-center" @click="tuichu">
			<view class="">
				<image src="@/static/logouts.png" style="width:48rpx;height: 48rpx;margin-right: 33;" mode=""></image>
			</view>
			<view class="sub-btn-txt">
				退出
			</view>
		</view>
		<view class="">
			<button class="cu-btn bg-zd btn" @click="submitForm">提交入驻</button>
		</view>
		
	</view>
	</view>
</template>

<script>
	// import QQMapSdk from '@/common/qqmap-wx-jssdk.min.js'
	import regionPicker from '@/components/regionPicker.vue'
	import {
		barRegister
	} from '@/api/login.js'
	import {
		base_url
	} from '@/api/config.js'
	export default {
		components: {
		    regionPicker
		  },
		data() {
			return {
				form: {
					barLogo: '',
					nickName: '',
					phone: '',
					barName: '',
					address: '',
					businessLicense: '', // 营业执照
					storefrontPhoto: '', // 门头照
					position: '', // 职务
					openId: '',
				},
				userInfo: {},
				QQMap: null,
				showPopup: false,
				selectedProvince: null,
				selectedCity: null,
				selectedArea: null,
				readonlys: true
			};
		},
		onLoad({
			openId
		}) {
			this.form.openId = openId
			// this.QQMap = new QQMapSdk({
			//                     key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
			//                 });
			// this.$refs.successRef.open()
			this.$refs.consultRefs.open()
		},
		methods: {
			consultClick() {
				this.$refs.consultRefs.close()
			},
			tuichu(){
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			// 提交
			submitForm() {
				if (!this.form.barLogo) {
					uni.showToast({
						title: '请上传logo',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.form.nickName) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.form.barName) {
					uni.showToast({
						title: '请输入门店名称',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请输入门店地址',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.form.businessLicense) {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.form.storefrontPhoto) {
					uni.showToast({
						title: '请上传门头照',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.form.position) {
					uni.showToast({
						title: '请输入店内职务',
						icon: 'none',
						mask: true
					})
					return
				}
				if(!this.form.latitude || !this.form.longitude) {
					uni.showToast({
							title: '请通过定位获取位置',
							icon: 'none',
							mask: true,
					})
					return
				}
					
					
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				barRegister(this.form).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data.register // 暂存用户信息
						uni.setStorageSync('token', res.data.token)
						uni.hideLoading()
						this.$refs.successRef.open()
					}
				}).catch(() => {
					// uni.hideLoading()
				})

			},
			toHome() {
				uni.setStorageSync('userInfo', this.userInfo)
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			 onAreaSelected(province, city, area) {
			       this.selectedProvince = province;
			       this.selectedCity = city;
			       this.selectedArea = area;
			       console.log('Selected Province:', province);
			       console.log('Selected City:', city);
			       console.log('Selected Area:', area);
			       // 在这里处理选择后的逻辑
			     },
			// 上传事件
			handleUpload(key) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: base_url + '/bar/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								type: 'image'
							},
							success: (uploadFileRes) => {
								this.form[key] = JSON.parse(uploadFileRes.data).url
							}
						});
					}
				})
			},
			// 获取位置
			getMyLocation() {
				uni.getSetting({
					success: (res) => {
						console.log(res)
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success: (res) => {
									this.handleGetLocation()
								},
								fail: (err) => {
									uni.showModal({
										title: '提示',
										content: '请先授权获取您的位置信息',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														if (res.authSetting['scope.userLocation']) {
															this.handleGetLocation()
														}
													}
												})
											} else if (res.cancel) {
												console.log('用户点击取消')
											}
										}
									})
								}
							})
						}else {
							this.handleGetLocation()
						}
					},
				})

			},
			handleGetLocation() {
				uni.getLocation({
					type: "gcj02",
					success: (res) => {
						console.log(res)
						uni.chooseLocation({
							complete: (res) => {
								console.log(res)
								if (res.errMsg == 'chooseLocation:ok') {
									this.form.address = res.address
									this.form.latitude = res.latitude
									this.form.longitude = res.longitude
								}
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.page-content {
		padding: 24rpx;
		background-color: #F7F8FA;
		min-height: 100vh;
		font-family: Roboto;
		font-size: 24rpx;
		.label {
			color: #000;
			margin-bottom: 26rpx;
			font-size: 24rpx;
			font-weight: 500;
		}

		.zd-input {
			width: 100%;
			height: 96rpx;
			border-radius: 16rpx;
			background-color: #FFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			color: #000;
			margin-bottom: 16rpx;
			border: 1px solid #C8C8C8;
		}

		.zd-address {
			width: 654rpx;
			height: 96rpx;
			border-radius: 16rpx;
			background-color: #FFF;
			padding: 0 0 0 30rpx;
			box-sizing: border-box;
			color: #000;
			margin-bottom: 16rpx;
			border: 1px solid #C8C8C8;
		}

		.zd-img-box {
			width: 654rpx;
			min-height: 96rpx;
			max-height: 200rpx;
			border-radius: 16rpx;
			background-color: #FFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			color: #000;
			margin-bottom: 16rpx;
			border: 1px solid #C8C8C8;

			.upload-text {
				font-size: 28rpx;
				line-height: normal;
				color: #FEE034;
			}
		}
		.regist-top{
			background: #FFFFFF;
			width:100%;
			height:234rpx;
			border-radius: 12rpx;
		}
		.regist-top-1{
			color: #FDCA40;
			padding: 42rpx 66rpx 0 84rpx;
			 font-family: 'Courier New', Courier, monospace; /* 使用方形字体 */
			font-size: 36px;
			line-height: 36px; /* 使行高与字体大小相同 */
			letter-spacing: 0em;
			color: #FDCA40;
			justify-content: space-between;
		}
		.regist-top-2{
			font-size: 24rpx;
			padding: 9px 87rpx 0 105rpx;
			font-weight: 600;
			justify-content: space-between;
		}
		.top-image-1{
			width: 94rpx;
			height: 72rpx;
		}
		.top-image-2{
			width: 44rpx;
			height: 44rpx;
		}
		.regist-consult{
			height: 106rpx;	
			padding: 24rpx 24rpx;
			background: #FFF;
			margin-top: 32rpx;
			font-size: 24rpx;
			width: 100%;
		}
		.reg-materials{
			height: 380rpx;
			background: #FFF;
			padding: 24rpx;
			margin-top: 32rpx;
			.materials-top{
				
			}
		}
		.regist-store{
			background: #FFFFFF;
			margin-top: 38rpx;
			padding: 24rpx;
		}
	}
	.font-28{
		font-size: 28rpx;
	}
	.font-32{
		font-size: 32rpx;
	}
	.fontw-6{
		font-weight: 600;
	}
	.btn {
		width: 420rpx;
		height: 80rpx;
		border-radius: 24rpx;
		margin: 30rpx auto;
		background: #4E63E0;
		
		// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
		font-weight: 600;
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.sucbtn {
		width: 314rpx;
		height: 76rpx;
	}
	input[readonly] {
	  cursor: default;
	  background-color: #f5f5f5;
	}
	.sub-btn{
		background: #FFFFFF;
		padding: 0 48rpx 0 66rpx;
		.sub-btn-txt{
			margin-left: 20rpx;
			font-size: 28rpx;
			font-weight: 600;
		}
		
	}
</style>