<template>
	<view class="container">
		<custom-navbar title="详情" :leftImg="'/static/images/back.png'" :showUser="true" backgroundColor="transparent"
			titleColor="#000" borderBottom="none"></custom-navbar>
		<view class="user-card">
			<view class="flex-row-center">
				<!-- 头像区域 -->
				<view class="user-avatar flex-row-center-center">
					<image class="user-avatar-img" :src="syrInfo.head_photo" mode="aspectFill"></image>
				</view>

				<!-- 信息区域 -->
				<view class="user-info">
					<view class="user-name">{{ syrInfo.name }}</view>
					<view class="user-action" @click="goServiceList">
						<text>分配项目</text>
						<image src="/static/images/icons/right_20_36.png" class="user-action-icon"></image>
					</view>
				</view>
			</view>

			<!-- 更多详情 -->
			<view class="more-detail" @click="goDetail">
				更多详情
				<image src="/static//images//icons/right_20_40.png" class="more-detail-icon"></image>
			</view>
		</view>
		<view class="switch-section flex-row-center-between">
			<view class="switch-section-right flex-row-center">
				<image src="/static//images//icons/setting.png" class="switch-section-right-icon"></image>
				<text>是否允许手艺人接单</text>
			</view>
			<view class="switch-box" @click="handleSwitchChange" :class="{ disswitch: bindsyr.sj_state != 1 }">
				<text class="switch-text" v-if="bindsyr.sj_state == 1">接单</text>
				<view class="switch-yuan"></view>
				<text class="switch-text" v-if="bindsyr.sj_state != 1">不接单</text>
			</view>
		</view>

		<view class="tab-container">
			<!-- 顶部主Tab栏（动态循环） -->
			<view class="tab-main">
				<view class="tab-main-item" :class="{ active: currentMainTab === item.id }" v-for="item in mainTabs"
					:key="item.id" @click="switchMainTab(item.id)">
					{{ item.name }}
				</view>
			</view>

			<!-- 下方子Tab栏（根据当前主Tab动态循环） -->
			<scroll-view scroll-x="true" scroll-with-animation>
				<view class="tab-sub">
					<view class="tab-sub-item" :class="{ active: queryData.state === item.id }"
						v-for="item in currentSubTabs" :key="item.id" @click="switchSubTab(item.id)">
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
		</view>

		<CommonList ref="groupRef" :apiUrl="getListUrl" :listScrollHeight="`calc(100vh - ${statusBarHeight + 550}rpx)`">
			<template #listData="{ list }">
				<view class="order-list">
					<view class="order_item" v-for="(item, i) in list" :key="item.id">
						<OrderCard :showState="true" :dataItem="item" :noTime="true" />
					</view>
				</view>
			</template>

			<!-- 空数据状态 -->
			<template #empty>
				<noData></noData>
			</template>
		</CommonList>
		
		<view class="container-buttons">
			<view class="container-button flex-row-center-center" @click="syrunbind" v-if="bindsyr.state == 1">解除绑定</view>
			<view class="container-button flex-row-center-center" @click="goAddStaff" v-if="bindsyr.state == 2">重新邀请绑定
			</view>
		</view>
		
	</view>
</template>

