<template>
	<view class="page-content padding">
		<!-- 上传logo -->
		<view class="">
			<view class="flex justify-center" style="">
				<image v-if="form.barLogo" :src="form.barLogo" style="width: 202rpx;height: 202rpx;border-radius: 50%;">
				</image>
				<view v-else class="bg1 flex align-center justify-center"
					style="width: 202rpx;height: 202rpx;border-radius: 50%;position: relative;" @click="handleUpload('barLogo')">
					<view class="">
						<image src="@/static/bg/phones.svg" mode="" style="width: 60rpx;height: 60rpx;"></image>
					</view>
					<view class="" style="position: absolute;bottom: 0;right: 0;">
						<image src="@/static/adds.svg" mode="" style="width: 48rpx;height: 48rpx;"></image>
					</view>
				</view>
				
			</view>
			<view :style="{ height: containerHeight + 'rpx' }" :class="filteredList.length>0?'bors':''" style="position: relative;">
				<view class="flex-col">
					<view class="label">酒厂名称</view>
					<input v-model="form.nickName" @input="handleSearch" placeholder="酒厂名称" class="zd-input wh1"></input>
				</view>
				<view class="" style="position: absolute;top:160rpx;left: 0;">
					<view class="" v-for="(item, index) in filteredList">
						<view style="width: 100%;" @click="breweryClick(item)">{{item}}</view>
					</view>
				</view>
			</view>
			
			<view class="flex-col">
				<view class="label">酒款名称</view>
				<input v-model="form.phone" placeholder="酒款名称" class="zd-input wh1"></input>
			</view>
			<view class="flex-col">
				<view class="label">酒精含量</view>
				<input v-model="form.barName" placeholder="酒精含量" class="zd-input wh1"></input>
			</view>
			<view class="flex-col">
				<view class="label">简介</view>
				<textarea  placeholder="简介" class="zd-input wh2"/>
				
			</view>
			
			<button class="cu-btn btn"  @click="submitForm">确认提交</button>
		</view>
		<!-- <view class="flex align-center justify-center" style="width: 100%; height: 90vh;">
		  <view class="flex flex-col align-center justify-center" style="width: 100%;">
		    
		    <image src="@/static/bg/kongs.svg" mode="aspectFit" style="width: 256rpx; height: 190rpx;"></image>
		    
		    <view style="margin-top: 100rpx;">您搜索的内容没有收录</view>
		    
		    <view style="margin-top: 28rpx;">请更换搜索词或新建酒款</view>
		  
		    <view style="margin-top: 36rpx;">
		      <button class="cu-btn btn" @click="submitForm">创建新酒款</button>
		    </view>
		  </view>
		</view> -->
		
	</view>
</template>

<script>
	// import QQMapSdk from '@/common/qqmap-wx-jssdk.min.js'
	import {
		barRegister
	} from '@/api/login.js'
	import {
		base_url
	} from '@/api/config.js'
	export default {
		data() {
			return {
				form: {
					barLogo: '',
					nickName: '',
					phone: '',
					barName: '',
					address: '',
					businessLicense: '', // 营业执照
					storefrontPhoto: '', // 门头照
					position: '', // 职务
					openId: '',
				},
				userInfo: {},
				QQMap: null,
				 originalList: ['苹果', '香蕉', '橙子', '菠萝', '葡萄', '西瓜'], 
				 filteredList: [], 
			};
		},
		onLoad({
			openId
		}) {
			this.form.openId = openId
			// this.QQMap = new QQMapSdk({
			//                     key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
			//                 });
		},
		computed: {
		    containerHeight() {
		      const baseHeight = 160; // 基础高度，根据实际情况调整
		      return this.filteredList.length > 0 ? baseHeight + this.filteredList.length * 50 : baseHeight;
		    }
		  },
		methods: {
			handleSearch() {
			  if (this.form.nickName.trim() === '') {
				this.filteredList = this.originalList; // 如果关键词为空，显示全部数据
				return;
			  }
		
			  // 模糊搜索逻辑
			  this.filteredList = this.originalList.filter(item =>
				item.includes(this.form.nickName)
			  );
			},
			breweryClick(item){
				this.form.nickName = item
				this.filteredList = []
			},
			// 提交
			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'
				})
			},
			// 上传事件
			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: 48rpx;
		background-color: #FDFDFD;
		min-height: 100vh;
		font-family: Roboto;
		.label {
			color: #000;
			margin-bottom: 26rpx;
			font-size: 24rpx;
			font-weight: 500;
		}
		.zd-input {
			
			border-radius: 16rpx;
			background-color: #FFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			color: #000;
			margin-bottom: 24rpx;
			border: 1px solid #C8C8C8;
		}
		.wh1{
			width: 654rpx;
			height: 96rpx;
		}
		.wh2{
			width: 654rpx;
			height: 160rpx;
		}
		.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: 24rpx;
			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;
			}
		}
	}

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

	.sucbtn {
		width: 314rpx;
		height: 76rpx;
	}
	.bg1 {
		background: rgba(216, 216, 216, 0.75);
		color: #000;
	}
	.bors{
		border: #000 2rpx solid;
		border-radius: 24rpx;
	}
</style>