<template>
	<view class="page">
		<u-navbar :is-back="false" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='8'></u-navbar>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uS8TEdeETwvOdHDswc9c" mode="" class="imgbj"></image>
		<view class="title" @click="btnshanghu">
			商户中心
		</view>
		<view class="serchshop">
			<view class="dingwei" @click="btnweizhi">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uSDeC51wazjnZ9cFQx6l" mode="" class="dwimg"></image>
				{{tit}}
				<image src="https://api.ccttiot.com/smartmeter/img/static/u0FZH7ZLG168c7W0FUMk" mode="" class="xlimg"></image>
			</view>
			<view class="search">
                <input type="text" v-model="sousuovalue" @confirm="confirm" placeholder="搜索门店"/>
				<u-icon name="search"></u-icon>
			</view>
		</view>
		<view class="shoplist" 
		  @touchstart="onTouchStart"
		  @touchend="onTouchEnd" 
		  @touchcancel="onTouchCancel">
			<view class="shop_item" v-for="(item,index) in listshop" :key="index" @click="btndetail(item.storeId)">
				<view class="lt">
					<image :src="item.picture" mode=""></image>
					<view class="hour">
						{{item.minimumTime == undefined ? '--' : item.minimumTime}}小时起订
					</view>
				</view>
				<view class="rt">
					<view class="name">
						{{item.name == undefined ? '--' : item.name}}
					</view>
					<view class="dizhi">
						{{item.address == undefined ? '--' : item.address}}
					</view>
					<view class="juli">
						<view class="kmjuli">
							距我{{item.distance == undefined ? '--' : item.distance}}km
						</view>
						<view class="juliimg">
							<image @click.stop="btndaohang(item.lng,item.lat,item.name,item.address)" src="https://api.ccttiot.com/smartmeter/img/static/ufhdTzq4mHUlHgCKgI5Y" mode=""></image>
							<image @click.stop="btntel(item.serverPhone)" src="https://api.ccttiot.com/smartmeter/img/static/uOxtHZOxGREoFVXEv73f" mode=""></image>
						</view>
					</view>
					<view class="yuding">
						<image src="https://api.ccttiot.com/smartmeter/img/static/u7zHXOY1SGwic7jQESUR" mode="" class="one"></image>
						预定包间
						<image src="https://api.ccttiot.com/smartmeter/img/static/urIGUWi7cHWqp9qem3Ag" mode="" class="two"></image>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 100rpx;font-size: 34rpx;color: #ccc;">
				没有更多门店啦,敬请期待吧...
			</view>
		</view>
		<view class="jiameng" @click="btnjiameng">
			<image src="https://api.ccttiot.com/smartmeter/img/static/usIK790XacHJ1pXUbbfW" mode=""></image>
		</view>
		<view class="xuanfu" v-if="imgflag">
			<image @click="btnopen(1)" src="https://api.ccttiot.com/smartmeter/img/static/uKeCHdot1z4QJldDe3UL" mode=""></image>
			<image @click="btnopen(2)" src="https://api.ccttiot.com/smartmeter/img/static/u4lmGbm77OWC2Uik2737" mode=""></image>
			<image @click="btnopen(3)" src="https://api.ccttiot.com/smartmeter/img/static/uUjamKC7Kvd9KMLLOeBD" mode=""></image>
			<image @click="btnopen(4)" src="https://api.ccttiot.com/smartmeter/img/static/u9ccoP5o6Gt6rCKwsXva" mode=""></image>
		</view>
		<view class="xuanfus" v-else>
			<image @click="btnopen(1)" src="https://api.ccttiot.com/smartmeter/img/static/uKeCHdot1z4QJldDe3UL" mode=""></image>
			<image @click="btnopen(2)" src="https://api.ccttiot.com/smartmeter/img/static/u4lmGbm77OWC2Uik2737" mode=""></image>
			<image @click="btnopen(3)" src="https://api.ccttiot.com/smartmeter/img/static/uUjamKC7Kvd9KMLLOeBD" mode=""></image>
			<image @click="btnopen(4)" src="https://api.ccttiot.com/smartmeter/img/static/u9ccoP5o6Gt6rCKwsXva" mode=""></image>
		</view>
		<view class="karaokeroom" v-if="jinxinflag">
			<view class="top">
				正在进行中的订单
			</view>
			<view class="roomlist">
				<view class="room_item" v-for="(item,index) in jinxinglist" :key="index" :id="mdindex == index ? 'active' : ''" @click="btnmd(index)">
                    <view class="lt">
                    	<image :src="item.picture" mode=""></image>
                    </view>			
				    <view class="rt" style="font-size: 22rpx;">
				    	<view class="">
				    		<text>预约门店:</text> <text>{{item.storeName == null ? '--' : item.storeName}}</text>
				    	</view>
						<view class="">
							<text>预约包厢:</text> <text>{{item.roomName == null ? '--' : item.roomName}}</text>
						</view>
						<view class="">
							<text>开始时间:</text> <text>{{item.reserveStartTime == null ? '--' : item.reserveStartTime}}</text>
						</view>
						<view class="">
							<text>结束时间:</text> <text>{{item.reserveEndTime == null ? '--' : item.reserveEndTime}}</text>
						</view>
				    </view>
				</view>
			</view>
			<view class="anniu" @click="btnanniu">
				{{jinxintxt}}
			</view>
		</view>
		<image v-if="jinxinflag" @click="jinxinflag = false" class="jinxinx" src="https://api.ccttiot.com/smartmeter/img/static/uH5fAInJQYhf3wlXkuYI" mode=""></image>
		<view class="mask" v-if="jinxinflag"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			   jinxintxt:'开包厢',
               imgflag:true,
			   longitude:'',
			   latitude:'',
			   tit:'',
			   listshop:[],
			   cityid:'',
			   pagesum:1,
			   pagesize:10,
			   touchStartX: 0, // 触屏起始点x
			   touchStartY: 0, // 触屏起始点y  
			   xiaflag:true,
			   total:'',
			   qingqiuflag:true,
			   jinxinglist:[],
			   mdindex:-1,
			   jinxinflag:false,
			   sousuovalue:''
			}
		},
		onLoad(option) {
			if(option.cityId){
				this.cityid = option.cityId
				this.tit = option.cityName
				this.longitude = ''
				this.latitude = ''
				this.getweizhi()
			}else{
				this.getweizhi()
			}
            this.getinfo()
			this.getorder()
		},
		methods: {
			// 点击跳转到商户中心
			btnshanghu(){
				uni.navigateTo({
					url:'/page_shanghu/index'
				})
			},
			// 点击选择开包厢
			btnmd(index){
				this.mdindex = index
			},
			// 请求正在进行中的订单
			getorder(){
				this.$u.get(`/app/order/getInProgressOrderList`).then(res =>{
					if(res.code == 200){
						this.jinxinglist = res.data
					}
				})
			},
			// 点击进行导航
			btndaohang(lng,lat,name,addres){
				uni.openLocation({
				   latitude:lat,//纬度-目的地/坐标点
				   longitude:lng,//经度-目的地/坐标点
				   name:name,//地点名称
				   address:addres//详细地点名称
				})
			},
			// 点击拨打电话
			btntel(serverPhone){
				uni.makePhoneCall({
					phoneNumber: serverPhone,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
						uni.showToast({
							title: '取消拨打电话',
							icon: 'none'
						})
					}
				})
			},
			// 选择订单后进行操作
			btnanniu(){
				if(this.jinxintxt == '开店门'){
					let storeId = this.jinxinglist[this.mdindex].storeId
					console.log(this.jinxinglist[this.mdindex],this.mdindex);
					this.$u.get(`app/store/openGate/${storeId}`).then(res => {
						if(res.code == 200){
							this.jinxinflag = false
							uni.showToast({
							title: '开启店门成功',
							icon: 'success',
							duration: 2000
						    })
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}else if(this.jinxintxt == '开包厢'){
					let roomId = this.jinxinglist[this.mdindex].roomId
					this.$u.get(`app/room/openRoomGate/${roomId}`).then(res => {
						if(res.code == 200){
						   this.jinxinflag = false
						   uni.showToast({
						     title: '开启包厢门成功',
						     icon: 'success',
						     duration: 2000
					       })
					   }else{
						  uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						  })
					    }
					})
				}else if(this.jinxintxt == '去续单'){
					 this.jinxinflag = false
					let roomId = this.jinxinglist[this.mdindex].roomId
					let orderNo = this.jinxinglist[this.mdindex].orderNo
					uni.navigateTo({
						url:'/page_user/xudan?roomId=' + roomId + '&orderNo=' + orderNo
					})
				}
			},
			// 点击进行开店门开包厢等操作
			btnopen(num){
				if(num == 1){
					if(this.jinxinglist.length > 1){
						this.jinxinflag = true
						this.jinxintxt = '开店门'
					}else if(this.jinxinglist.length == 1){
						let storeId = this.jinxinglist[0].storeId
						this.$u.get(`app/store/openGate/${storeId}`).then(res => {
						if(res.code == 200){
							uni.showToast({
							title: '开启店门成功',
							icon: 'success',
							duration: 2000
						    })
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				   }else{
					    uni.showToast({
							title: '您当前没有订单',
							icon: 'none',
							duration: 2000
						})
					}
				}else if(num == 2){
					if(this.jinxinglist.length > 1){
						this.jinxinflag = true
						this.jinxintxt = '开包厢'
					}else if(this.jinxinglist.length == 1){
						let roomId = this.jinxinglist[0].roomId
						this.$u.get(`app/room/openRoomGate/${roomId}`).then(res => {
							if(res.code == 200){
							   uni.showToast({
							     title: '开启包厢门成功',
							     icon: 'success',
							     duration: 2000
						       })
						   }else{
							  uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							  })
						    }
						})
					}else{
						uni.showToast({
							title: '您当前没有订单',
							icon: 'none',
							duration: 2000
						})
					}
				}else if(num == 3){
					if(this.jinxinglist.length > 1){
						this.jinxinflag = true
						this.jinxintxt = '去续单'
					}else if(this.jinxinglist.length == 1){
						let roomId = this.jinxinglist[0].roomId
						let orderNo = this.jinxinglist[0].orderNo
						uni.navigateTo({
							url:'/page_user/xudan?roomId=' + roomId + '&orderNo=' + orderNo
						})
					}else{
						uni.showToast({
							title: '您当前没有订单',
							icon: 'none',
							duration: 2000
						})
					}
				}else if(num == 4){
					uni.scanCode({
						onlyFromCamera: true,
						scanType: ['qrCode'],
						success: res => {
					         console.log(res);
						},
						fail: err => {
							console.error('扫描失败:', err)
							uni.showToast({
								title: '扫描失败',
								icon: 'none'
							})
						}
					})
				}
			},
			// 点击输入框确定执行搜索
			confirm(){
				this.getshop()
			},
			// 根据定位来获取门店
			getshop(){
				let data = {
					phoneLon:this.longitude,
					phoneLat:this.latitude,
					cityId:this.cityid,
					keyword:this.sousuovalue
				}
				this.$u.post(`/app/getStoreListByLocation?pageNum=${this.pagesum}&pageSize=${this.pagesize}`,data).then(res => {
					if(res.code == 200){
						this.xiaflag = true
						this.total = res.total
						if (this.pagesum > 1) {
							this.pagesum++
							this.listshop = this.listshop.concat(res.rows)
							this.qingqiuflag = true
						} else {
							this.pagesum++
							this.listshop = res.rows  
							this.qingqiuflag = true
						} 
						console.log(this.listshop);
					}
				})
			},
			// 获取用户详情
			getinfo(){
				this.$u.get(`/getAppInfo`).then(res => {
					if(res.code == 200){
						uni.setStorageSync('user', res.data)
					}else if(res.code == 401){
						this.jingmo()
					}
				})
			},
			// 静默登录
			jingmo(){
				let that = this
				wx.login({
				    success(res) {
				        if (res.code) {
				            console.log('登录!', res)
				            let data = {
				                jsCode: res.code,  
				            }
							that.$u.post(`/loginByopenid?jsCode=${res.code}`,data).then(res=>{
				        		if (res.code == 200) {
									console.log("老用户登录",res)
									wx.setStorageSync('token', res.token)
				        		}
				        	})
				        }
				    },
				})
			},
			// 获取自身当前经纬度
			getweizhi(){
				uni.getLocation({
				  type: 'wgs84',
				  success: res => {
					  this.longitude = res.longitude
					  this.latitude = res.latitude
					  this.getshop()
					  this.$u.get(`app/getCity?lon=${this.longitude}&lat=${this.latitude}`).then(res => {
					  	if(res.code == 200){
							if(this.cityid == ''){
                                this.tit = res.data.cityName
							}
					  	}
					  })
				  },
				  fail: err => {
				    // 获取失败,err为错误信息
				    console.log('getLocation err:', err);
				  }
				})
			},
            // 按下滑动
            onTouchStart(e) {
                this.imgflag = false
				this.touchStartX = e.touches[0].clientX;
				this.touchStartY = e.touches[0].clientY;
            },
            // 松开滑动
            onTouchEnd(e) {
              this.imgflag = true
			  let deltaX = e.changedTouches[0].clientX - this.touchStartX;
			  let deltaY = e.changedTouches[0].clientY - this.touchStartY;
			  if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
			  	if (deltaX >= 0) {
			  		// console.log("左滑")  
			  	} else {
			  		// console.log("右滑")  
			  	}
			  } else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
			  	if (deltaY < 100) {
			  		if(this.qingqiuflag == true){
			  			let sum = (this.pagesum - 1) * this.pagesize
			  			console.log(sum,this.total);
			  			if (this.total > sum) {
			  				this.qingqiuflag = false
			  				this.getshop() 
			  			}
			  		}
			  	} else {
			  		console.log("下滑") 
			  	}
			  }
            },
            // 滑动取消
            onTouchCancel() {
              this.imgflag = true
            },
            // 点击跳转门店详情页
            btndetail(storeId){
				console.log(storeId);
            	uni.reLaunch({
            		url:'/pages/index/index?storeId=' + storeId
            	})
            },
			// 点击跳转到加盟合作页
			btnjiameng(){
				uni.navigateTo({
					url:'/page_user/zhaoshang'
				})
			},
			// 点击选择定位位置
			btnweizhi(){
				uni.navigateTo({
					url:'/page_user/city'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	#active{
		border: 1px solid #226914 !important;
		background-color: #226914 !important; 
		color: #fff !important;
	}
	.jinxinx{
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		top: 1216rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}
	.karaokeroom{
		position: fixed;
		top: 332rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		width: 674rpx;
		height: 828rpx;
		background: linear-gradient( 180deg, #DEF1DA 0%, #FFFFFF 100%, #FFFFFF 100%);
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		.top{
			font-weight: 600;
			font-size: 44rpx;
			color: #48893B;
			width: 100%;
			text-align: center;
			margin-top: 52rpx;
			margin-bottom: 44rpx;
		}
		.anniu{
			width: 584rpx;
			height: 86rpx;
			background: #48893B;
			border-radius: 43rpx 43rpx 43rpx 43rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 86rpx;
			margin: auto;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 72rpx;
		}
		.roomlist{
			height: 480rpx;
			overflow: scroll;
			.room_item{
				width: 584rpx;
				height: 224rpx;
				border: 2rpx solid #969696;
				background-color: #fff;
				border-radius: 20rpx;
				margin: auto;
				display: flex;
				align-items: center;
				padding: 34rpx;
				box-sizing: border-box;
				margin-top: 26rpx;
				.lt{
					image{
						width: 154rpx;
						height: 154rpx;
						margin-right: 22rpx;
					}
				}
			}
		}
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: .2;
	}
	.page {
		width: 750rpx;
		.xuanfu{
			position: fixed;
			top: 38%;
			right: 30rpx;
			animation: fadeInDowns .5s ease-out forwards;
			image{
				width: 90rpx;
				height: 90rpx;
				display: block;
				margin-bottom: 44rpx;
			}
		}
		@keyframes fadeInDowns {
			from {
				opacity: 0;
				transform: translateX(50px);
			}
			to {
				opacity: 1;
				transform: translateX(0);
			}
		}
		@keyframes fadeInDown {
			from {
				opacity: 0;
				transform: translateX(-50px);
			}
			to {
				opacity: 1;
				transform: translateX(0);
			}
		}
		.xuanfus{
			position: fixed;
			top: 34%;
			right: -80rpx;
			animation: fadeInDown .5s ease-out forwards;
			image{
				width: 90rpx;
				height: 90rpx;
				display: block;
				margin-top: 44rpx;
			}
		}
		.jiameng{
			width: 100%;
			text-align: center;
			background-color: #fff;
			margin: auto;
			position: fixed;
			bottom: 0;
			left: 0;
			image{
				width: 710rpx;
				height: 196rpx;
			}
		}
		.shoplist{
			width: 750rpx;
			height: 1250rpx;
			background: #FFFFFF;
			margin-top: 28rpx;
			border-radius: 30rpx 30rpx 0 0;
			padding: 48rpx;
			padding-top: 0 !important;
			box-sizing: border-box;
			overflow: scroll;
			padding-bottom: 240rpx !important;
			box-sizing: border-box;
			.shop_item{
				display: flex;
                margin-top: 40rpx;
				box-sizing: border-box;
				width: 674rpx;
				height: 350rpx;
				background: #FFFFFF;
				padding: 20rpx 18rpx;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				.rt{
					.yuding{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #48893B;
						margin-top: 26rpx;
						margin-left: 248rpx;
						.one{
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
						.two{
							width: 14rpx;
							height: 36rpx;
							margin-left: 10rpx;
						}
					}
					.juli{
						display: flex;
						justify-content: space-between;
						margin-top: 56rpx;
						align-items: center;
						.kmjuli{
							width: 210rpx;
							height: 40rpx;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 2rpx solid #48893B;
							text-align: center;
							line-height: 36rpx;
                            font-size: 26rpx;
                            color: #48893B;							
						}
						.juliimg{
							image{
								width: 60rpx;
								height: 60rpx;
								margin-left: 26rpx;
							}
						}
					}
					.dizhi{
						font-size: 26rpx;
						color: #7C7C7C;
						margin-top: 16rpx;
					}
					.name{
						font-weight: 600;
						font-size: 36rpx;
						color: #3D3D3D;
					}
				}
				.lt{
					margin-right: 38rpx;
					image{
						width: 186rpx;
						height: 236rpx;
						border-radius: 10rpx;
					}
					.hour{
						font-size: 32rpx;
						color: #48893B;
						margin-top: 32rpx;
					}
				}
			}
		}
		.serchshop{
			display: flex;
			margin-top: 40rpx;
			align-items: center;
			justify-content: space-between;
			padding-left: 34rpx;
			padding-right: 34rpx;
			box-sizing: border-box;
			.search{
				width: 468rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #FFFFFF;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				position: relative;
				input{
					margin-left: 94rpx;
					height: 72rpx;
					line-height: 72rpx;
				}
				/deep/ .uicon-search{
					position: absolute;
					top: 24rpx !important;
					left: 26rpx !important;
				}
			}
			.dingwei{
				display: flex;
				font-weight: 600;
				font-size: 32rpx;
				color: #48893B;
				align-items: center;
				.dwimg{
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
				.xlimg{
					width: 26rpx;
					height: 14rpx;
					margin-left: 12rpx;
				}
			}
		}
		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #226914;
			line-height: 50rpx;
			padding-left: 34rpx;
			box-sizing: border-box;
		}
		.imgbj{
			width: 750rpx;
			height: 610rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}
</style>