<script>
	import OrderCard from "./components/orderCard.vue";
	import request from "@/utils/request";
	import CommonList from "@/components/common/CommonList.vue";
	export default {
		components: {
			CommonList,
			OrderCard,
		},
		data() {
			return {
				queryData: {
					state: "",
				},
				statusBarHeight: 0,
				syrid: "",
				userInfo: {},
				bindsyr: {},
				syrInfo: {},
				// 当前选中的主Tab ID
				currentMainTab: 1,
				// 主Tab数据源
				mainTabs: [{
						id: 1,
						name: "用户订单",
						url: "/sj/searchsyrorders",
					},
					{
						id: 2,
						name: "自营订单",
						url: "/sj/searchsyrordersself",
					},
					// 可扩展更多主Tab
				],
				// 主Tab与子Tab的映射关系（不同主Tab对应不同子Tab）
				subTabsMap: {
					1: [{
							id: "",
							name: "全部",
						},
						{
							id: 2,
							name: "待接单",
						},
						{
							id: 3,
							name: "待服务",
						},
						{
							id: 4,
							name: "服务中",
						},
						{
							id: 5,
							name: "已完成",
						},
						{
							id: 7,
							name: "已取消",
						},
					],
					2: [{
							id: "",
							name: "全部",
						},
						{
							id: 2,
							name: "待接单",
						},
						{
							id: 3,
							name: "待服务",
						},
						{
							id: 4,
							name: "服务中",
						},
						{
							id: 5,
							name: "已完成",
						},
						{
							id: 7,
							name: "已取消",
						},
					],
				},
			};
		},
		computed: {

			getListUrl() {
				let currentMainTabObj = this.mainTabs.find(
					(tab) => tab.id === this.currentMainTab
				);
				return currentMainTabObj ? currentMainTabObj.url : "";
			},
			// 根据当前主Tab获取对应的子Tab列表
			currentSubTabs() {
				return this.subTabsMap[this.currentMainTab] || [];
			},
			mergeServiceList() {
				// 1. 提取原始对象的所有子数组
				let allSubArrays = Object.values(this.$store.state.sjServiceList);
				// 2. 遍历每个子数组，过滤掉server_time>100的元素，再合并
				return allSubArrays
					.map((subArr) => {
						// 过滤
						return subArr.filter((item) => {
							// 只保留is_choice为true的项目
							return item.is_choice;
						});
					})
					.flat(); // 扁平化合并所有过滤后的子数组
			},
		},
		async onLoad(options) {
			if (options.syrid) {
				this.syrid = Number(options.syrid);
				this.queryData.syrid = this.syrid;
			}
			this.statusBarHeight = this.getRpxStatusBarHeight();
			let type = 3;
			let result = await request.post("/user/getuser", {
				type,
			});
			this.userInfo = result.data;
			this.queryData.sjid = this.userInfo.id;
			this.$nextTick(() => {
				this.search();
			});
			this.getbindsyr();
		},
		methods: {
			goAddStaff() {
				uni.navigateTo({
					url: `/pages/shop/staff/addStaff?phone=${this.syrInfo.account}`,
				});
			},
			makeservers() {
				let form = {
					sjid: this.userInfo.id,
					syrid: this.syrid,
					server_arr: this.mergeServiceList.map((item) => item.id),
				};

				request
					.post("/sj/makeservers", form)
					.then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: "分配成功",
								icon: "success",
								duration: 2000,
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((error) => {
						uni.showToast({
							title: "请求失败，请稍后重试",
							icon: "none",
							duration: 2000,
						});
					});
			},
			search() {
				this.$refs.groupRef.manualRefresh(this.queryData);
			},
			goServiceList() {
				if(this.bindsyr.state == 2){
					uni.showToast({
						title: "手艺人已解绑，请重新邀请后再分配",
						icon: "none",
						duration: 2000,
					});
					return
				}
				uni.navigateTo({
					url: `/pages/shop/staff/serviceList?syrid=${this.syrid}`,
				});
			},
			getbindsyr() {
				let obj = {
					sjid: this.userInfo.id,
					syrid: this.syrid,
				};
				// 获取绑定的服务员信息
				request.post("/sj/getbindsyr", obj).then((res) => {
					if (res.code == 200) {
						this.bindsyr = res.data;
						this.syrInfo = res.data.syr;
					}
				});
			},
			goDetail() {
				uni.navigateTo({
					url: `/pages/shop/staff/staffDetail?syrid=${this.syrid}`,
				});
			},
			syrunbind(item) {
				let obj = {
					sjid: this.userInfo.id,
					syrid: this.syrid,
				};
				request.post("/sj/syrordernum", obj).then((res) => {
					if (res.code == 200) {
						uni.showModal({
							content: '是否确认解绑',
							success: (res) => {
								if (res.confirm) {
									request.post("/sj/syrunbind", obj).then((res) => {
										if (res.code == 200) {
											uni.showToast({
												title: "解绑成功",
												icon: "success",
												duration: 2000,
											});
											this.$set(this.bindsyr, "state", 2)
										} else {
											uni.showToast({
												title: res.msg,
												icon: "none",
												duration: 2000,
											});
										}
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000,
						});
					}
				});


			},
			handleSwitchChange(item) {
				let obj = {
					sjid: this.userInfo.id,
					syrid: this.syrid,
				};
				request
					.post("/sj/isaccept", obj)
					.then((res) => {
						if (res.code == 200) {
							this.bindsyr.sj_state = this.bindsyr.sj_state == 1 ? 2 : 1;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((error) => {
						uni.showToast({
							title: "请求失败，请稍后重试",
							icon: "none",
							duration: 2000,
						});
					});
			},
			// 切换主Tab
			switchMainTab(tabId) {
				this.currentMainTab = tabId;
				// 切换主Tab时，重置子Tab为第一个选项
				const firstSubTab = this.currentSubTabs[0];
				if (firstSubTab) {
					this.queryData.state = firstSubTab.id;
				}
				// 可在这里添加主Tab切换后的业务逻辑（比如请求数据）
				this.$nextTick(() => {
					this.search();
				});
				console.log("切换到主Tab：", tabId);
			},
			// 切换子Tab
			switchSubTab(tabId) {
				this.queryData.state = tabId;
				// 可在这里添加子Tab切换后的业务逻辑（比如筛选数据）
				this.$nextTick(() => {
					this.search();
				});
				console.log("切换到子Tab：", tabId);
			},
		},
	};
</script>

<style lang="less">
	.container {
		position: relative;
		background-image: url("/static/images/background/bj3.png");
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;

		.user-card {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 30rpx;

			// 头像样式
			.user-avatar {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
				background: #fff;
				margin-right: 21rpx;

				.user-avatar-img {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;

				}
			}

			// 信息区域
			.user-info {
				.user-name {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
					margin-bottom: 12rpx;
				}

				.user-action {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;

					&-icon {
						width: 10rpx;
						height: 18rpx;
						margin-left: 8rpx;
					}
				}
			}

			// 更多详情
			.more-detail {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				line-height: 32rpx;
				text-align: right;
				font-style: normal;

				&-icon {
					width: 10rpx;
					height: 20rpx;
					margin-left: 9rpx;
				}
			}
		}

		.switch-section {
			margin: 0 auto;
			width: 710rpx;
			height: 80rpx;
			padding: 15rpx 20rpx;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 20rpx;

			.switch-section-right {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;

				&-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
				}
			}

			.switch-box {
				/* width: 126rpx; */
				height: 52rpx;
				line-height: 52rpx;
				border-radius: 26rpx;
				background-color: #e8101e;
				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: #ffffff;
					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;
				}
			}
		}

		.tab-container {
			margin-top: 16rpx;
			padding: 20rpx 30rpx;
			background-color: #fff;

			// 顶部主Tab栏
			.tab-main {
				display: flex;
				gap: 70rpx;
				margin-bottom: 24rpx;

				.tab-main-item {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					padding-bottom: 6rpx;
					position: relative;
					transition: color 0.2s ease;

					// 点击态优化（uniapp多端适配）
					&:active {
						opacity: 0.8;
					}

					// 选中态样式
					&.active {
						color: #e8101e; // 红色文字（匹配设计）

						&::after {
							content: "";
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 28rpx;
							height: 6rpx;
							background: #e8101e;
							border-radius: 3rpx;
						}
					}
				}
			}

			// 下方子Tab栏
			.tab-sub {
				display: flex;
				gap: 18rpx;
				flex-wrap: nowrap;
				align-items: center;

				.tab-sub-item {
					white-space: nowrap;
					padding: 8rpx 20rpx;

					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					background-color: #f3f5f6;
					border-radius: 10rpx;
					transition: all 0.2s ease;

					// 点击态优化
					&:active {
						opacity: 0.8;
					}

					// 选中态样式
					&.active {
						color: #e8101e;
						background-color: #fee5e7; // 深粉色（更贴近设计的选中色）
					}
				}
			}
		}
	}
	
	.container-buttons{
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0;
		background: #fff;
	}

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

	.order-list {}

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

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

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

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

	.user-action-icon,
	.more-detail-icon {
		margin-left: 4rpx !important;
	}
</style>