<template>
	<!-- 配送员列表 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'top': menuButtonInfo.top +'px'}">
					选择配送员
				</view>
			</view>
		</view>
		<map id="map" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline"
			style="width: 95%;height: 150px;margin: 0 auto;border-radius: 10px;overflow: hidden;position: absolute;top: 100px;left: 1%;border: 5px solid #fff;"></map>
		<view class="title-sort">
			<view class="sort-member" style="position: relative;">
				<view @tap="checkArea">
					筛选条件 <text style="font-size: 20rpx;">▼</text>
				</view>
				<view class="sort-value" v-if="isArea">
					<view class="sort-value1" v-for="(item,index) in shopArea" :key="index"
						@tap="searchShop('area',item.id)">{{item.title}}</view>
				</view>
			</view>
			<view @tap="searchShop('baozhang')" class="sort-member" style="border-radius: 60rpx" :style="{'background':baozhang==true?'rgba(166, 255, 234, 0.16)':'#fff','border':baozhang==true?'1px solid rgba(166, 255, 234, 1)':'0'}">
				交易保障
			</view>
			<view @tap="searchShop('xiangtong')" class="sort-member" style="border-radius: 60rpx" :style="{'background':xiangtong==true?'rgba(138, 255, 67, 0.16)':'#fff','border':xiangtong==true?'1px solid rgba(138, 255, 67, 1)':'0'}">
				相同地址
			</view>
			<view class="sort-member">
				<input type="text" placeholder="搜索" style="height: 30px;line-height: 30px;">
			</view>
		</view>
		<view class="man-box">
			<view class="man-title">
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt=""
					style="width: 60px;height: 60px;" />
				<view class="man-title1">
					<view class="man-title2">
						<view class="man-name">
							潘潘安
						</view>
						<view style="flex:1;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d27fa14c6bb7426482ed7821919d3aa7.png"
								alt="" style="width: 70px;height: 16px;margin-top: 9px;" />
						</view>
						<view class="man-type">
							接单类型:跑腿单
						</view>
					</view>
					<view class="man-rate">
						<view class="shop-rate">
							<view class="shop-rate-num">5</view>
							<uni-rate :disabled="true" size="16" disabledColor="rgba(255, 184, 84, 1)" value="5" />
						</view>
						<view class="man-num">
							平均配送时长 <text style="font-size: 15px;font-weight: 700;color: #000;">32</text>分钟
						</view>
					</view>
				</view>
			</view>
			<view class="man-dingdan">
				<view class="man-dingdan1">
					当前待取 <text style="font-size:18px;font-weight:700;color: #000;">5</text>
				</view>
				<view class="man-dingdan1">
					当前待送 <text style="font-size:18px;font-weight:700;color: #000;">2</text>
				</view>
				<view class="man-dingdan1">
					当接单数 <text style="font-size:18px;font-weight:700;color: #000;">1</text>
				</view>
			</view>
			<view class="man-mank">
				备注:<text style="color: #000;">可接校外美食街；可代取快递，一件1元，3件2.5元，多取多优惠</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isArea: false,
				latitude: 39.909, // 默认纬度，可以设为用户当前位置或配送员位置
				longitude: 116.39742, // 默认经度
				markers: [], // 标记点，可以包括配送员位置和用户位置
				polyline: [], // 路线，如果需要显示配送员路线
				menuButtonInfo: {},
				baozhang:false,
				xiangtong:false,
				shopArea: [{
					id: 0,
					title: '配送时长'
				}, {
					id: 1,
					title: '评分优先'
				},{
					id: 2,
					title: '配送费低'
				}],
			}
		},
		onLoad(option) {

		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			searchShop(type, value) {
				if (type == 'area') {
					this.searchForm.shopArea = value
				} else if (type == 'baozhang') {
					this.baozhang = !this.baozhang
				} else if (type == 'xiangtong') {
					this.xiangtong = !this.xiangtong
				}
				this.getShopList();
			},
			checkArea() {
				this.isArea = !this.isArea
			},
			back() {
				uni.navigateBack()
			}
		}

	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 30%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 55px;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}

	.title-sort {
		height: 60rpx;
		display: flex;
		margin-top: 50rpx;
	}

	.sort-member {
		line-height: 60rpx;
		text-align: center;
		background: #fff;
		width: 20%;
		margin-left: 4%;
		border-radius: 10rpx;
	}

	.sort-value {
		width: 160rpx;
		height: auto;
		max-height: 300rpx;
		overflow: scroll;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 80rpx;
		right: 0;
		border-radius: 20rpx;
		color: #fff;
		font-size: 22rpx;
	}

	.sort-value1 {
		border-bottom: 1rpx solid #eee;
	}

	.shop-rate {
		background: rgba(249, 212, 157, 0.34);
		height: 40rpx;
		display: flex;
		border-radius: 20rpx;
		margin: 0 10px;
	}

	.shop-rate-num {
		width: 50rpx;
		height: 100%;
		text-align: center;
		background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
		color: #fff;
		line-height: 40rpx;
		font-size: 22rpx;
		border-bottom-left-radius: 20rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.man-box {
		height: 190px;
		border-radius: 10px;
		width: 95%;
		margin: 10px auto;
		background: #fff;
		    padding: 10px;
	}

	.man-title1 {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.man-title2 {
		display: flex;
		height: 35px;
		line-height: 35px;
		    padding-right: 10px;
	}

	.man-name {
		font-size: 15px;
		font-weight: 700;
		margin: 0 10px;
	}

	.man-type {
		height: 16px;
		line-height: 16px;
		background: #a6ffea;
		padding: 0 5px;
		font-size: 10px;
		color: #777;
		margin-top: 9px;
		border-radius: 5px;
	}

	.man-rate {
		display: flex;
		    padding-right: 10px;
	}

	.man-num {
		color: #777;
		    flex: 1;
		    text-align: right;
	}

	.man-title {
		display: flex;
	}
	.man-dingdan{
		width: 100%;
		height: 50px;
		display: flex;
		line-height: 50px;
		background: rgba(166, 255, 234, 0.16);
		border-radius: 10px;
		margin: 10px auto;
		border: 1px solid rgba(166, 255, 234, 1);
	}
	.man-dingdan1{
		flex: 1;
		text-align: center;
		color:#777;
	}
	.man-mank{
		    line-height: 20px;
		    color: #777;
		    font-weight: 700;
	}
</style>