<!-- 默认复制 -->

<template>
	<view class="content">
		<u-overlay :show="show" @click="show = false">
				<view class="warp">
					<view class="warp-top">
						<image src="http://www.nuoyunr.com/lananRsc/detection/gold.png" mode=""></image>
					</view>
					<view class="bcai-title">店铺福利</view>
					<view class="w-box" >
						<view class="war-box" v-for="(item,index) in couponlist" :key="index">
							<view class="war-left">
								<text>￥{{item.discount / 100}}</text>
							</view>
							<view class="war-right">
								<text>{{item.title}}</text>
							</view>
						</view>
					</view>
					<view class="wrap-bott">
						<image src="http://www.nuoyunr.com/lananRsc/detection/red.png" mode=""></image>
					</view>
					<view class="rect" @tap.stop="drawDownCoupon()">
						<text>立即领取</text>
					</view>
				</view>
		</u-overlay>
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">{{obj.partnerName}}</view>
			<view class=""></view>
		</view>
		<view class="og">
			<view class="o-top">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item v-for="(item,index) in bannerlist " :key="index">
					
								<image style="z-index: -11;" :src="imgs + item" mode=""></image>
						
							</swiper-item>
						</swiper>
			</view>
			<view class="o-cont">
				<view class="dis">
					<view class="o-zuo">
						<view class="touxiang" >
							<view class="rei">
								<image :src="imgs + obj.partnerLogo" mode=""></image>
							</view>
							<view class="reizi">{{obj.averageScore}}</view>
							<image src="http://www.nuoyunr.com/lananRsc/shopStar.png" mode=""></image>
						</view>
					</view>
					<view class="o-you">
						<view class="o-title">{{obj.partnerName}}</view>
							<view class="time">{{obj.workTime}}</view>
						<view class="dis">
							<view class="ying" v-if="obj.isWorking == 1">
								<text>营业中</text>
							</view>
							<view class="fing" v-if="obj.isWorking == 0">
								<text>休息中</text>
							</view>
						
							<view class="juli">距离{{(obj.distance/1000).toFixed(2)}}km</view>
						</view>
					</view>
				</view> 
				<view class="san">
					<view class="dis">
							<view class="o-icon">
								<image src="http://www.nuoyunr.com/lananRsc/detection/sst.png" mode=""></image>
							</view>
							<view class="sb">优惠商品</view>
					</view>
					<view class="dis">
							<view class="o-icon">
									<image src="http://www.nuoyunr.com/lananRsc/j1.png" mode=""></image>
							</view>
							<view class="sb">上门取车</view>
					</view>
					<view class="dis">
							<view class="o-icon">
									<image src="http://www.nuoyunr.com/lananRsc/detection/xyy.png" mode=""></image>
							</view>
							<view class="sb">随时预约</view>
					</view>
				</view>
				<view class="o-map">
				<image class="sb-you" src="http://www.nuoyunr.com/lananRsc/detection/bjjjj.png" mode=""></image>
					<view class="shang">
					<!-- 	<view class="">{{obj.province}}{{obj.city}}{{obj.area}}</view> -->
						<view class="">{{obj.address}}</view>
					</view>
					<view class="dis">
						<view class="qz" @click="gettel()">
							<view class="d-img">
								<uni-icons type="phone-filled" color="#ffffff" size="22"></uni-icons>
							</view>
							<view class="ss">电话</view> 
						</view>
						<view class="qz">
							<view class="d-img" @click="fang()">
								<uni-icons type="paperplane-filled" color="#ffffff" size="22"></uni-icons>
							</view>
							<view class="ss">导航</view>
						</view>
					</view>
				</view>
			</view>
		
		</view>
	<!-- 下列表 -->
			<view class="ding-bottom">
				<view class="ding-top">
					<view class="zong-title">{{obj.partnerName}}收费公示</view>
					
				</view>
				<view class="roing">
					<view class="rbox" v-for="(item,index) in shoplist " :key="index" @click="going(item.goodsId)">
						<view class="rb-top">
							<view class="rb-title">
								<view class="rb-biao">
									<image :src=" 'http://www.nuoyunr.com/lananRsc'  + item.goodsImage " mode=""></image>
								</view>
								<text>{{item.categoryName}}</text>
							</view>
							<!-- <view class="rb-lan">
								<text>预约</text>
								<uni-icons type="right" color="#0D2E8D" size="18"></uni-icons>
							</view> -->
						</view>
						<view class="rb-bott">
							<view class="rbbb" style="width: 55%;">
								<view class="">
									<text class="tb1">{{item.skuList[item.skuList.length-1].price / 100}}￥</text>
									<text class="xhui">/次</text>
								</view>
								<view class="xhui">
									{{item.skuList[item.skuList.length-1].skuName}}  
								</view>
							</view>
							<view class="rb-lan">
								<text class="tb1">去预约</text>
								<uni-icons type="right" color="#0D2E8D" size="30"></uni-icons>
							</view>
					
						</view>
				
					</view>
				</view>
			</view>
			<view class="xiab-box" v-if="plist != ''">
				<view class="zxi" >评论</view>
				<view class="pinglun" v-for="(item,index) in plist" :key="index">
					<view class="ptouxiang">
						<image :src="item.userImg" mode=""></image>
					</view>
					<view class="pp-box">
						<view class="p-bse">
							<view class="plming">{{item.realName}} 	<uni-rate size="18" :value="item.commentStar" /> </view>
							<view class="plshij">{{item.commentTime}}</view>
						</view>
						<view class="plnr">
							<view class="">{{item.commentDesc || ''}}</view>
							<view class="plshij" style="margin-top: 5px;">{{item.goodsTitle}}</view>
						</view>
					</view>
				</view>
			</view>
		
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
import { getToken } from '@/utils/auth'
	export default{
		data(){
			return{
			id:'',
			imgs:'',
			show:false,
			bannerlist:[],
			shoplist:[],
			longitude:"105.442024",
			latitude:"28.871325",
			indicatorDots: false,
			autoplay: true,
			interval: 2000,
			duration: 500,
			pageNum: 1,//第几页
			pageSize: 5,//一页多少张
			totalPages: 0,//总数
			obj:{
				partnerName:'检测店铺'
			},
			couponlist:[],
			plist:[],
			total:0
			}
		},
		components:{
		
		},
		onReachBottom() {
			if( this.plist == ''){
				return
			}
			console.log("分页")
			if (this.pageSize > this.totalPages) {
				uni.showToast({
					title: '没有下一页了',
					icon: 'none'
				})
			
			} else {
				this.pageNum++
				console.log(222)
				this.getCommentOrderList()
			}
		},
		onLoad(option) {
			this.id = option.id
			this.canLedCoupon()
			this.getCommentOrderList()
			this.getindex()
		},
		mounted() {
		
			this.imgs = this.$baseUrl
		},
		methods:{
			
			async getCommentOrderList(){
				if (!getToken() ) {
				 return
				}
				uni.showLoading()
				let data = {
					partnerId : this.id,
					pageSize:this.pageSize,
					pageNum:this.pageNum,
					
				}
				let res = await request({
					url:'/orderApi/getCommentOrderList',
						method: 'get',
						params: data
				})
				
				// this.plist = res.rows
				if (this.pageNum != 1){
						uni.hideLoading();
					this.plist = this.plist.concat(res.rows)
				}else{
					uni.hideLoading();
					this.plist = res.rows
					}
				let total =  res.total
				this.totalPages = Math.ceil(total / this.pageSize);
			},
			async canLedCoupon(){
					if (!getToken() ) {
					 return
					}
				let data = {
					partnerId:this.id,
					
				}
				let res = await request({
					url: '/appInspection/goods/canLedCoupon',
					method: 'get',
					params:data
				})
				console.log(res);
				 this.couponlist = res.data.slice(0, 3);
				if(res.data.length > 0 ){
					this.show = true
				}
			},
			async drawDownCoupon(){
				let data = {
					partnerId:this.id
				}
				let res = await request({
					url: '/appInspection/goods/drawDownCoupon' ,
					method: 'post',
					params: data
				})
				uni.showToast({
					title:'领取成功'
				})
				this.show=false
			},
			gettel(){
				uni.makePhoneCall({
					phoneNumber: this.obj.contactNumber //仅为示例
				});
			},
			getback(){
			uni.navigateBack({
					delta:1,
				})	
			},
		fang(){
			console.log("1212")
			uni.openLocation({
				latitude: this.obj.latitude,
				longitude: this.obj.longitude,
				success: function () {
					console.log('success');
				}
			});
			},
			async getindex(){
				
				
				
				// 列表获取
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						let data = {
							partnerId:that.id,
							longitude:res.longitude,
							latitude:res.latitude,
						}
						//初始化
						request({
							url: '/appInspection/partner/shopDetail',
							method: 'get',
							params:data
						}).then(res=>{
							that.obj = res.data
							that.bannerlist = res.data.imageList
						})
				
					
					},
					fail(e) {
					let data = {
						partnerId:that.id,
						longitude:that.longitude,
						latitude:that.latitude,
					}
					//初始化
					request({
						url: '/appInspection/partner/shopDetail',
						method: 'get',
						params:data
					}).then(res=>{
						that.obj = res.data
						that.bannerlist = res.data.imageList
					})
					
					}
					
				});
						
				let rex = await request({
					url:'/appInspection/goods/list?partnerId='+this.id,
					method: 'get',
				})
				this.shoplist = rex.data
			},
			going(id){
				uni.navigateTo({
					url:"/pages/detection/Merchantproducts?id="+id
				})
			}
		
		
			
			
		}
		
	}
