<template>
	<view class="page-container flex-column">
		<view class="top-fixed">
			<nav-bar v-if="!selectedImage" title="淘宝" bgColor="#ffffff" :buttonGroup="buttonGroup"
				@button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-list" isTipLayer
				tipLayerText="添加订单信息">
				<template v-slot:left>
					<image class="back-icon" src="/static/image/shopping/taobao/back.png" mode="aspectFit"></image>
				</template>
				<template v-slot:center>
					<view class="search-box flex-align-center">
						<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png"
							mode="aspectFit">
						</image>
						<input class="input" type="text" placeholder="搜索我的订单" />
					</view>
				</template>
				<template v-slot:right>
					<view class="right-box flex-align-center">
						<view class="item flex-column flex-align-center">
							<image class="icon" src="/static/image/shopping/taobao/shaixuan.png"></image>
							<text class="text">筛选</text>
						</view>
						<view class="item flex-column flex-align-center">
							<image class="icon" src="/static/image/shopping/taobao/guanli.png"></image>
							<text class="text">管理</text>
						</view>
						<view class="item flex-column flex-align-center">
							<image class="icon" src="/static/image/shopping/taobao/xiaoxi.png"></image>
							<text class="text" style="opacity: 0;">消息</text>
						</view>
					</view>
				</template>
			</nav-bar>
			<view class="tab-list">
				<view class="tab-item" v-for="(item, index) in tabList" :key="index"
					:class="{ active: currentTab === index }" @click="switchTab(index)">
					<view class="title">
						<text>{{ item.name }}</text>
						<view class="line" v-if="currentTab === index"></view>
					</view>
					<!-- <view class="line" v-if="currentTab === index"></view> -->
					<image v-if="item.icon" class="badge-icon" :class="{ 'android-m-top': $system == 'Android' }"
						:src="item.icon" mode="heightFix"></image>
				</view>
			</view>
			<view class="filter-wrapper">
				<view class="position-l">
					<view class="filter-item" :class="{ active: currentFilter === 0 }" @click="switchFilter(0)">
						<text class="text">全部</text>
					</view>
				</view>
				<scroll-view class="filter-scroll" scroll-x="true" :show-scrollbar="false">
					<view class="filter-list">
						<view class="filter-item " v-for="(item, index) in filterList" :key="index"
							:class="{ active: currentFilter === index, disabled: item.disabled }"
							@click="switchFilter(index)">
							<text class="text">{{ item.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<scroll-view class="flex-1" style="height: 100px;" scroll-y="true">
			<view v-if="currentTab === 0 && currentFilter === 0"
				class="shangou-tips flex-align-center flex-justify-between">
				<view class="left flex-align-center">
					<image style="width: 64rpx;height: 28rpx;margin-right: 8rpx;"
						src="/static/image/shopping/taobao/shangou-logo.png"></image>
					<text>暂无进行中订单</text>
				</view>
				<view class="right">
					<text>查看全部</text>
					<uni-icons type="right" size="14" color="#5E6367"></uni-icons>
				</view>
			</view>
			<listCard :list="displayList" />
		</scroll-view>

	</view>


	<!-- 水印 -->
	<!-- <view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_shopping_taobao" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_taobao')">
			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
		</liu-drag-button>
	</view> -->
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { util } from '@/utils/common.js';
import listCard from './components/list-card/list-card.vue';

const mockList = ref([
	{
		orderType: "shopping",
		shopName: '淘宝心选官方旗舰店',
		statusType: 'wait_pay',
		shopType: 'taobao',
		statusDesc: '',
		goodsList: [
			{
				image: '',
				title: '【官方正品】全棉时代纯棉柔巾洗脸巾抽纸加厚擦脸巾100抽*6包',
				specs: '颜色分类: 100抽*6包',
				price: '69.00',
				count: 1,
				tags: ['七天无理由退换']
			}
		],
		totalPrice: '69.00'
	},
	{
		orderType: "shopping",
		shopName: '小米官方旗舰店',
		statusType: 'wait_send',
		statusDesc: '预计明天送达',
		shopType: 'taobao',
		goodsList: [
			{
				image: '',
				title: 'Xiaomi/小米 14 徕卡光学镜头 骁龙8Gen3 澎湃OS 小米手机',
				specs: '颜色分类: 黑色; 内存容量: 16GB+512GB',
				price: '4599.00',
				count: 1,
				tags: ['正品保障', '顺丰包邮']
			}
		],
		totalPrice: '4599.00'
	},
	{
		orderType: "shopping",
		shopName: 'NIKE官方旗舰店',
		statusType: 'wait_recv',
		statusDesc: '您已在重庆九龙坡区哈哈哈完成取件，...',
		isSignFor: true,
		shopType: 'taobao',
		goodsList: [
			{
				image: '',
				title: 'Nike耐克官方AIR FORCE 1 07空军一号男鞋板鞋运动鞋CW2288',
				specs: '颜色分类: 纯白; 尺码: 42.5',
				price: '749.00',
				count: 1,
				tags: ['假一赔四']
			}
		],
		totalPrice: '749.00'
	},
	{
		orderType: "shopping",
		shopName: 'NIKE官方旗舰店',
		statusType: 'wait_recv',
		isSignFor: false,
		statusDesc: "平台支持退货",
		shopType: 'taobao',
		goodsList: [
			{
				image: '',
				title: 'Nike耐克官方AIR FORCE 1 07空军一号男鞋板鞋运动鞋CW2288',
				specs: '颜色分类: 纯白; 尺码: 42.5',
				price: '749.00',
				count: 1,
				tags: ['假一赔四']
			}
		],
		totalPrice: '749.00'
	},
	{
		orderType: "shopping",
		shopName: '三只松鼠旗舰店',
		statusType: 'success',
		shopType: 'taobao',
		goodsList: [
			{
				image: '',
				title: '三只松鼠 坚果大礼包 每日坚果 送礼佳品 1498g',
				specs: '颜色分类: 坚果礼盒1498g',
				price: '128.00',
				count: 2,
				tags: ['过敏包退']
			}
		],
		totalPrice: '256.00'
	},
	{
		orderType: "shopping",
		shopName: 'Apple Store 官方旗舰店',
		statusType: 'closed',
		shopType: 'tianmao',
		goodsList: [
			{
				image: '',
				title: 'Apple iPhone 15 Pro (A3104) 256GB 原色钛金属 5G手机',
				specs: '颜色分类: 原色钛金属; 内存容量: 256GB',
				price: '8999.00',
				count: 1,
				tags: []
			}
		],
		totalPrice: '8999.00'
	},
	{
		orderType: "shopping",
		shopName: '优衣库官方旗舰店',
		statusType: 'refunding',
		statusDesc: '平台支持退款',
		shopType: 'taobao',
		goodsList: [
			{
				image: '',
				title: 'UNIQLO 优衣库 男装/女装 摇粒绒拉链运动开衫(长袖) 463351',
				specs: '颜色分类: 藏青色; 尺码: L',
				price: '199.00',
				count: 1,
				tags: ['极速退款'],
				refundStatus: '退款成功'
			}
		],
		totalPrice: '199.00'
	},
	{
		orderType: "waimai",
		shopName: '美团外卖-麦当劳',
		statusType: 'success',
		statusDesc: '订单已完成',
		shopType: 'taobao',
		goodsList: [
			{
				image: '',
				title: '麦辣鸡腿堡套餐',
				specs: '默认',
				price: '32.00',
				count: 1,
				tags: []
			}
		],
		totalPrice: '32.00'
	},
	{
		orderType: "waimai",
		shopName: '饿了么-星巴克',
		statusType: 'wait_send',
		statusDesc: '商家准备中',
		shopType: 'taobao',
		goodsList: [
			{
				image: '',
				title: '拿铁咖啡',
				specs: '大杯 / 热',
				price: '28.00',
				count: 1,
				tags: []
			}
		],
		totalPrice: '28.00'
	},
	{
		orderType: "waimai",
		shopName: '淘鲜达-盒马鲜生',
		statusType: 'success',
		statusDesc: '订单已完成',
		shopType: 'taobao',
		goodsList: [
			{
				image: '',
				title: '进口智利车厘子 500g',
				specs: 'JJ级',
				price: '59.00',
				count: 1,
				tags: ['一小时送达']
			}
		],
		totalPrice: '59.00'
	}
]);

const displayList = computed(() => {
	let list = mockList.value;

	// 1. 一级 Tab 过滤 (orderType)
	if (currentTab.value === 1) { // 购物
		list = list.filter(item => item.orderType === 'shopping');
	} else if (currentTab.value === 2) { // 闪购
		list = list.filter(item => item.orderType === 'waimai');
	}

	// 2. 二级分类过滤 (currentFilter)
	if (currentFilter.value > 0) {
		const filterName = filterList.value[currentFilter.value]?.name;

		// 统一定义状态映射
		const statusMap = {
			'待付款': ['wait_pay'],
			'待发货': ['wait_send'],
			'待收货': ['wait_recv'],
			'退款/售后': ['refunding'],
			'已关闭': ['closed'],
			'待评价': ['success'] // 闪购下 success 状态代表已送达可评价
		};

		const targetStatus = statusMap[filterName];
		if (targetStatus) {
			list = list.filter(item => targetStatus.includes(item.statusType));
		}
	}

	return list;
});

const currentFilter = ref(0);
const filterList = ref([
	{ name: '全部' },
	{ name: '待付款' },
	{ name: '待发货' },
	{ name: '待收货' },
	{ name: '退款/售后' },
	{ name: '已关闭' }
]);

const currentTab = ref(0);
const tabList = ref([
	{ name: '全部订单' },
	{ name: '购物' },
	{ name: '闪购', icon: '/static/image/shopping/taobao/waimai.png' },
	{ name: '飞猪', icon: '/static/image/shopping/taobao/lvxing.png', disabled: true }
]);

/**
 * 切换tab
 * @param index 
 */
const switchTab = (index) => {
	if (tabList.value[index].disabled) return;
	currentTab.value = index;
	// 重置筛选为“全部”
	currentFilter.value = 0;
	// 动态更新筛选项
	updateFilterList();
};

/**
 * 动态更新筛选项
 */
const updateFilterList = () => {
	let sourceList = [];
	// 根据tab切换不同的筛选项数据
	switch (currentTab.value) {
		case 0:
			sourceList = ["全部", "待付款", "待发货", "待收货", "退款/售后", "已关闭"];
			break;
		case 1:
			sourceList = ["全部", "待付款", "待发货", "待收货", "退款/售后", "已关闭"];
			break;
		case 2:
			sourceList = ["全部", "待付款", "待发货", "待收货", "待评价", "已关闭"];
			break;
		case 3:
			sourceList = ["全部", "全部行程", "已完成", "退款/售后"];
			break;
	}
	filterList.value = sourceList.map((name, index) => ({
		name,
		disabled: index === 2 && currentTab.value === 1 // 示例：只有待发货可以被禁用
	}));
};

/**
 * 切换筛选
 * @param index 索引
 */
const switchFilter = (index) => {
	if (filterList.value[index].disabled) return;
	if (currentFilter.value === index) {
		currentFilter.value = 0;
	} else {
		currentFilter.value = index;
	}
};


</script>

<style lang="less" scoped>
.page-container {
	height: 100vh;
	overflow: hidden;
}

.top-fixed {
	background-color: #ffffff;

	::v-deep .uni-navbar__header-btns {
		width: auto !important;
	}

	::v-deep .uni-navbar__header-container {
		padding: 0 14rpx;
		padding-left: 34rpx;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.search-box {
		background-color: #F1F5F8;
		padding: 0 18rpx;
		width: 100%;
		border-radius: 16rpx;

		.search-icon {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}

		.input {
			width: 100%;
			height: 72rpx;
			font-size: 26rpx;

			::v-deep .input-placeholder {
				color: #7E8C9D;
			}
		}
	}

	.right-box {
		.item {
			margin: 0 14rpx;

			.icon {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				font-size: 20rpx;
				color: #1A1A1A;
				line-height: 20rpx;
				margin-top: 4rpx;
			}
		}
	}

	.tab-list {
		display: flex;
		align-items: center;
		padding: 16rpx 36rpx 10rpx;

		.tab-item {
			display: flex;
			align-items: center;
			margin-right: 58rpx;

			.title {
				position: relative;
				font-size: 30rpx;
				color: #00032A;
				font-weight: 500;
				line-height: 16px !important;
			}

			&.active {
				display: flex;
				justify-content: center;
				align-items: center;

				.title {
					color: #EF7518;
				}
			}

			.line {
				position: absolute;
				bottom: -12rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 22rpx;
				height: 4rpx;
				background-color: #EF7518;
				border-radius: 4rpx;
			}

			.badge-icon {
				margin-left: 6rpx;
				width: 52rpx;
				height: 14px;

				&.android-m-top {
					margin-top: -3rpx;
				}
			}
		}
	}

	.filter-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		padding: 0 22rpx 0 30rpx;
		margin-top: 28rpx;
		padding-bottom: 16rpx;

		.filter-scroll {
			flex: 1;
			width: 0;
			white-space: nowrap;

			.filter-list {
				padding-right: 24rpx;
			}
		}

		.position-l {
			position: absolute;
			left: 0;
			padding-left: 30rpx;
			background-color: #ffffff;
			z-index: 1;

			.filter-item {
				margin-right: 10rpx;
			}
		}

		.filter-item {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			vertical-align: middle;
			height: 56rpx;
			padding: 0 22rpx;
			background-color: #F1F4F9;
			border-radius: 12rpx;
			margin-right: 16rpx;
			border: 2rpx solid transparent;
			box-sizing: border-box;

			.text {
				font-size: 26rpx;
				line-height: 26rpx;
				color: #00032A;
			}

			.close-icon {
				font-size: 18px;
				color: #E40C24;
				margin-top: -4rpx;
				line-height: 14px;
				margin-left: 6rpx;
				font-weight: 400;
			}

			&.active {
				background-color: #FFEEE6;

				.text {
					color: #EF7518;
				}
			}

			// &.disabled {
			// 	background-color: #F8F8F8;
			// 	border-color: transparent;

			// 	.text {
			// 		color: #CCCCCC;
			// 	}
			// }
		}
	}
}

.shangou-tips {
	padding: 28rpx 22rpx 36rpx 32rpx;
	background-color: #ffffff;

	.left {
		height: 28rpx;

		text {
			font-size: 26rpx;
			line-height: 28rpx;
			color: #00032A;
			font-weight: 500;
		}
	}

	.right {
		color: #5E6367;
		font-size: 26rpx;
		line-height: 28rpx;

		text {
			margin-right: 10rpx;
		}
	}
}
</style>
<style>
@import '@/common/main.css';
</style>