<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/u3lZnmhqSqkMd7gHKtMD" mode="" class="imgbj"></image>
		<view class="title">
			<text @click="btnshanghu">返回兑换</text>
		</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="" style="margin-top: 48rpx;">
			<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,item)">
					<view class="lt">
						<image :src="item.pictures[0]" mode="aspectFill"></image>
					</view>
					<view class="rt">
						<view class="name">
							{{item.name == undefined ? '--' : item.name}}
						</view>
						<view class="dizhi">
							{{item.address.length > 13 ? item.address.slice(0,13) + '...' : item.address}}
						</view>
						<view class="storebq">
							<image v-if="item.typeTags && item.typeTags.some(tag => tag == 1)"
								src="https://api.ccttiot.com/smartmeter/img/static/u7ilmXTNlXUbbvfSgOa1" mode="">
							</image>
							<image v-if="item.typeTags && item.typeTags.some(tag => tag == 2)"
								src="https://api.ccttiot.com/smartmeter/img/static/umA2EUZkovZEA0hCLmP3" mode="">
							</image>
							<image v-if="item.typeTags && item.typeTags.some(tag => tag == 3)"
								src="https://api.ccttiot.com/smartmeter/img/static/uPjeCCnwjiJlCNqURltX" mode="">
							</image>
							<image v-if="item.typeTags && item.typeTags.some(tag => tag == 4)"
								src="https://api.ccttiot.com/smartmeter/img/static/uvbY7v6slwyqVghulsZW" mode="">
							</image>
						</view>
						<view class="juli">
							<view class="kmjuli">
								距我{{item.distance == undefined ? '--' : item.distance}}km
							</view>
						</view>
					</view>
				</view>
				<view class="" style="width: 100%;text-align: center;margin-top: 40rpx;font-size: 34rpx;color: #ccc;">
					没有更多门店啦，敬请期待吧...
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	var xBlufi = require("@/components/blufi/xBlufi.js"); 
	export default {
		data() {
			return {
				guangaoflag: true,
				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,
				viewType: '',
				jinxinflag: false,
				sousuovalue: '',
				tabindex: 0,
				type: 0,
				userType: '00',
				cesuolist: [],
				cesuoflag: false,
				csindex: -1,
				ver_dataflag:2,
				devicesarr:[],
				deviceIds:'',
				name:'',
				deviceId:'',
				lanyaflag:false,
				lanyamac:'',
				lanyaobj:{}
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '共享时光屋',
				path: '/pages/nearbystores/index'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '共享时光屋',
				query: '',
				path: '/pages/nearbystores/index'
			}
		},
		onLoad(option) {
			if (option.cityId) {
				this.cityid = option.cityId
				this.tit = option.cityName
				this.longitude = ''
				this.latitude = ''
				this.getweizhi()
			} else {
				this.getweizhi()
			}
			this.getinfo()
		},
		onShow() {

		},
		methods: {
			// 获取用户详情
			getinfo() {
				this.$u.get(`/getAppInfo`).then(res => {
					if (res.code == 200) {
						this.userType = res.user.userType
						uni.setStorageSync('user', res.data)
					} else if (res.code == 401) {
						this.jingmo()
					}
				})
			},
			// 获取自身当前经纬度
			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)
					}
				})
			},
			// 根据定位来获取门店
			getshop() {
				let data = {
					phoneLon: this.longitude,
					phoneLat: this.latitude,
					cityId: this.cityid,
					keyword: this.sousuovalue,
					type: this.type
				}
				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)
					}
				})
			},
			// 按下滑动
			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, item) {
				uni.reLaunch({
					url: '/page_fenbaotwo/hexiao/index?storeId=' + storeId + '&tit=' + item.name + '&distance=' + item.distance
				})
			},
			btnshanghu(){
				uni.reLaunch({
					url:'/page_fenbaotwo/hexiao/index'
				})
			},
			// 点击选择定位位置
			btnweizhi() {
				uni.navigateTo({
					url: '/page_user/city?type=' + 100
				})
			}
		}
	}