</script>

<style scoped lang="scss">
	.warp{
		width: 275px;
		height: 375px;
		background: #FB4746;
		border-radius: 10px;
		margin: 0 auto;
		margin-top: 200px;
		box-sizing: border-box;
		padding: 15px;
		position: relative;
	}
	.warp-top{
		position: absolute;
		width: 100%;
		height: 40px;
		top: 0px;
		left: 0px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.bcai-title{
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: white;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 10px;
		
	}
	.w-box{
		background: #cf2c2f;
		width: 100%;
		height: 300px;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 8px;
		
	}
	.war-left{
		width: 40%;
		border-right: 1px solid #EBC29D;
		font-size: 26px;
		text-align: center;
		font-weight: bold;
		color: #E0262C;
	}
	.war-right{
		width: 60%;
		font-size: 16px;
		font-weight: bold;
		color: #7D592C;
		box-sizing: border-box;
		padding-left: 10px;
	}
	.wrap-bott{
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100%;
		height: 80px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.war-box{
		width: 100%;
		height: 69px;
		background: linear-gradient(90deg, #FFF1E4 0%, #FACEA6 100%);
		border-radius: 6px 6px 6px 6px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 10px;
		margin-bottom: 10px;
	}
	.rect{
		width: 172px;
		height: 36px;
		background: linear-gradient(90deg, #FFF4CB 0%, #FDDC66 100%);
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: bold;
		color: #E11E27;
		position: absolute;
		bottom: 20px;
		   transform: translate(-50%);
		      left: 50%;
		z-index: 999;
	}
	.uni-margin-wrap {
			width: 100%;
		}
		.swiper {
			height: 150px;
			z-index: -1;
		}
		
		.swiper-item {
			display: block;
			height: 150px;
			text-align: center;
		}
		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}
		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}
		.info {
			position: absolute;
			right: 20rpx;
		}
		
	// 
	.xhui{
		font-size: 15px;
		font-weight: 400;
		color: #666666;
	}
	.tb1{
		font-size: 25px;
		font-weight: 600;
		color: #0D2E8D;
	}
	.content{
		width: 100%;
		// height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}
	.rb-title{
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
	}
	.rb-biao{
		width: 20px;
		height: 16px;
		// overflow: hidden;
		margin-right: 5px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.rb-lan{
		font-size: 14px;
		font-weight: 400;
		color: #0D2E8D;
		line-height: 14px;
	}
	.rb-top{
		width: 100%;
		display: flex;
		align-items: center;
	
		justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 10px;
		border-bottom:  1px solid #EEEEEE;
	}
	.rb-bott{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}
	.rbbb{
		border-right: 1px solid #EEEEEE;
		width: 33%;
		text-align: left;
		box-sizing: border-box;
		padding-left: 10px;
	}
	.top-icon{
		margin-bottom: 45px;
	}
	.c-top{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		 padding-top: 55px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}
	.c-title{
		font-size: 18px;
		font-weight: bold
	}
	.og{
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 10px ;
	}
	.o-top{
		width: 100%;
		height: 150px;
		border-radius: 6px;
		margin-bottom: 10px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.o-title{
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		
	}
	.ying{
		width: 62px;
		height: 22px;
		background: #E4FFED;
		border-radius: 2px;
		font-size: 14px;
		font-weight: 400;
		color: #34CA66;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.fing{
		width: 62px;
		height: 22px;
		background: #e3e3e3;
		border-radius: 2px;
		font-size: 14px;
		font-weight: 400;
		color:#626262;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.time{
		font-size: 14px;
		font-weight: 400;
		color: #666666;
		margin: 5px 10px;
	}
	.juli{
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		margin-left: 5px;
	}
	
	.touxiang{
		width: 80px;
		height: 105px;
		// background: #D9D9D9;
		margin-right: 10px;
		margin-top: -50px;
		z-index: 99;
		overflow: hidden;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		
	}
	.rei{
		
		z-index: 99999;
		width: 60px;
		height:60px;
		border-radius: 50%;
		overflow: hidden;
		background-color: whitesmoke;
		image{
			width: 100%;
			height: 100%;
		}
		position: absolute;
		top: 38px;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.reizi{
		font-size: 14px;
		z-index: 99999;
		color: white;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		bottom: -5px;
	}
	.o-cont{
		width: 100%;
		// height: 210px;
		z-index: 99;
		border-radius: 8px;
		box-sizing: border-box;
		background-color:white;
		padding: 10px;
	}
	.dis{
		z-index: 9;
		display: flex;
		align-items: center;
	}
	.san{
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 10px auto;
	}
	.o-map{
		overflow: hidden;
		position: relative;
		background: linear-gradient(90deg, #F7F8FB 0%, rgba(255,255,255,0) 100%);
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 15px;
	}
	.d-img{
		width: 30px;
		height: 30px;
		background: #0D2E8D;
		border-radius: 50%;
		text-align: center;
		line-height: 30px;
	}
	.sb-you{
		z-index: 0;
		position: absolute;
		right: 0px;
		top: 0px;
	}
	.shang{
		z-index: 9;
	}
	.ss{
		font-size: 14px;
		font-weight: 400;
		color: #333333;
	}
	.qz{
		margin-right: 10px;
	}
	.sb{
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		margin-left: 5px;
	}
	.o-icon{
		width: 20px;
		height: 20px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.ding-bottom{
		width: 100%;
		background: linear-gradient(180deg, #FAC477 0%,rgba(250,196,119,0) 30%, rgba(250,196,119,0) 100%);
		border-radius: 20px 20px 0px 0px;
		box-sizing: border-box;
		padding: 10px;
		
	}
	.ding-top{
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.zong-title{
		font-size: 16px;
		font-weight: 400;
		color: #69430C;
		margin: 0 auto;
	}
	.bai-title{
		font-size: 14px;
		font-weight: 400;
		color: rgba(255,255,255,0.7);
		}
		.roing{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
		}
		.rbox{
			width: 100%;
			height: 120px;
			box-sizing: border-box;
			padding: 10px;
			position: relative;
			overflow: hidden;
			border-radius: 8px;
			background: white;
			margin-bottom: 10px;
		}
		.guanjian{
			width: 90%;
			margin: 10px auto;
			font-size: 16px;
			font-weight: 400;
			color: #333333;
		}
		.anniu{
			width: 66px;
			height: 22px;
			background: #0D2E8D;
			border-radius: 11px ;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			font-weight: 400;
			color: #FFFFFF;
			
		}
		.r-bottom{
			width: 90%;
			margin: 10px auto;
			display: flex;
			justify-content: space-between;
			
		}
		.ju{
			font-size: 16px;
			font-weight: bold;
			color: #FF9600;
		}
		.r-img{
			width: 100%;
			height: 172px;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.xiab-box{
			width: 100%;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 15px;
			border-radius: 6px;
			margin-bottom: 10px;
			background-color: white
		}
		.pinglun{
			box-sizing: border-box;
			border-bottom:  1px solid #EEEEEE;
			padding: 10px 0px;
			width: 100%;
			display: flex;
			
		}
		.huang{
			font-size: 16px;
			color: #FF9600;
			margin-left: 10px;
		}
		.plming{
			font-size: 16px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		.plshij{
			font-size: 14px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
		}
		.plnr{
			font-size: 15px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			margin-top: 5px;
		}
		.ptouxiang{
			width: 35px;
			height: 35px;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 10px;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.pp-box{
			width: 80%;
		}
		.p-bse{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.p-nr{
			
		}
		
</style>