<template>
	<view class="selectSyr">
		<custom-navbar title="选择手艺人" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
			backgroundColor="linear-gradient( 134deg, #F52540 0%, #FF4767 100%)" titleColor="#fff"
			borderBottom="none"></custom-navbar>
		<searchBox placeholder="搜索手艺人名称" v-model="queryData.name" @confirm="searchConfrim" @search="searchConfrim">
		</searchBox>
		<view class="selectSyr-tip" v-if="queryData.servers_region.length == 0">
			<text>抱歉呀，您所选择的地址暂时没有合适的手艺人～试试调整换个地址，马上为您匹配新的人选哦。</text>
		</view>
		<CommonList ref="groupRef" :apiUrl="url" :listScrollHeight="`calc(100vh - ${
        statusBarHeight + 200 + tipHeight
      }rpx)`" @load-success-all="loadSuccess">
			<template #listData="{ list }">
				<view class="selectSyr-list-tip" v-if="queryData.servers_region.length == 0">
					<view class="flex-row-center">
						<image class="selectSyr-list-tip-icon" src="/static/images/icons/tip.png">
						</image>
						<text>暂不满足此地址和时间的手艺人</text>
					</view>
				</view>
				<view class="selectSyr-list" :class="{ noSyr: queryData.servers_region.length == 0 }">
					<view class="selectSyr-item" v-for="(item, index) in syrList" :key="index" @click="selectSyr(item)">
						<image :src="item.head_photo" mode="aspectFill" class="selectSyr-item-photo"></image>
						<view class="selectSyr-item-right">
							<view class="selectSyr-item-right-name flex-row-center-between">
								<text class="right-name-left">{{ item.name }}</text>
								<view class="right-name-right flex-row-center" @click.stop="openPopup(item)">
									<text>更多信息</text>
									<image class="right-name-right-img" src="/static/images/icons/right_gray4.png">
									</image>
								</view>
							</view>

							<view class="selectSyr-item-right-time flex-row-center">
								<text>到家时间：{{ item.default_times }}</text>
							</view>

							<!-- 所属门店区域 -->
							<view class="detail-info-user__company__name"
								v-if="item.for_shop && item.for_shop.length > 0">
								<view class="detail-info-user__company__name__text1">
									所属门店
								</view>
								<span class="detail-info-user__company__name__line"> | </span>
								<view class="detail-info-user__company__name__text2">
									{{ item.for_shop }}
									</image>
								</view>
							</view>

							<view class="detail-info-user__company__name" v-if="item.sj_list && item.sj_list.length > 0"
								@click.stop="showShopList(item)">
								<view class="detail-info-user__company__name__text1">
									所属门店
								</view>
								<span class="detail-info-user__company__name__line"> | </span>
								<view class="detail-info-user__company__name__text2">
									{{ item.selectSjItem.name }}
									<!-- 多个门店时显示下拉图标 -->
									<image v-if="item.sj_list && item.sj_list.length >= 1"
										src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4c5f282e-bad3-4c27-b653-9bd5100ae639.png"
										mode="aspectFill" class="detail-info-user__company__name__text2__img"
										referrer="no-referrer">
									</image>
								</view>
								<view class="sj-pop" v-if="item.showSj">
									<view class="sj-pop-item" v-for="(item2,index2) in item.sj_list" :class="{active:item2.id == item.selectSjItem.id}"
										:key="index2" @click="selectShop(item,item2)">
										{{ item2.name }}
									</view>
								</view>
							</view>

						</view>
						<view class="selectSyr-item-bottom">
							<view class="selectSyr-item-right-adress flex-row-center">
								<image class="right-adress-icon" src="/static/images/icons/address_icon3.png">
								</image>
								<text
									class="selectSyr-item-right-adress-text">服务区域：{{ item.servers_region.join("、") }}</text>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 空数据状态 -->
			<template #empty>
				<noData></noData>
			</template>
		</CommonList>

		<!-- 手艺人详情弹窗 -->
		<uv-popup ref="popup" mode="bottom" bgColor="" :closeable="false">
			<view class="popup-container">
				<!-- 头部：头像+姓名+经验+取消按钮 -->
				<view class="header-bar">
					<view class="avatar-name-wrap">
						<image class="avatar" :src="openTiem.head_photo" mode="aspectFill"></image>
						<view class="name-exp">
							<text class="name">{{ openTiem.name }}</text>
							<view class="exp-tag flex-row-center">
								<image class="exp-tag-icon" src="/static/images/icons/experience.png">
								</image>
								<text>专业经验：{{workExpText(openTiem.major)}}</text>
							</view>
						</view>
					</view>
					<text class="cancel-btn" @click="closePopup">取消</text>
				</view>

				<!-- 服务信息：到家时间+服务区域 -->
				<view class="service-info">
					<view class="info-item flex-row-center">
						<image class="right-time-icon" src="/static/images/icons/time_icon.png">
						</image>
						<text class="info-text">到家时间：
							<text style="color: #333333">{{
								openTiem.default_times
							}}</text>
						</text>
					</view>
					<view class="info-item flex-row-center" v-if="openTiem.servers_region">
						<image class="right-adress-icon" src="/static/images/icons/address_icon3.png">
						</image>
						<text class="info-text">服务区域：<text style="color: #333333">{{
                openTiem.servers_region.join("、")
              }}</text></text>
					</view>

					<!-- 新的门店显示样式 -->
					<view class="popup-shop-info" v-if="openTiem.for_shop && openTiem.for_shop.length > 0">
						<text class="popup-shop-label">所属门店：</text>
						<view class="popup-shop-tags">
							<view class="popup-shop-tag">
								{{ openTiem.for_shop}}
							</view>
						</view>
					</view>
				</view>

				<!-- 介绍文本 -->
				<view class="intro-text">
					<image class="intro-text-icon" src="/static/images/icons/Introduction.png" />
					<text>{{ openTiem.detail }}</text>
				</view>

				<!-- 确定按钮 -->
				<view class="confirm-btn" @click="handleConfirm">确定</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import searchBox from "@/pages/service/components/search-box.vue";
	import CommonList from "@/components/common/CommonList.vue";
	export default {
		name: "list",
		components: {
			searchBox,
			CommonList,
		},
		data() {
			return {
				syrList: [],
				url: '/user/serversSelf/syrList',
				openTiem: {},
				queryData: {
					name: "",
					id: 1,
					servers_region: "河北省-沧州市-黄骅市",
				},
			};
		},
		computed: {
			tipHeight() {
				return this.queryData.servers_region.length == 0 ? 108 : 0;
			},
			reservationAddress() {
				return this.$store.state.reservationAddress;
			},
		},
		async onLoad(options) {
			this.statusBarHeight = this.getRpxStatusBarHeight();
			if (options.url) {
				this.url = options.url;
			}
			if (options.id) {
				this.queryData.id = options.id;
			}
			if (Object.keys(this.reservationAddress).length != 0) {
				this.queryData.servers_region = this.reservationAddress.dependency;
				this.queryData.city = this.reservationAddress.dependency_city;
			}
			this.$nextTick(() => {
				this.search();
			});
		},
		methods: {

			// 显示门店列表选择弹窗
			showShopList(currentItem) {
				// 先关闭所有已展开的弹窗
				this.syrList.forEach(item => {
					if (item !== currentItem && item.showSj) {
						this.$set(item, 'showSj', false);
					}
				});
				// 展开当前弹窗
				this.$set(currentItem, 'showSj', !currentItem.showSj);
			},
			// 选择门店
			selectShop(item,item2) {
				this.$set(item, 'selectSjItem', item2);
			},
			// 关闭门店选择弹窗
			closeShopPopup() {

			},
			workExpText(workExpNum) {
				// 定义映射表（复用性更高）
				const expMap = {
					1: '实习',
					2: '1-3年',
					3: '3-5年',
					4: '5-10年',
					5: '10年以上'
				};
				// 取值并处理默认情况
				return expMap[workExpNum] || '未知工作经验';
			},
			loadSuccess(e) {
				// 处理返回的数据，假设接口返回的数据中，所属门店是数组格式
				// 这里您需要根据实际接口返回的数据结构调整
				const list = e.data.list || [];
				list.forEach(item => {
					// 如果接口返回的是字符串，转换为数组
					if (item.sj_list && item.sj_list.length > 0) {
						// 如果接口直接返回shop_list数组
						this.$set(item, 'selectSjItem', item.sj_list[0])
						this.$set(item, 'showSj', false)
					}
				});
				this.syrList = list
				console.log(11111, this.syrList)

				// 如果没有手艺人清空地区
				if (e.data.count == 0 && this.queryData.servers_region.length != 0) {
					this.queryData.servers_region = "";
					setTimeout(() => {
						this.search();
					}, 200);
				}
			},
			openPopup(item) {
				this.openTiem = item;
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			handleConfirm() {
				// 确定按钮逻辑
				this.closePopup();
			},
			searchConfrim(e) {
				this.search();
			},
			search() {
				this.$refs.groupRef.manualRefresh(this.queryData);
			},
			selectSyr(item) {
				if (this.queryData.servers_region.length == 0) {
					return
				}
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];

				if (prevPage) {
					// 如果有选中的门店，添加到手艺人信息中
					// const selectedShop = this.selectedShops[item.id];
					// if (selectedShop) {
					// 	item.selectedShop = selectedShop;
					// }
					this.$store.commit("setreservationSyr", item);
					uni.navigateBack();
				}
			},
		},
	};
</script>

<style lang="less">
	.selectSyr {
		.selectSyr-tip {
			box-sizing: border-box;
			width: 100%;
			padding: 14rpx 20rpx;
			background: #fae7ec;
			font-weight: 400;
			font-size: 28rpx;
			color: #d5131f;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}

		.selectSyr-list-tip {
			height: 130rpx;
			box-sizing: border-box;
			padding: 20rpx;
			margin: 39rpx 20rpx 0 20rpx;
			background: #fff1df;
			border-radius: 20rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #ab6a21;
			text-align: left;
			font-style: normal;

			.selectSyr-list-tip-icon {
				width: 30rpx;
				height: 26rpx;
				margin-right: 12rpx;
			}
		}

		.selectSyr-list {
			margin-top: 20rpx;

			.selectSyr-item {
				margin: 0rpx 20rpx 20rpx 20rpx;
				padding: 20rpx;
				background: #ffffff;
				border-radius: 20rpx;
				display: flex;
				flex-wrap: wrap;
				column-gap: 20rpx;
				row-gap: 15rpx;

				.selectSyr-item-photo {
					margin-top: 15rpx;
					width: 126rpx;
					height: 126rpx;
					border-radius: 50%;
				}

				.selectSyr-item-right {
					flex: 1;
					min-width: 0;

					.selectSyr-item-right-name {
						margin-bottom: 10rpx;

						.right-name-left {
							font-weight: 500;
							font-size: 30rpx;
							color: #333333;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
						}

						.right-name-right {
							font-weight: 400;
							font-size: 22rpx;
							color: #E5616A;
							text-align: left;
							font-style: normal;
							gap: 10rpx;
							padding: 6rpx 10rpx;
							border-radius: 30rpx;
							border: 1rpx solid #E3C0C2;

							.right-name-right-img {
								width: 10rpx;
								height: 19rpx;
							}
						}
					}

					.selectSyr-item-right-time {
						margin-bottom: 4rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						gap: 10rpx;
					}
				}

				.selectSyr-item-bottom {
					width: 100%;
					padding-top: 20rpx;
					border-top: 1rpx solid #f1f1f1;

					.selectSyr-item-right-adress {
						display: flex;
						align-items: flex-start;
						gap: 10rpx;

						.right-adress-icon {
							width: 24rpx;
							height: 28rpx;
							margin-top: 2rpx;
							flex-shrink: 0;
						}

						.selectSyr-item-right-adress-text {
							flex: 1;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 33rpx;
							word-break: break-all;
							text-align: left;
							min-height: 33rpx;
						}
					}
				}
			}
		}

		.noSyr {
			margin-top: 0;
			transform: translateY(-53rpx);
		}
	}

	.right-time-icon {
		width: 24rpx;
		height: 24rpx;
		flex-shrink: 0;
	}

	.right-adress-icon {
		width: 24rpx;
		height: 28rpx;
		margin-top: 2rpx;
		flex-shrink: 0;
	}

	// 弹窗样式
	.popup-container {
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		background: #ffffff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		// 头部区域
		.header-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1rpx solid #f1f1f1;

			.avatar-name-wrap {
				display: flex;
				align-items: center;

				.avatar {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}

				.name-exp {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.name {
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 45rpx;
						text-align: left;
						font-style: normal;
						margin-bottom: 15rpx;
					}

					.exp-tag {
						padding: 0 22rpx 0 15rpx;
						height: 45rpx;
						background: #fff0f5;
						border-radius: 23rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #dc424c;
						line-height: 45rpx;
						text-align: left;
						font-style: normal;
						width: fit-content;
						gap: 10rpx;

						.exp-tag-icon {
							width: 27rpx;
							height: 24rpx;
						}
					}
				}
			}

			.cancel-btn {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
			}
		}

		// 服务信息区域
		.service-info {
			margin-bottom: 30rpx;

			.info-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 8px;

				&:last-child {
					margin-bottom: 0;
				}

				.info-text {
					flex: 1;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 35rpx;
					text-align: left;
					font-style: normal;
					margin-left: 10rpx;
				}
			}
		}

		// 介绍文本
		.intro-text {
			padding-top: 25rpx;
			margin-bottom: 100rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			position: relative;

			.intro-text-icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 72rpx;
				height: 44rpx;
			}
		}

		// 确定按钮
		.confirm-btn {
			margin: 0 21rpx;
			width: 648rpx;
			height: 94rpx;
			background: linear-gradient(180deg, #f52540 0%, #FF4767 100%);
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			display: flex;
			justify-content: center;
			align-items: center;

			&:active {
				opacity: 0.9;
				transform: scale(0.98);
			}
		}
	}

	// 新的门店显示样式
	.popup-shop-info {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;

		.popup-shop-label {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 33rpx;
			white-space: nowrap;
			margin-right: 10rpx;
			margin-top: 2rpx;
		}

		.popup-shop-tags {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			gap: 8rpx;

			.popup-shop-tag {
				padding: 4rpx 12rpx;
				background: #f5f5f5;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 33rpx;
				text-align: left;
			}
		}
	}


	// 所属门店样式
	.detail-info-user__company__name {
		box-sizing: border-box;
		background: #FFF5F6;
		border-radius: 10rpx;
		border: 1rpx solid #FFD0DC;
		padding-right: 8rpx;
		display: flex;
		align-items: center;
		margin-right: 21rpx;
		width: fit-content;
		margin-top: 15rpx;
		margin-bottom: 5rpx;
		padding: 2rpx 10rpx;
		max-width: 100%;
		position: relative;

		.detail-info-user__company__name__text {
			font-weight: 400;
			font-size: 20rpx;
			color: #a7abae;
			text-align: left;
			font-style: normal;
			margin-right: 10rpx;
		}

		.detail-info-user__company__name__line {
			font-weight: 400;
			font-size: 20rpx;
			color: #D2C7C7;
			border-radius: 1rpx;
			text-align: left;
			font-style: normal;
			margin-right: 10rpx;
		}

		.detail-info-user__company__name__text1 {
			font-weight: 400;
			font-size: 20rpx;
			color: #666666;
			text-align: left;
			font-style: normal;
			margin-right: 10rpx;
			white-space: nowrap;
		}

		.detail-info-user__company__name__text2 {
			font-weight: 400;
			font-size: 20rpx;
			color: #855151;
			text-align: left;
			font-style: normal;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			max-width: 100%;
			overflow: hidden;

			.detail-info-user__company__name__text2__img {
				width: 15rpx;
				height: 8rpx;
				margin-left: 8rpx;
				flex-shrink: 0;
			}
		}

		.detail-info-user__company__name__card {
			margin-right: 8rpx;
			width: 39rpx;
			height: 34rpx;
			background: rgba(212, 215, 223, 0.2);
			border-radius: 6rpx;
			border: 1rpx solid rgba(169, 172, 179, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;

			.detail-info-user__company__name__card__img {
				width: 22rpx;
				height: 21rpx;
			}
		}
	}

	.sj-pop {
		position: absolute;
		top: 60rpx;
		right: -34rpx;
		width: 358rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 8rpx 2rpx #E6E6E6;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		/* 新增圆角，更美观 */
		z-index: 9999;
		/* 新增层级，避免被遮挡 */
		max-height: 400rpx;
		overflow: visible;

		/* 新增：三角形箭头样式 */
		&::before {
			content: '';
			position: absolute;
			top: -20rpx;
			/* 比主体层向下偏移1rpx（对应阴影vertical:1rpx） */
			right: 58rpx;
			/* 向左微调，让阴影向两侧扩散 */
			width: 0;
			height: 0;
			/* 尺寸比主体大2rpx（对应阴影spread:2rpx），模拟扩散效果 */
			border-width: 0 20rpx 18rpx 18rpx;
			border-style: solid;
			border-color: transparent transparent #E6E6E6 transparent;
			/* 阴影颜色 */
			z-index: 1;
			/* 层级低于主体 */
			/* 核心：模拟box-shadow的blur:8rpx模糊效果 */
			filter: blur(2rpx);
			/* 适配rpx的模糊值，视觉匹配8rpx的box-shadow模糊 */
			opacity: 0.8;
			/* 弱化阴影，更贴近原风格 */
		}

		/* 第二步：三角形主体层（白色，覆盖阴影层中间，只露边缘阴影） */
		&::after {
			content: '';
			position: absolute;
			top: -16rpx;
			right: 60rpx;
			width: 0;
			height: 0;
			border-width: 0 18rpx 16rpx 16rpx;
			border-style: solid;
			border-color: transparent transparent #FFFFFF transparent;
			/* 主体白色 */
			z-index: 2;
			/* 层级高于阴影层 */
			/* 可选：给主体加极轻微阴影，增强层次感 */
			filter: drop-shadow(0rpx 1rpx 1rpx rgba(230, 230, 230, 0.3));
		}


		.sj-pop-item {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F1F1F1;
		}

		.sj-pop-item:last-child {
			margin-bottom: 0rpx;
			padding-bottom: 0rpx;
			border-bottom: none;
		}

		/* 选中状态样式 */
		.sj-pop-item.active {
			color: #FF4767 ;
		}
	}

	//list样式
	.common-list {
		background-color: #fafafa !important;
		padding-bottom: 0rpx;

		::v-deep .list-scroll {
			margin-top: 0rpx;
		}

		::v-deep .list-container {
			padding: 0rpx;
		}
	}
</style>