<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-t-input">
				<uni-icons type="search" size="22" color="#BCBCBC"></uni-icons>
				<input type="text" placeholder="输入关键词搜索" v-model="searchValue">
			</view>
			<view class="" @click="sousuo()">搜索</view>
		</view>
		<view class="top-list">
			<view class="list-box" @click="getqbfl()">
				<view class="">全部分类<uni-icons type="bottom" size="14"></uni-icons></view>
			</view>
			<view :class="{'lan':threeoptions == 2}" class="list-box" @click="getfwjl()">
				<view class="">距离优先<uni-icons type="bottom" size="14"></uni-icons></view>
			</view>
			<view class="list-box" @click="getzhsx()">
				<view class="">综合筛选<uni-icons type="bottom" size="14"></uni-icons></view>
			</view>
		</view>
		<!-- 遮罩 -->

		<u-overlay class="nbian" :show="show" @click="show = false">
			<view class="c-top">
				<view class="" @click="getback()">
					<uni-icons type="left" size="18"></uni-icons>
				</view>
				<view class="c-t-input">
					<uni-icons type="search" size="22" color="#BCBCBC"></uni-icons>
					<input type="text" placeholder="输入关键词搜索">
				</view>
				<view class=""></view>
			</view>
			<view class="top-list">
				<view :class="{'lan':threeoptions == 1}" class="list-box" @tap.stop="getqbfl()">
					<view class="">全部分类<uni-icons type="bottom" size="14"></uni-icons></view>
				</view>
				<view class="list-box">
					<view class="">距离优先<uni-icons type="bottom" size="14"></uni-icons></view>
				</view>
				<view :class="{'lan':threeoptions == 3}" class="list-box" @tap.stop="getzhsx()">
					<view class="">综合筛选<uni-icons type="bottom" size="14"></uni-icons></view>
				</view>
			</view>
			<!-- 全部分类 -->
			<scroll-view class="x-xiang" scroll-y :scroll-with-animation="true" :style="scrollStyle"
				v-if="threeoptions == 1">
				<view :class="{'ax':pding == index}" class="ann" v-for="(item,index) in Alloptions" :key="index"
					@tap.stop="qhzz(index ,item.id)">
					<view class="">{{item.categoryName}}</view>
				</view>
			</scroll-view>
			<!-- 综合筛选 -->
			<view class="x-ing" v-if="threeoptions == 3">
				<view class="">检测分类</view>

				<!-- 要处理的地方 -->
				<scroll-view class="x-xiang" scroll-y :scroll-with-animation="true" :style="scrollStyle">
					<view :class="{'ax':pding == index}" class="ann" v-for="(item,index) in Alloptions" :key="index"
						@tap.stop="qhzz(index ,item.id)">
						<view class="">{{item.categoryName}}</view>
					</view>
				</scroll-view>

				<view class="">距离范围（ <text class="lan">{{distance?distance:100}} km</text>）</view>

				<u-slider v-model="distance" inactiveColor="#0D2E8D" activeColor="#0D2E8D" min="1" max="80"></u-slider>

				<view class="">评价筛选</view>
				<view class="x-xiang">
					<view :class="{'ax':orderType == 'hp'}" class="ann" @tap.stop="gethp">
						<view class="">好评优先</view>
					</view>
					<view :class="{'ax':orderType == 'xl'}" class="ann" @tap.stop="getxl">
						<view class="">销量优先</view>
					</view>
				</view>
			</view>
			<view class="xsanniu" @tap.stop="show = false">
				<view class="fanhu">
					<view class="">返回</view>
				</view>
				<view class="wc" @tap.stop="getwc">
					<view class="">完成</view>
				</view>
			</view>
		</u-overlay>
		<!-- 遮罩结束 -->
		<view class="dil">
			<view class="bjimg" v-if="listarr == ''">
				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
			</view>
			<view class="d-box" v-for="(item,index) in listarr" :key="index">
				<view class="box-top">
					<view style="display: flex;">
						<view class="touxiang">
							<image :src="baseUrl + item.partnerLogo " mode=""></image>
						</view>
						<view class="top-tile">
							<view class="dix">
								<view class="da">{{item.partnerName}}</view>
								<view class="huang">{{item.averageScore}} <uni-icons type="star-filled" color="#FF9600"
										size="14"></uni-icons></view>
							</view>
							<view class="dix">
								<view class="sanyuan">
									<view class="xhui">距离:</view>
									<view v-if="item.distance >=1000" class="dda">{{(item.distance/1000).toFixed(2)}}
										<text class="xhei">km</text>
									</view>
									<view v-else class="dda">{{item.distance}} <text class="xhei">m</text> </view>
								</view>
								<!-- <view class="sanyuan">
								<view class="xhui">月销量:</view>
								<view class="dda">{{item.salesNum?item.salesNum:0}}</view>
							</view> -->
							</view>
						</view>
					</view>
					<view class="top-anniu" @click="gomerchant(item.partnerId)">
						<view class="">预约进店</view>
					</view>
				</view>
				<scroll-view scroll-x="true" class="box-bottom">
					<view class="santu" v-for="(items,index) in item.goodsList" :key="index">
						<view class="simg">
							<image :src=" baseUrl + items.goodsImage" mode=""></image>
						</view>
						<view class="ming">{{items.goodsTitle}}</view>
						<view class="jus">￥{{items.price / 100}}</view>
					</view>
				</scroll-view>

			</view>
		</view>

	</view>

