<template>
	<view clas="content ">
		<view class="shopdetailtop flextwo boxsizing">
			<view class="nearitem flexfour">
				<view class="nearitemimg">
					<image src="../../static/doorin.png" mode=""></image>
				</view>
				<view class="nearitemname">室外温度</view>
				<view class="neardoor" v-if="shopdetail.uid2!=null&&shopdetail.temperature2!=null">{{shopdetail.temperature2}}℃</view>
				<view class="neardoor" v-else>暂无信息</view>
			</view>
			<view class="nearitem flexfour">
				<view class="nearitemimg">ssss
					<image src="../../static/doorin.png" mode=""></image>
				</view>
				<view class="nearitemname">室内温度</view>
				<view class="neardoor" v-if="shopdetail.uid!=null&&shopdetail.temperature!=null">{{shopdetail.temperature}}℃</view>
				<view class="neardoor" v-else>暂无信息</view>
			</view>
			<view class="nearitem flexfour">
				
				<view class="nearitemimg">
					<image src="../../static/doorin.png" mode=""></image>
				</view>
				<view class="nearitemname">室内湿度</view>
				<view class="neardoor" v-if="shopdetail.uid!=null&&shopdetail.humidity!=null">{{shopdetail.humidity}}%RH</view>
				<view class="neardoor" v-else>暂无信息</view>
			</view>
			<view class="nearitem flexfour" @click="shopcomment">
				<view class="nearitemimg">
					<image src="../../static/doorin.png" mode=""></image>
				</view>
				<view class="nearitemname">店铺评价</view>
				<view class="neardoor" style="height:45rpx;"></view>
			</view>
		</view>
		<view class="detailgood boxsizing flexone" v-if="shexianglist.length!=0">
			<view class="detailgooditem" v-for="(item,index) in shexianglist" :key="index" @click="gojiankong(item)">
				<image :src="item.image" mode=""></image>
				<view class="goodbot flextwo boxsizing">
					<view class="goodbotleft">
						<image src="../../static/openkai.png" mode=""></image>
					</view>
					<view class="goodbotleft">
						<image src="../../static/play.png" mode=""></image>
					</view>
				</view>
			</view>
			
		</view>
		<view class="addressbox boxsizing">
			<view class="addressname">{{shopdetail.name}}</view>
			<view class="addressin">
				<view class="addressimitem flextwo boxsizing">
					<view class="addressinleft flexone">
						<view class="addressimg">
							<image src="../../static/userpeople.png" mode=""></image>
						</view>
						<view class="peoplename">{{shopdetail.contact}}</view>
					</view>
					<view class="collect flexone" v-if="shopdetail.is_collect==2" @click="collet">
						<view class="collectimg">
							<image src="../../static/collect.png" mode=""></image>
						</view>
						<view class="collectname">收藏</view>
					</view>
					<view class="collect flexone yicollect" v-else @click="collet">
						<view class="collectimg">
							<image src="../../static/yicollect.png" mode=""></image>
						</view>
						<view class="collectname yiname">取消收藏</view>
					</view>
				</view>
			</view>

			<view class="addressin">
				<view class="addressimitem boxsizing flexone">
					<view class="addressinleft flexone">
						<view class="addressimg">
							<image src="../../static/phonepeople.png" mode=""></image>
						</view>
						<view class="peoplename mobilename">{{shopdetail.mobile}}</view>
					</view>

					<view class="phoneplay" @click="phone">拨号</view>
				</view>
			</view>
			<view class="addressin">
				<view class="addressimitem boxsizing flexone">
					<view class="addressinleft flexone" >
						<view class="addressimg">
							<image src="../../static/addresspeope.png" mode=""></image>
						</view>
						<view class="peoplename">
						
						{{shopdetail.province_name}}{{shopdetail.city_name}}{{shopdetail.county_name}}{{shopdetail.address}}
						<text class="phoneplay" @click="choseaddress" style="margin-left:20rpx;padding: 0 10rpx;box-sizing: border-box;">导航</text>
						</view>
					
					
					</view>

				</view>
			</view>

			<view class="addressin">
				<view class="addressimitem boxsizing flexone">
					<view class="addressinleft flexone">
						
						<view class="sqrcoe" style="color:#333;font-size:28rpx">
							收款码
						</view>
						<view class="peoplename mobilename" @click="previeimage">
							<image :src="shopdetail.qrcode_image" style="width:50rpx;height:50rpx"></image>
						
						</view>
					</view>
			
					
				</view>
			</view>
			<view class="imgbox">
				<view class="imgboxitem" v-for="(item,index) in shopdetail.images" :key="index" @click="previewimg(index)">
					<image :src="item"></image>
				</view>
			</view>
		</view>

		<view class="tapnav flextwo">
			<view class="tapnavitem" :class="order==0?'tapnavactive':''" @click="kindlist" :data-id="0">分类</view>
			<view class="tapnavitem" :class="order==1?'tapnavactive':''" @click="orderrange" :data-id="1">综合</view>
			<view class="tapnavitem" :class="order==2?'tapnavactive':''" @click="orderrange" :data-id="2">销量</view>
			<view class="tapnavitem flexone" :class="order==3||order==4?'tapnavactive':''" @click="selprice">
				<view class="tapprice">价格</view>
				<view class="tapbox flexfour">
					<view class="tapboxtop">
						<image src="../../static/shangsan.png" mode="" v-if="order==3"></image>
						<image src="../../static/toprow.png" mode="" v-else></image>
					</view>
					<view class="tapboxtop">
						<image src="../../static/xiasan.png" mode="" v-if="order==4"></image>
						<image src="../../static/xiarow.png" mode="" v-else></image>
					</view>
				</view>
			</view>


		</view>
		<view class="nodata" v-if="goodlist.length==0" style="margin-top:100rpx;">暂无数据</view>
		<view class="homeshoplist flexone goodboxlist" v-else>
			<view class="homeshopitem goodboxitem" v-for="(item,index) in goodlist" :key="index" @click="goodtail" :data-id="item.id">
				<view class="gooditemimg goodboximg">
					<image :src="item.image" mode=""></image>
					<view class="sale boxsale">已售{{item.sales}}件</view>
				</view>
				<view class="goodname hidden boxgoodname">{{item.name}}</view>
				<view class="saleprice">¥{{item.price}}</view>
				

			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				showbanben: false,
				store_id: '',
				shopdetail: '',
				order: '',
				page: 1,
				score_category_id: '',
				goodlist: [],
				shexianglist: [],
				moreshow:false
			}
		},
		onLoad(options) {
			console.log(options)
			this.store_id = options.shopid,
			uni.setStorageSync("selectId","")

			// 获取店铺详情
			this.getshopdetail();
			
			// 获取监控列表
			this.getjiankonglist()

		},
		methods: {
			// 预览图片
			previewimg(index){
				let that=this;
				uni.previewImage({
				current: that.shopdetail.images[index],
				urls: that.shopdetail.images,
				success: function (res) { },
				fail: function (res) { },
				complete: function (res) { },
				})
			},
			// 预览收款码
			previeimage(){
				let arr=[]
				arr.push(this.shopdetail.qrcode_image)
				uni.previewImage({
				current: 0,
				urls: arr,
				success: function (res) { },
				fail: function (res) { },
				complete: function (res) { },
				})
			},
			// 选择店铺位置
			choseaddress() {
				console.log(this.shopdetail.latitude);
				console.log(this.shopdetail.longitude)
				
				uni.openLocation({
					latitude: Number(this.shopdetail.latitude),
					longitude: Number(this.shopdetail.longitude),
					name:this.shopdetail.name,
					address:this.shopdetail.address,
					success: function() {
						console.log('success');
					}
				});
			},
			// 店铺评分
			shopcomment() {
				uni.navigateTo({
					url: '/pages/nearshop/shopcomment?store_id=' + this.store_id
				})
			},
			//获取监控列表
			getjiankonglist() {
				let that = this;
				var url = 'store/get_store_camera';
				var params = {
					store_id: that.store_id,

				}
				console.log('参数', params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					that.shexianglist = res.data.data

				}).catch((err) => {
					console.log(err)

				})
			},
			// 去监控页面
			gojiankong(item) {
				console.log(item.url)
				let url='http://live.qidun.cn'
				uni.navigateTo({
					url: "/pages/nearshop/jiankong?src=" +item.url
				})
			},
			// 拨打电话
			phone(item) {
				uni.makePhoneCall({
					phoneNumber: this.shopdetail.mobile //仅为示例
				});
			},
			// 分类
			kindlist(e) {
				this.order = e.currentTarget.dataset.id;
				uni.setStorageSync("selectId", "")
				console.log(this.store_id,'3494749889')
				uni.navigateTo({
					url: '/pages/homepage/goodkind?store_id='+this.store_id+'&kindtype='+1
				})
			},
			// 排序
			orderrange(e) {
				this.order = e.currentTarget.dataset.id;
				this.goodlist = [],
					this.page = 1;
				this.getgoodlist();
			},
			selprice() {
				this.price = !this.price;
				if (this.price == true) {
					this.order = 3;
				} else {
					this.order = 4;
				}
				this.goodlist = [],
					this.page = 1;
				this.getgoodlist();
			},
			// 获取店铺详情
			getshopdetail() {
				let that = this;
				var url = 'store/get_store_detail';
				var params = {
					store_id: that.store_id,

				}
				console.log('参数diandiandain', params)
				app.post(url, params, "post").then((res) => {
					console.log('我是商品详情',res);
					that.shopdetail = res.data.data

				}).catch((err) => {
					console.log(err)

				})
			},
			// 收藏和取消收藏
			collet() {
				let that = this;
				var url = 'store/collect';
				var params = {
					store_id: that.store_id,

				}
				console.log('参数', params)
				app.post(url, params, "post").then((res) => {
					if (that.shopdetail.is_collect == 2) {
						uni.showToast({
							title: '收藏成功',
							icon: "none"
						})

						that.shopdetail.is_collect = 1
					} else {
						uni.showToast({
							title: '取消收藏成功',
							icon: "none"
						})

						that.shopdetail.is_collect = 2
					}
					that.shopdetail = that.shopdetail;

					console.log(res);
					// that.shopdetail = res.data.data

				}).catch((err) => {
					console.log(err)

				})
			},
			// 获取商品列表
			getgoodlist() {
				let that = this;
				var url = 'store_goods/get_store_goods';
				var params = {
					store_id: that.store_id,
					store_category_id: that.store_category_id,
					order: that.order,
					page: that.page,
					pageNum: 10
				}
				console.log('参数', params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					that.goodlist = that.goodlist.concat(res.data.data);
					if(that.page>1){
						if(res.data.data.length==0){
							uni.showToast({
								title:"没有更多了~",
								icon:'none'
							})
							that.moreshow=true
						}
					}
					console.log(that.goodlist)
				}).catch((err) => {
					console.log(err)

				})
			},
			// 进入商品详情页
			goodtail(e) {
				let id = e.currentTarget.dataset.id;
				console.log(this.shopdetail)
				let obj = {
					free_postage: this.shopdetail.free_postage,
					postage: this.shopdetail.postage
				}
				console.log(obj)
				obj = JSON.stringify(obj)
				// type 1 面访商品 2积分商城商品
				uni.navigateTo({
					url: '/pages/nearshop/goodtail?id=' + id + '&type=' + 3 + '&obj=' + obj
				})
			}
		},
		onShow() {
			this.store_category_id = uni.getStorageSync("selectId") != '' ? uni.getStorageSync("selectId") : ''
			this.goodlist = [];
			this.page = 1;
			// 获取店铺列表
			this.getgoodlist();
		},
		onReachBottom() {
			let newpage=this.page;
			newpage++;
			this.page=newpage;
			if(this.moreshow==false){
				this.getgoodlist()
			}
		}

	}
</script>

<style>
	@import url('../../base/nearshop');
	@import url('../../base/homepage');

	.mobilename {
		margin-right: 10rpx;
	}
	.imgbox{
		display:flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.imgboxitem{
		width:210rpx;
		height:210rpx;
		font-size: 0;
		margin-right:20rpx;
		margin-bottom: 20rpx;
	}
	/* .homeshopitem{
		width:335rpx;
		
	} */
	.homeshoplist{
		padding: 0 0rpx 0 32rpx;
		box-sizing: border-box;
	}
	.goodboxitem{
		width:345rpx;
	}
	.homeshopitem:nth-child(2n){
		margin-right:0;
	}
</style>