<!-- 技师列表 -->
<!-- 首页，支持店铺装修 -->
<template>
	<s-layout class="ss-w-100 ss-h-100 box-sizing" style="position: relative" title="技师" navbar="custom"
		tabbar="/pages/XDHome/technicianList/technicianList">
		<view class="body" :style="'padding-top:' + bottomHeight">
			<!-- 头部 -->
			<view style="margin-top: 10rpx; padding: 10rpx" id="head-box">
				<!-- 导航标题 -->
				<view class="ss-flex ss-flex-nowrap" style="box-sizing: border-box;">
					<view style="color: #fff;margin-left: 5rpx;font-size: 26rpx;">技师列表</view>
					<view class="ss-flex-1"></view>
					<text class="textIcon icon-kefu icon-navigation"></text>
					<text class="textIcon icon-xiaoxitongzhi"
						style="margin-left: 25rpx;margin-right: 20rpx;font-size: 44rpx;color: #fff;font-weight: 650;"></text>
				</view>
				<!-- 搜索框 -->
				<view style="width: 100%; height: 60rpx; margin-top: 20rpx">
					<uni-search-bar radius="30" v-model="searchInfo" placeholder="请输入搜索关键字" cancelButton="none"
						clearButton="none" @confirm="onSearch"></uni-search-bar>
				</view>
				<!-- 多种搜索 -->
				<view style="width: 100%; height: 60rpx; margin-top: 20rpx" class="ss-flex">
					<text class="textIcon icon-position icon-navigation" style="margin-left: 2%;"></text>
					<view style="width: 40%; height: 40rpx">
						<uni-data-select class="icon-image" v-model="address" :localdata="range" :clear="false"
							@change="changeAddress"></uni-data-select>
					</view>
					<view style="width: 20rpx"></view>
					<view style="width: 30%; height: 40rpx" class="distance">
						<uni-data-select class="icon-image" v-model="distance" :localdata="distanceData" :clear="false"
							@change="changeDistance"></uni-data-select>
					</view>
					<view class="ss-flex-1"></view>
					<view class="ss-flex-2 ss-col-center" style="margin-right:20rpx;" @click="searchAll">
						<view style="height: 40rpx;line-height: 40rpx;font-size: 26rpx;color: #fff;margin-right:5rpx;">筛选</view>
						<text class="textIcon icon-shaixuan" style="font-size:30rpx;color:#fff;font-weight:700;"></text>
					</view>
				</view>
			</view>
			<!-- 中部 -->
			<view class="list-wrap">
				<scroll-view scroll-y="true" class="list">
					<view class="ss-flex-2 box-sizing list-box" v-for="item in 10" :key="item">
						<!-- 左右布局 -->
						<view style="width: 195rpx">
							<view style="width: 194rpx; height: 160rpx">
								<image referrerpolicy="no-referrer"
									src="/static/lanhu_shouye/psq752p4oxrur1kwz38o9hz2uugu327v8c905774083-1ff9-40d7-8687-01c969b1461d.png"
									class="wh"></image>
							</view>
							<!-- 休息中 可服务  服务中  -->
							<view class="bt-box"> 可服务 </view>
						</view>
						<!-- 右边布局 -->
						<view class="ss-flex-1" style="margin-left: 20rpx">
							<view class="ss-flex">
								<view style="font-size: 30rpx; color: #1a2433; font-weight: 650">王琳haha</view>
								<view class="ss-flex" style="margin-left: 20rpx; margin-top: 5rpx">
									<view style="width: 25rpx; height: 25rpx">
										<image class="icon-image" referrerpolicy="no-referrer"
											src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png" />
									</view>
									<view style="font-size: 24rpx; margin-left: 5rpx; color: #009fe8; margin-top: 5rpx">
										4.8</view>
								</view>
								<view class="ss-flex-1"></view>
								<view class="job-box"> NO.00158 </view>
							</view>
							<view class="ss-flex-2">
								<view class="flag-box" style="background-color: #e57f3a"> 新人 </view>
								<view class="flag-box" style="background-color: #e50012"> 明星 </view>
								<view class="flag-box" style="background-color: #48b790"> 手法哈哈哈哈 </view>
							</view>
							<uni-tooltip style="margin-top: 5rpx"
								content="哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈" placement="bottom">
								<view class="text-info-box">
									哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈，哈哈哈哈哈哈哈，与i微服务非u韩福瑞股份台服务器给覅u有
								</view>
							</uni-tooltip>
							<view class="ss-flex-2 ss-col-center">
								<view class="ss-flex-2 ss-col-center">
									<text class="textIcon icon-dianpufill" style="font-size:26rpx;color:#009FE8;"></text>
									<view style="font-size: 20rpx; margin-left: 5rpx; color: #444">秋水伊人</view>
								</view>
							</view>
							
							<view class="ss-flex-2 ss-col-center" style="margin-top: 5rpx;">
								<view class="ss-flex-2 ss-col-center" style="margin-right: 15rpx;">
									<text class="textIcon icon-wodedingdan" style="font-size:28rpx;color:#009FE8;"></text>
									<view style="font-size: 24rpx; color: #444">15</view>
								</view>
								<view class="ss-flex-2 ss-col-center">
									<text class="textIcon icon-position" style="font-size:28rpx;color:#009FE8;"></text>
									<view style="font-size: 24rpx; color: #009FE8">15.53km</view>
								</view>
								<view style="font-size: 18rpx; margin-left: 15rpx; color: #666; margin-top: 10rpx">
									莱山区
								</view>
								<view class="ss-flex-1"></view>
								<view class="bt-box-two" @click="onTechnician">点TA</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view v-if="isShow" class="popup-box" :style="'top:' + topSize" @click="close(2)">
			<view style="position: relative; width: 100%; background-color: #fff" @click.stop="prevent">
				<view style="display: flex; flex-direction: row; border-bottom: 4rpx solid #dcdcdc">
					<!-- 左右布局 -->
					<view style="width: 160rpx; background-color: #dcdcdc; color: #6b6b6b; font-size: 26rpx">
						<view style="
                width: 100%;
                height: 90rpx;
                line-height: 90rpx;
                text-align: center;
                font-size: 34rpx;
                color: #333;
                font-weight: 650;
                background-color: #fff;
              ">技师筛选</view>
						<view style="width: 100%; height: 90rpx; line-height: 90rpx; text-align: center">时段</view>
						<view style="width: 100%; height: 90rpx; line-height: 90rpx; text-align: center">价格</view>
						<view style="width: 100%; height: 90rpx; line-height: 90rpx; text-align: center">服务状态</view>
						<view style="width: 100%; height: 90rpx; line-height: 90rpx; text-align: center">服务类别</view>
					</view>
					<view class="ss-flex-1 box-sizing" style="padding-top: 10rpx">
						<view class="search-title"> 技师登记 </view>
						<view class="content-info-box">
							<view class="content-text" @click.stop="newInfo(1)">新人组</view>
							<view class="content-text">明星组</view>
							<view class="content-text">专业组</view>
							<view class="content-text">5星好评</view>
						</view>
						<view class="search-title"> 技师性别 </view>
						<view class="content-info-box">
							<view class="content-text">女技师</view>
							<view class="content-text">男技师</view>
							<view class="content-text">性别不限</view>
						</view>
						<view class="search-title"> 服务类别 </view>
						<view class="content-info-box">
							<view class="content-text">上门服务</view>
							<view class="content-text">店面体验</view>
						</view>
						<view class="search-title"> 服务状态 </view>
						<view class="content-info-box">
							<view class="content-text">空闲中</view>
							<view class="content-text">休息中</view>
							<view class="content-text">服务中</view>
						</view>
						<view class="search-title"> 技师年龄（岁） </view>
						<view style="width: 95%; margin-left: 2.5%">
							<slider :value="age" @change="sliderChange" min="18" max="55" show-value />
						</view>
						<view class="search-title"> 技师距离（km） </view>
						<view style="width: 95%; margin-left: 2.5%">
							<slider :value="distanceNum" @change="changeDistanceTwo" min="3" max="20" show-value />
						</view>
					</view>
				</view>
				<view style="display: flex; flex-wrap: nowrap; width: 100%; height: 120rpx">
					<view class="button-info-box" style="color: #41474b; background-color: #dcdcdc">重置</view>
					<view class="button-info-box" style="color: #fff; background-color: #49b58e">完成</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	uni.hideTabBar();

	/**搜索栏*/
	const searchInfo = ref('');
	//搜索事件
	const onSearch = async (e) => {
		console.log(e, '触发搜索事件');
	};
	const address = ref(0);
	const range = ref([{
			value: 0,
			text: '华庭路橡树湾小区10-909'
		},
		{
			value: 1,
			text: '足球'
		},
		{
			value: 2,
			text: '游泳'
		},
	]);
	const changeAddress = async (e) => {
		console.log(e, '获取地址信息');
	};
	const distance = ref(0);
	const distanceData = ref([{
			value: 0,
			text: '距离'
		},
		{
			value: 1,
			text: '0~3km'
		},
		{
			value: 2,
			text: '3~5km'
		},
		{
			value: 2,
			text: '5~10km'
		},
	]);
	const changeDistance = async (e) => {
		console.log(e, '获取距离');
	};
	const topSize = ref('0rpx');
	const isShow = ref(false);
	const searchAll = async () => {
		//获取头部盒子宽高
		const query = uni.createSelectorQuery().select('#head-box');
		//获取宽度
		query
			.boundingClientRect(function(data) {
				console.log(data, '元素的各种信息');
				topSize.value = data.height * 2 + 20 + 'rpx';
				isShow.value = true;
			})
			.exec();
	};
	const age = ref(21);
	const sliderChange = async (e) => {
		console.log(e.detail.value, '技师年龄');
		age.value = e.detail.value;
	};
	const distanceNum = ref(3);
	const changeDistanceTwo = async (e) => {
		console.log(e.detail.value, '技师距离');
		distanceNum.value = e.detail.value;
	};
	const newInfo = async (e) => {
		console.log(e, 'pppppppppppppp');
	};
	const prevent = async () => {
		console.log('阻止事件冒泡');
	};
	const close = async (e) => {
		console.log(e, 'qqqqqq');
		isShow.value = false;
	};

	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	const bottomHeight = ref(bottomHeightOne);

	// 点击技师，跳转到技师详情
	const onTechnician = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/technician/technicianDetails/technicianDetails',
		});
	};
	onLoad((options) => {});
