<template>
	<view class="page-content padding">
		<!-- 上传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">
			<view class="label">联系电话</view>
			<input v-model="form.barContactPhone" placeholder="联系电话" class="zd-input"></input>
		</view>
		<view class="tab-box">
			<view class="defTab" :class="{'active':currentTab == 1}" @click="changeTab(1)">门店信息</view>
			<view class="defTab" :class="{'active':currentTab == 2}" @click="changeTab(2)">认证信息</view>
		</view>
		<template v-if="currentTab == 1">
			<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>
				<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>
				<input v-model="form.position" placeholder="店内职务" class="zd-input"></input>
			</view>
		</template>
		<template v-if="currentTab == 2">
			<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>
		</template>
		
		
		
		<button class="cu-btn bg-zd btn" @click="handleSub">保存</button>
		<!-- <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 bg-zd sucbtn" @click="toHome">进入首页</button>
			</view>

		</uni-popup> -->
	</view>
</template>

<script>
	// import QQMapSdk from '@/common/qqmap-wx-jssdk.js'
	import {
		barRegister
	} from '@/api/login.js'
	import {
		base_url
	} from '@/api/config.js'
	import {
		getBarInfo,
		editBarInfo,
		reAuth
	} from '@/api/bar.js'
	export default {
		data() {
			return {
				form: {
					barLogo: '',
					nickName: '',
					barContactPhone: '',
					barName: '',
					address: '',
					businessLicense: '', // 营业执照
					storefrontPhoto: '', // 门头照
					position: '', // 职务
					openId: '',
				},
				userInfo: {},
				currentTab: 1,
				QQMap: null,
			};
		},
		onLoad() {

			// this.QQMap = new QQMapSdk({
			//                     key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
			//                 });
			this.getBarInfoFun()
		},
		methods: {
			changeTab(key) {
				this.currentTab = key
			},
			// 获取酒吧信息
			getBarInfoFun() {
				getBarInfo().then(res => {
					this.barInfo = res.data
					this.form = JSON.parse(JSON.stringify(res.data))
				})
			},
			handleSub() {
				if(this.currentTab == 1) {
					this.submitForm()
				}else if(this.currentTab == 2) {
					this.reAuthFun()
				}
			},
			// 重新认证
			reAuthFun() {
				if (!this.form.businessLicense) {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.form.storefrontPhoto) {
					uni.showToast({
						title: '请上传门头照',
						icon: 'none',
						mask: true
					})
					return
				}
				let data = {
					businessLicense: this.form.businessLicense,
					storefrontPhoto: this.form.storefrontPhoto,
				}
				reAuth(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功，等待审核',
							icon: 'none',
							mask: true
						})
						uni.hideLoading()
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/my'
							})
						}, 500)
					}
				})
				
			},
			// 提交
			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.barContactPhone) {
					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.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
				})
				editBarInfo(this.form).then(res => {
					if (res.code == 200) {
						// this.userInfo = res.data // 暂存用户信息
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							mask: true
						})
						uni.hideLoading()
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/my'
							})
						}, 500)

					}
				}).catch(() => {
					// uni.hideLoading()
				})

			},
			toHome() {
				uni.setStorageSync('userInfo', this.userInfo)
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 上传事件
			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
									// this.QQMap.reverseGeocoder({
									// 	location: {
									// 		latitude: res.latitude,
									// 		longitude: res.longitude,
									// 		},
									// 	success: (res) => {
									// 		console.log(res)
									// 	},
									// 	fail: (err) => {
									// 		console.log(err)
									// 	},
									// })
								}
							}
						})

					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		padding: 48rpx;
		background-color: #FDFDFD;
		min-height: 100vh;

		.label {
			color: #000;
			margin-bottom: 26rpx;
			font-size: 24rpx;
			font-weight: 500;
		}

		.zd-input {
			width: 654rpx;
			height: 96rpx;
			border-radius: 16rpx;
			background-color: #FFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			color: #000;
			margin-bottom: 56rpx;
			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: 56rpx;
			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: 56rpx;
			border: 1px solid #C8C8C8;

			.upload-text {
				font-size: 28rpx;
				line-height: normal;
				color: #FEE034;
			}
		}
		.tab-box {
			
			width: 674rpx;
			top: 475rpx;
			margin: -24rpx auto 24rpx;
			border-radius: 12rpx;
			background: #F2F2F2;
			padding: 8rpx;
			display: flex;
			justify-content: space-between;
		
			.defTab {
				width: 50%;
				border-radius: 12rpx;
				background: #F2F2F2;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-weight: 500;
				color: #0B0E26;
				padding: 16rpx 48rpx;
			}
		
			.active {
				background-color: #71F4B4;
			}
		}
	}

	.btn {
		width: 654rpx;
		height: 104rpx;
		border-radius: 24rpx;
		margin: 30rpx auto;
		font-weight: 500;
		color: #0B0E26;
		font-size: 32rpx;
		// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
	}

	.sucbtn {
		width: 314rpx;
		height: 76rpx;
	}
</style>