</script>

<style lang="scss">
	// 离线蓝牙开关
	.lxlanya{
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translateX(-50%);
		width: 500rpx;
		max-height:600rpx;
		background-color: #fff;
		border-radius: 30rpx;
		z-index: 9;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		.cha{
			font-size: 50rpx;
			position: absolute;
			top: 20rpx;
			right: 30rpx;
			font-weight: 600;
		}
		.lxzt{
			margin-top: 30rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			view{
				display: flex;
				justify-content: space-between;
				align-items: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.lxtit{
			font-size: 32rpx;
			font-weight: 600;
			width: 100%;
			text-align: center;
			margin-top: 30rpx;
		}
		.kongzhi{
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			.lxkai{
				width: 200rpx;
				height: 80rpx;
				background-color: #48893B;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				border-radius: 20rpx;
			}
		}
	}
	page {
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	#active {
		border: 1px solid #226914 !important;
		background-color: #226914 !important;
		color: #fff !important;
	}
	.activetab {
		font-weight: 600 !important;
		font-size: 32rpx !important;
		color: #3D3D3D !important;
	}
	.cesuoul {
		width: 260rpx;
		max-height: 500rpx;
		background-color: #fff;
		border-radius: 30rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		padding: 30rpx;
		box-sizing: border-box;
		.anniuqx {
			width: 100%;
			height: 80rpx;
			border: 1px solid #226914;
			text-align: center;
			line-height: 80rpx;
			color: #226914;
			margin-top: 30rpx;
			border-radius: 20rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		.cesuoli {
			width: 100%;
			.caocuo {
				.name {
					width: 100%;
					text-align: center;
					margin-top: 20rpx;
					font-size: 32rpx;
				}
				.kaiguan {
					padding: 10rpx;
					background-color: #226914;
					color: #fff;
					border-radius: 10rpx;
					margin: auto;
					margin-top: 20rpx;
					width: 100rpx;
					text-align: center;
				}
			}
		}
	}
	.tabqh {
		display: flex;
		width: 100%;
		height: 84rpx;
		background-color: #DEF1DA;
		position: relative;
		border-radius: 30rpx 30rpx 0 0;
		view {
			font-weight: 600;
			font-size: 28rpx;
			color: #7C7C7C;
			text-align: center;
			width: 33%;
			height: 84rpx;
			line-height: 84rpx;
			position: relative;
			text {
				position: absolute;
				z-index: 1;
				left: 50%;
				transform: translateX(-50%);
			}
			image {
				height: 84rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
	.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;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
	.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;
			.gb {
				width: 100rpx;
				height: 40rpx;
				background-color: rgba(0, 0, 0, 0.15);
				position: absolute;
				top: 0;
				right: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0 30rpx 0 0;
				text {
					font-size: 34rpx;
				}
			}
			image {
				width: 710rpx;
				height: 196rpx;
				border-radius: 30rpx;
			}
		}
		.shoplist {
			width: 750rpx;
			max-height: 1320rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			overflow: scroll;
			padding-bottom: 240rpx !important;
			box-sizing: border-box;
			.shop_item {
				margin: auto;
				display: flex;
				margin-top: 30rpx;
				box-sizing: border-box;
				width: 674rpx;
				max-height: 330rpx;
				background: #FFFFFF;
				padding: 20rpx 18rpx;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				.rt {
					.storebq {
						margin-top: 16rpx;
						display: flex;
						image {
							width: 100rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
					.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: 16rpx;
						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: 30rpx;
					image {
						width: 186rpx;
						height: 220rpx;
						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;
			height: 50rpx;
			padding-left: 34rpx;
			box-sizing: border-box;
		}
		.imgbj {
			width: 750rpx;
			height: 610rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}
</style>