</script>
<style scoped>
	/deep/uni-slider .uni-slider-handle-wrapper {
		height: 18rpx !important;
	}

	.distance {
		/deep/.uni-select__input-text {
			width: 130rpx;
			color: #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 24rpx;
			text-align: right;
		}
	}

	/deep/.uni-select__input-text {
		width: 100%;
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24rpx;
		text-align: right;
	}

	/deep/.uni-searchbar__box {
		height: 100% !important;
	}

	/deep/.uni-select {
		border: none !important;
		padding-left: 0rpx;
	}
</style>
<style scoped lang="scss">
	.list-box {
		width: 95%;
		margin-left: 2.5%;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 3rpx dashed #aaaaaa;
	}

	.bt-box-two {
		padding: 5rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 20rpx;
		color: #fff;
		background-color: #009fe8;
		border-radius: 5rpx;
	}

	.shop-box {
		padding: 3rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		// background-color: #E3007F;
		color: #fff;
		border-radius: 5rpx;
		box-sizing: border-box;
	}

	.text-info-box {
		width: 100%;
		font-size: 23rpx;
		color: #6f7379;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		min-height: 60rpx;
	}

	.flag-box {
		font-size: 16rpx !important;
		color: #fff;
		margin-right: 15rpx;
		padding-top: 2rpx;
		padding-bottom: 2rpx;
		text-align: center;
		box-sizing: border-box;
		border-radius: 5rpx;
		margin-top: 5rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.job-box {
		font-size: 22rpx;
		color: #fff;
		background-color: #898f96;
		padding: 3rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
		-moz-box-sizing: border-box;
	}

	.bt-box {
		width: 100rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		color: #fff;
		background-color: #009fe8;
		font-size: 20rpx;
		padding: 3rpx;
		border-radius: 5rpx;
		margin-top: 10rpx;
		margin-left: 40rpx;
	}

	.button-info-box {
		width: 41%;
		margin-left: 6%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 40rpx;
		margin-top: 25rpx;
		border-radius: 10rpx;
	}

	.content-text {
		width: 30%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #707374;
		background-color: #efeef1;
		margin-top: 15rpx;
		border-radius: 10rpx;
		margin-left: 2.5%;
	}

	.content-info-box {
		width: 95%;
		margin-left: 2.5%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}

	.search-title {
		width: 90%;
		height: 50rpx;
		margin-left: 5%;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: 650;
		text-align: left;
	}

	.popup-box {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.icon-image {
		width: 100%;
		height: 100%;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 50px);
		background: linear-gradient(to bottom, #08a3e9, #fff);
		box-sizing: border-box;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		background-color: #fff;
		border-radius: 10rpx;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: 2vw;
		margin-right: 2vw;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}
</style>