<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: 300rpx;margin: 0 auto;border-radius: 20rpx;overflow: hidden;position: absolute;top: 200rpx;left: 1%;border: 4rpx 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" style="display: flex;padding-left: 10rpx;">
				<uni-icons type="search" size="12"></uni-icons>
				<input type="text" placeholder="搜索" style="height: 60rpx;line-height: 60rpx;" v-model="keyword" @confirm="getShopList">
			</view>
		</view>
		<view class="man-box" v-for="(worker, index) in workerList" :key="index" @tap="selectWorker(worker)">
			<view class="man-title">
				<img :src="worker.icon || 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png'" alt=""
					style="width: 120rpx;height: 120rpx;border-radius:60rpx;" />
				<view class="man-title1">
					<view class="man-title2">
						<view class="man-name">
							{{worker.workerName || '未知'}}
						</view>
						<view style="flex:1;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d27fa14c6bb7426482ed7821919d3aa7.png"
								alt="" style="width: 140rpx;height: 32rpx;margin-top: 18rpx;" v-if="worker.rebateAmount > 0" />
						</view>
						<view class="shop-menu-purchase man-name">
							¥{{worker.orderBkge}}
						</view>
					</view>
					<view class="man-rate">
						<view class="shop-rate">
							<view class="shop-rate-num">{{worker.score || 5}}</view>
							<view style="padding-top: 2px;">
								<uni-rate :disabled="true" size="16" disabledColor="rgba(255, 184, 84, 1)" :value="worker.score || 5" />
							</view>
						</view>
						<view class="man-num">
							平均配送时长 <text style="font-size: 30rpx;font-weight: 700;color: #000;">{{worker.avgTime || 30}}</text>分钟
						</view>
					</view>
				</view>
			</view>
			<view class="man-dingdan">
				<view class="man-dingdan1">
					当前待取 <text style="font-size:36rpx;font-weight:700;color: #000;">{{worker.orderGetCount || 0}}</text>
				</view>
				<view class="man-dingdan1">
					当前待送 <text style="font-size:36rpx;font-weight:700;color: #000;">{{worker.orderPutCount || 0}}</text>
				</view>
				<view class="man-dingdan1">
					待接单数 <text style="font-size:36rpx;font-weight:700;color: #000;">{{worker.orderWaitCount || 0}}</text>
				</view>
			</view>
			<view class="man-mank">
				备注:<text style="color: #000;">{{worker.remark || '无'}}</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: '配送费低'
				}],
				shopAreaId: '',
				putAreaId: '',
				workerList: [],
				keyword: ''
			}
		},
		onLoad(option) {
			this.shopAreaId = option.shopAreaId || '';
			this.putAreaId = option.putAreaId || '';
			this.getShopList();
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			getShopList() {
				// Fake request to our new endpoint
				let payload = {
					shopAreaId: this.shopAreaId,
					putAreaId: this.putAreaId,
					baozhang: this.baozhang,
					xiangtong: this.xiangtong,
					keyword: this.keyword
				};
				this.tui.request("/worker/getMatchingWorkerList", "POST", payload, false, false).then(res => {
					if(res.code == 200) {
						this.workerList = res.result || [];
					}
				});
			},
			selectWorker(worker) {
				uni.$emit('updateDeliveryWorker', worker);
				uni.navigateBack();
			},
			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: 110rpx;
		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 20rpx;
		padding: 0 5px 0 0;
	}

	.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: 380rpx;
		border-radius: 20rpx;
		width: 95%;
		margin: 20rpx auto;
		background: #fff;
		    padding: 20rpx;
	}

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

	.man-title2 {
		display: flex;
		height: 70rpx;
		line-height: 70rpx;
		    padding-right: 20rpx;
	}

	.man-name {
		font-size: 30rpx;
		font-weight: 700;
		margin: 0 20rpx;
	}

	.man-type {
		height: 42rpx;
		line-height: 40rpx;
		background: #a6ffea;
		padding: 0 10rpx;
		font-size: 20rpx;
		color: #777;
		margin-top: 10rpx;
		border-radius: 10rpx;
	}

	.man-rate {
		display: flex;
		    padding-right: 20rpx;
	}

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

	.man-title {
		display: flex;
	}
	.man-dingdan{
		width: 100%;
		height: 100rpx;
		display: flex;
		line-height: 100rpx;
		background: rgba(166, 255, 234, 0.16);
		border-radius: 20rpx;
		margin: 20rpx auto;
		border: 1px solid rgba(166, 255, 234, 1);
	}
	.man-dingdan1{
		flex: 1;
		text-align: center;
		color:#777;
	}
	.man-mank{
		    line-height: 40rpx;
		    color: #777;
		    font-weight: 700;
	}
	.shop-menu-purchase{
		display: flex;
		background: rgba(255, 57, 57, 0.1);
		height: 36rpx;
		line-height: 36rpx;
		padding: 0 0 0 4rpx;
		border-radius: 8rpx;
		font-weight: 700;
		margin-top: 10rpx;
		color: #777;
	}
</style>