<template>
	<view class="container">
		<custom-navbar title="选择员工" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
			backgroundColor="linear-gradient( 134deg, #F52540 0%, #E8101E 100%)"
			titleColor="#fff" borderBottom="none"></custom-navbar>
		<searchBox placeholder="输入员工名/手机号" v-model="queryData.str_val" :showAdd="false" @confirm="search"
			@search="search">
		</searchBox>
		<!-- Tab 内容区域 -->
		<div class="tab-nav">
			<div v-for="tab in tabs" :key="tab.id" class="tab-item" :class="{ active: queryData.state === tab.id }"
				@click="switchTab(tab.id)">
				{{ tab.name }}
			</div>
		</div>
		<CommonList ref="groupRef" apiUrl="/sj/sryservers" @load-success="loadSuccess"
			:listScrollHeight="`calc(100vh - ${statusBarHeight + 302}rpx)`">
			<template #listData="{ list }">
				<view class="syr-list">
					<view class="syr-item flex-row-center" v-for="(item, index) in syrList" :key="index" @click="goDetail(item)">
						<view @click.stop="changeType(item)">
							<image src="/static/images/shop/pintuan/radioYes.png" mode="aspectFill"
								class="syr-card-left__img" v-if="item.isSelect"></image>
							<view class="syr-card-left" v-else>

							</view>
						</view>
						<view class="syr-item-right flex-row-start">
							<image :src="item.head_photo" class="item-right-photo"></image>
							<view class="item-right-texts">
								<view class="item-right-text1">{{ item.name }}</view>
								<view class="item-right-text2">绑定时间:{{ item.bind_time }}</view>
							</view>
						</view>
					</view>
				</view>
			</template>

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

		<view class="container-footer">
			<view class="container-footer-tip">{{ queryData.state==2?"批量选择员工后，进行批量分配操作":"批量选择员工后，进行批量取消操作" }}</view>
			<view class="container-button flex-row-center-center" @click="makesyr">
				{{ queryData.state==2?"批量分配":"批量取消" }}
			</view>
		</view>

	</view>
</template>

<script>
	import request from "@/utils/request";
	import searchBox from "./components/search-box.vue";
	import CommonList from "@/components/common/CommonList.vue";
	export default {
		components: {
			searchBox,
			CommonList,
		},
		data() {
			return {
				syrList: [],
				isSubmit: false,
				queryData: {
					state: 2,
					str_val: "",
				},
				userInfo: {},
				statusBarHeight: 0,
				tabs: [{
						id: 2,
						name: "未分配",
					},
					{
						id: 1,
						name: "已分配",
					},
				],
			};
		},
		async onLoad(options) {
			if (options.server_id) {
				this.queryData.server_id = Number(options.server_id);
			}
			let type = 3;
			let result = await request.post("/user/getuser", {
				type,
			});
			this.userInfo = result.data;
			this.queryData.sjid = this.userInfo.id;
			this.statusBarHeight = this.getRpxStatusBarHeight();
			this.$nextTick(() => {
				this.search();
			});
		},
		// 核心：新增计算属性，实时筛选选中的id
		computed: {
			selectedIds() {
				// 筛选出isSelect为true的项，提取id组成数组
				return this.syrList.filter(item => item.isSelect).map(item => item.syr_id);
			}
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/shop/staff/staffDetail?syrid=${item.syr_id}`,
				});
			},
			loadSuccess(res) {
				this.syrList = res.list
			},
			search() {
				this.$refs.groupRef.manualRefresh(this.queryData);
			},
			// 切换 Tab 的方法
			switchTab(tabId) {
				this.queryData.state = tabId;
				this.$nextTick(() => {
					this.search();
				});
			},
			changeType(item) {
				// 先获取当前isSelect值（初始为undefined，取反为true）
				const newIsSelect = !item.isSelect;
				// 用$set添加/修改响应式属性
				this.$set(item, 'isSelect', newIsSelect);
				// item.name = item.isSelect
			},
			makesyr() {

				if (this.isSubmit) {
					return
				}
				if (this.selectedIds.length == 0) {
					uni.showToast({
						title: "请选择手艺人",
						icon: 'none',
						duration: 2000
					});
				}
				this.isSubmit = true
				request
					.post("/sj/makesyr", {
						sjid: this.userInfo.id,
						server_id: this.queryData.server_id,
						syr_arr: this.selectedIds,
						type: this.queryData.state == 2 ? 1 : 2
					})
					.then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: this.queryData.state == 2 ? "分配成功" : "取消成功",
								icon: 'none',
								duration: 2000
							});
							this.$nextTick(() => {
								this.search();
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					}).catch(err => {
						uni.showToast({
							title: '网络异常，请稍后重试',
							icon: 'none',
							duration: 2000
						});
					}).finally(() => {
						this.isSubmit = false
					});
			}
		},
	};
</script>

<style lang="less">
	page {
		background: linear-gradient(to top, #fff, #F5F5F5);
	}

	.container {
		.tab-nav {
			display: flex;
			justify-content: space-between;
			padding: 0 91rpx;
			background: #fff;

			.tab-item {
				padding: 30rpx 0rpx 30rpx 0rpx;
				cursor: pointer;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;

				/* 预先设置透明边框，防止切换时布局跳动 */
				&.active {
					color: #e8101e;
					font-weight: 500;
					position: relative;

					&:after {
						content: "";
						position: absolute;
						bottom: 17rpx; // 定位在底部边框的下方
						left: 50%;
						transform: translateX(-50%); // 水平居中

						/* 激活时显示红色边框 */
						width: 34rpx;
						height: 6rpx;
						background: linear-gradient(306deg, #e8101e 0%, #fc563b 100%);
						border-radius: 3rpx;
					}
				}
			}
		}

		.syr-list {
			.syr-item {
				margin: 20rpx;
				padding: 20rpx 30rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.syr-card-left {
					width: 32rpx;
					height: 32rpx;
					border: 4rpx solid #CDCFD2;
					border-radius: 40rpx;
					margin-right: 30rpx;
				}

				.syr-card-left__img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 30rpx;
				}

				.syr-item-right {
					.item-right-photo {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.item-right-texts {
						flex: 1;

						.item-right-text1 {
							margin-top: 8rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}

						.item-right-text2 {
							margin-top: 8rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
							line-height: 37rpx;
							text-align: left;
							font-style: normal;
						}
					}
				}
			}
		}
	}

	.container-footer {
		position: fixed;
		bottom: 20rpx;
		left: 0rpx;
		right: 0;

		.container-footer-tip {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
			margin-bottom: 20rpx;
		}

		.container-button {
			margin: 0 20rpx;
			width: 710rpx;
			height: 98rpx;
			background: #e8101e;
			border-radius: 49rpx;
			font-weight: 400;
			font-size: 38rpx;
			color: #ffffff;
			text-align: left;
			font-style: normal;

		}
	}



	.common-list {
		border-radius: 30rpx 30rpx 0rpx 0rpx !important;
		background: #f5f5f5 !important;
		padding-bottom: 0 !important;
	}

	::v-deep .list-container {
		padding: 0 !important;
	}

	::v-deep .load-tips {
		padding-bottom: 200rpx !important;
	}

	::v-deep .list-scroll {
		margin-top: 0 !important;
	}
</style>