<template>
	<view class="container">
		<custom-navbar title="员工管理" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
			backgroundColor="linear-gradient( 134deg, #F52540 0%, #E8101E 100%)"
			headleSrc="/static/images/recruit/guide.png" :showHeadle="false" titleColor="#fff" borderBottom="none"
			@onHeadleClick="openPop"></custom-navbar>
		<searchBox placeholder="手艺人名字/手机号" v-model="queryData.nameorphone" :showAdd="true" @confirm="search" @search="search"
			@add="goAddStaff">
		</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/sjstafflist"
			:listScrollHeight="`calc(100vh - ${statusBarHeight + 350}rpx)`">
			<template #listData="{ list }">
				<view class="scoll-lists">
					<view class="list-item" v-for="(item, index) in list" :key="index" @click="goDetail(item)" v-if="item.syr">
						<view class="item-left">
							<image :src="item.syr.head_photo" class="item-left-img" mode="aspectFill"></image>
							<view class="item-left-tab flex-row-center-center" :class="{noTab:item.state==2}">{{ typName(item.state) }}</view>
						</view>
						<view class="item-right">
							<view class="item-right-text1 flex-row-center-between">
								<text>{{ item.syr.name }}</text>

								<view class="switch-box" @click.stop="handleSwitchChange(item)"
									:class="{ disswitch: item.sj_state!=1 }" v-if="item.state==1">
									<text class="switch-text" v-if="item.sj_state==1">接单</text>
									<view class="switch-yuan"></view>
									<text class="switch-text" v-if="item.sj_state!=1">不接单</text>
								</view>
							</view>
							<view class="item-right-text2">绑定时间: {{ item.bind_time }}</view>
							<view class="item-right-text3">
								<text>分配项目</text>
								<image src="/static/images/icons/right_gray8.png" class="item-right-text3-icon"></image>
							</view>
						</view>
					</view>
				</view>
			</template>

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

		<uv-popup ref="popup" bgColor="">
			<view class="pop-content">
				<text class="pop-content-title"> 什么是平台自营服务列表 </text>
				<text class="pop-content-text">
					1、平台自营服务：商品平台统一提供，服务由指定提供者承接。售价为商品标价，实际到账金额
					= 售价 - 平台服务费，以实际到账为准。
				</text>
				<text class="pop-content-text">
					2、已上架即商品处于售卖状态，请依据实际库存情况，合理执行上下架操作。
				</text>
				<text class="pop-content-text">
					3、商品售价将根据平台规则动态调整，当前标价仅为即时售价信息。
				</text>
				<view class="pop-content-btns">
					<view class="pop-content-close" @click="closePop"> 取消 </view>
					<view class="pop-content-sure" @click="closePop"> 我已了解 </view>
				</view>
			</view>
		</uv-popup>
	</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 {
				isSubmit:false,//调接口防止重复点击参数
				queryData: {
					nameorphone: "",
					sjid: null,
					state: "", // 1绑定 2解绑
				},
				userInfo: {},
				artisanType: getApp().globalData.artisanType,
				info: {
					1: {
						list: "/syr/serversSelf/list",
						name: "手艺人",
						switch: "/syr/serversSelf/switch",
					},
					2: {
						list: "/sj/serversSelf/list",
						name: "商家",
						switch: "/sj/serversSelf/switch",
					},
				},
				statusBarHeight: 0,
				// Tab 数据源，通过修改这个数组可以动态增删 Tab
				tabs: [{
						id: "",
						name: "全部",
					},
					{
						id: 1,
						name: "服务中",
					},
					{
						id: 2,
						name: "已解约",
					},
				],
			};
		},
		computed: {

		},
		async onLoad(options) {
			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();
			});
		},
		onShow() {
			if(this.queryData.sjid){
				this.$nextTick(() => {
					this.search();
				});
			}
		},
		methods: {
			goDetail(item){
				uni.$uv.throttle(()=>{
					uni.navigateTo({
						url: `/pages/shop/staff/detail?syrid=${item.syr?.id}`,
					});
				}, 500)
				
			},
			handleSwitchChange(item) {
				let obj = {
					sjid:this.userInfo.id,
					syrid: item.syr_id
				}
				request.post("/sj/isaccept", obj).then((res) => {
					if(res.code==200){
						item.sj_state ===1?item.sj_state=2:item.sj_state=1;
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch((error)=>{
					uni.showToast({
						title: '网络异常，请稍后重试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			typName(type) {
				const textList = {
					1: "服务中",
					2: "已解约"
				};
				return textList[type];
			},
			handleService(item) {
				uni.showModal({
					title: "提示",
					content: `确定要${item.us_state == 1 ? "下架" : "上架"}该服务吗？`,
					success: (res) => {
						if (res.confirm) {
							request
								.post(this.info[this.artisanType].switch, {
									id: item.id,
									us_state: item.us_state == 1 ? 2 : 1,
								})
								.then((res) => {
									if (res.code == 200) {
										uni.showToast({
											title: "下架成功",
											icon: "none",
										});
										this.search(); // 刷新列表
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none",
										});
									}
								});
						}
					},
				});
			},
			goAddStaff() {
				uni.navigateTo({
					url: `/pages/shop/staff/addStaff`,
				});
			},
			search() {
				this.$refs.groupRef.manualRefresh(this.queryData);
			},
			// 切换 Tab 的方法
			switchTab(tabId) {
				this.queryData.state = tabId;
				this.search();
			},
			openPop() {
				this.$refs.popup.open("center");
			},
			closePop() {
				this.$refs.popup.close();
			},
		},
	};
</script>

<style lang="less">
	page {
		background: linear-gradient(to bottom, #ffffff, #f5f5f5) !important;
	}

	.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;
					}
				}
			}
		}
	}

	.pop-content {
		width: 620rpx;
		background-image: url("/static/images/background/selfOperatedTip.png");
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 20rpx;

		.pop-content-title {
			padding-top: 193rpx;
			padding-bottom: 40rpx;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			font-style: normal;
			display: block;
		}

		.pop-content-text {
			padding: 0 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			display: block;
		}

		.pop-content-btns {
			display: flex;
			padding: 0 54rpx;
			justify-content: space-between;
			margin-top: 80rpx;
			padding-bottom: 51rpx;

			.pop-content-close {
				width: 246rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 2rpx solid #e8101e;
				font-weight: 500;
				font-size: 28rpx;
				color: #e8101e;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.pop-content-sure {
				width: 246rpx;
				height: 80rpx;
				background: #e8101e;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.scoll-lists {
		padding: 0 20rpx;
		margin-top: 20rpx;

		.list-item {
			box-sizing: border-box;
			padding: 20rpx;
			height: 200rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			.item-left {
				position: relative;

				.item-left-img {
					width: 131rpx;
					height: 131rpx;
					border-radius: 50%;
				}

				.item-left-tab {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					width: 124rpx;
					height: 34rpx;
					background: #E8101E;
					border-radius: 18rpx;
					position: absolute;
					bottom: 0;
					left: 4rpx;
				}
				.noTab{
					background: #C1C1C1;
				}
			}

			.item-right {
				margin-left: 20rpx;
				flex: 1;

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

				.item-right-text2 {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					margin-bottom: 20rpx;
				}

				.item-right-text3 {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					.item-right-text3-icon{
						width: 8rpx;
						height: 16rpx;
						margin-left: 6rpx;
					}
				}
			}
		}
	}

	::v-deep .right-area {
		width: 31rpx !important;
		height: 31rpx !important;
	}

	::v-deep .icon-headle {
		width: 31rpx !important;
		height: 31rpx !important;
	}

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

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

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

	.switch-box {
		/* width: 126rpx; */
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 26rpx;
		background-color: #FFD4D8;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		padding: 0 8rpx 0 15rpx;

		.switch-yuan {
			width: 38rpx;
			height: 38rpx;
			border-radius: 20rpx;
			background-color: #fff;
			margin-left: 9rpx;
			margin-right: 0rpx;
		}

		.switch-text {
			font-weight: 500;
			font-size: 24rpx;
			color: #E8101E;
			line-height: 33rpx;
			text-align: right;
			font-style: normal;
		}
	}

	.disswitch {
		padding: 0 12rpx 0 8rpx;
		background-color: #cecfd5;

		.switch-yuan {
			margin-left: 0;
			margin-right: 9rpx;
		}

		.switch-text {
			color: #A0A0A0;
		}
	}
</style>