</template>

<script>
	import request from '../../utils/request'
	import config from '@/config'
	export default {
		data() {
			return {
				searchValue: "",
				categoryId: "",
				distance: null, //距离
				threeoptions: 1, //三选
				Alloptions: [], //全部分类
				show: false,
				listarr: [],
				baseUrl: '',
				pding: 0, //综合筛选
				pjing: false, //评价筛选
				hzc: false,
				longitude: "105.442024",
				latitude: "28.871325",
				orderType: "",
				pageNum: 1, //第几页
				pageSize: 20, //一页多少张
				totalPages: 0, //总数
			}
		},
		onReachBottom() {
			console.log("分页")
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			} else {
				this.pageNum++
				console.log(222)
				this.getlistindex()
			}
		},
		onShow() {
			this.baseUrl = this.$baseUrl
			this.getlist()
		},
		methods: {
			async getlist() {
				// 列表获取
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						let data = {
							longitude: res.longitude,
							latitude: res.latitude,
							orderType: that.orderType,
							categoryId: that.categoryId,
							searchValue: that.searchValue,
							distance: that.distance,
							pageSize: that.pageSize,
							pageNum: that.pageNum
						}
						request({

							url: '/appInspection/partner/list',
							method: 'get',
							params: data
						}).then(res => {
							if (that.pageNum != 1) {
								that.listarr = that.listarr.concat(res.rows)
							} else {
								that.listarr = res.rows
							}
							let total = res.total
							that.totalPages = Math.ceil(total / that.pageSize);
						})
					},
					fail() {
						let data = {
							longitude: that.longitude,
							latitude: that.latitude,
							orderType: that.orderType,
							categoryId: that.categoryId,
							searchValue: that.searchValue,
							distance: that.distance,
							pageSize: that.pageSize,
							pageNum: that.pageNum
						}
						request({
							url: '/appInspection/partner/list',
							method: 'get',
							params: data
						}).then(res => {
							if (that.pageNum != 1) {
								that.listarr = that.listarr.concat(res.rows)
							} else {
								that.listarr = res.rows
							}
							let total = res.total
							that.totalPages = Math.ceil(total / that.pageSize);
						})
					}
				});


				let rex = await request({
					url: '/appInspection/goods/categoryList',
					method: 'get',
				})
				console.log(rex);
				this.Alloptions = rex.data
				this.Alloptions.unshift({
					categoryName: '全部'
				})

			},
			gomerchant(id) {
				uni.navigateTo({
					url: '/pages/detection/MerchantDetails?id=' + id
				})
			},
			sousuo() {
				that.listarr = []
				this.getlist()
			},
			getqbfl() {
				//全部分类
				this.show = true
				this.threeoptions = 1
			},
			getfwjl() {
				//距离
				this.threeoptions = 2
				if (this.orderType == "jl") {
					this.orderType = ""
				} else {
					this.orderType = "jl"
				}

				this.getlist()
			},
			getzhsx() {
				//综合筛选
				this.show = true
				this.threeoptions = 3
			},
			qhzz(index, id) {
				this.pding = index
				this.categoryId = id
			},
			getback() {
				uni.navigateBack()
			},

			gethp() {
				this.orderType = "hp"
			},
			getxl() {
				this.orderType = "xl"
			},
			getwc() {
				this.show = false
				this.getlist()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}

	.dil {
		box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 0px 12px;
	}

	.lan {
		color: #0D2E8D;
	}

	.dix {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.d-box {
		background: #FFFFFF;
		border-radius: 8px;
		padding: 10px;
		margin-top: 10px;
	}

	.box-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.touxiang {
		width: 70px;
		height: 70px;
		border-radius: 8px;
		box-sizing: border-box;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bjimg {
		width: 255px;
		height: 236px;
		margin: 0px auto;
		margin-top: 100px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top-tile {
		margin-left: 15px;
	}

	.da {
		font-size: 18px;
		font-weight: bold;
		color: #333333;

	}

	.huang {
		margin-left: 20px;
		color: #FF9600;
		font-size: 14px;
	}

	.top-anniu {
		width: 70px;
		height: 24px;
		background: #0D2E8D;
		border-radius: 50px;
		display: flex;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.box-cont {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 15px;
	}

	.sanyuan {
		margin-top: 22px;
		text-align: center;
		display: flex;
		align-items: center;
	}

	.dda {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
		margin-right: 10px;
	}

	.xhui {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		margin-right: 5px;
	}

	.xbox {
		width: 100%;
		display: flex;
	}

	.xhei {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
		margin-left: 5px;
	}

	.box-bottom {
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
		// display: flex;
		// justify-content: space-between;
		// align-items: center;

	}

	.santu {
		width: 32%;
		display: inline-block;
		// width: 100px;
		margin-top: 15px;
		margin-right: 10px;
	}

	.simg {
		width: 100%;
		height: 80px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ming {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 15px;
		font-weight: 400;
		color: #333333;
		margin: 0px auto;
	}

	.jus {
		font-size: 15px;
		font-weight: bold;
		color: #FF571A;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 22%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}

	.c-t-input {
		width: 80%;
		background-color: #F0F0F0;
		color: #BCBCBC;
		height: 40px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		padding: 0px 10px;
		box-sizing: border-box;
	}

	.c-title {
		font-size: 18px;
		font-weight: bold
	}

	.top-list {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-box {
		height: 100%;
		width: 33%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	/* 遮罩 */
	.xuanx {
		position: fixed;
		top: 260rpx;
		width: 100%;
		height: calc(100vh);
		background: rgba(0, 0, 0, 0.2)
	}

	.nbian {
		padding-top: 45px;
	}

	.x-xiang {
		width: 100%;
		height: 250px;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		overflow-y: hidden;
		/* 隐藏横向滚动条 */
	}

	.x-ing {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;

	}

	.ann {
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		background: #F2F6FF;
		border-radius: 24rpx;
		padding: 10rpx 30rpx;
		color: #666666;
		font-size: 28rpx;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
	}

	.ax {
		font-size: 28rpx;
		background: #0D2E8D;
		color: white !important;
	}

	.xsanniu {
		border-top: 1px solid #EEEEEE;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wc {
		width: 436rpx;
		height: 80rpx;
		background: #0D2E8D;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		color: white;
		font-size: 32rpx;
		justify-content: center;
	}

	.fanhu {
		width: 224rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		border: 2rpx solid #0D2E8D;
		display: flex;
		align-items: center;
		color: #0D2E8D;
		justify-content: center;
	}
</style>