<template>
	<view class="top-fixed">
		<nav-bar title="京东" bgColor="#F0F4F9">
			<template v-slot:center>
				<view class="search-box">
					<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png" mode="aspectFit">
					</image>
					<input class="input" type="text" placeholder="搜索我的订单" disabled />
				</view>
			</template>
			<template v-slot:right>
				<view class="right-box">
					<image class="gift icon" src="/static/image/shopping/jingdong/gift.png" mode="aspectFit">
					</image>
					<image class="more icon" src="/static/image/shopping/jingdong/more.png" mode="aspectFit">
					</image>
				</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)">
				<text class="title">{{ item.name }}</text>
				<view class="line" v-if="currentTab === index"></view>
				<image v-if="item.icon" class="badge-icon" :src="item.icon" mode="heightFix"></image>
			</view>
		</view>
		<view class="filter-wrapper">
			<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 }" @click="switchFilter(index)">
						<text class="text">{{ item.name }}</text>
						<text class="close-icon" v-if="currentFilter === index">×</text>
					</view>
				</view>
			</scroll-view>
			<view class="filter-btn">
				<image class="filter-icon" src="/static/image/shopping/jingdong/shaixuan.png" mode="aspectFit"></image>
				<text class="filter-text">筛选</text>
			</view>
		</view>
	</view>
	<view class="content" :style="{ paddingTop: contentPaddingTop }">
		<shopping-card v-for="(item, index) in mockOrderList" :key="index" :item="item"></shopping-card>
	</view>
	<view class="bottom-fixed">
		<view class="bottom-item">
			<image class="like-icon" src="/static/image/shopping/jingdong/weinituijian.png" mode="aspectFit"></image>
			<text>为你推荐</text>
		</view>
		<view class="upload-screenshot-box">
			<view class="upload-screenshot-content">
				<image class="upload-screenshot" src="/static/image/common/upload-screenshot.png" mode="aspectFit">
				</image>
				<view class="upload-screenshot-text">长按替换截图</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';

const contentPaddingTop = ref('0px');
const instance = getCurrentInstance();

onMounted(() => {
	setTimeout(() => {
		const query = uni.createSelectorQuery().in(instance.proxy);
		query.select('.top-fixed').boundingClientRect(data => {
			if (data) {
				contentPaddingTop.value = data.height + 'px';
			}
		}).exec();
	}, 100);
});

const currentTab = ref(0);
const tabList = ref([
	{ name: '全部' },
	{ name: '购物' },
	{ name: '秒送', icon: '/static/image/shopping/jingdong/waimai.png' },
	{ name: '服务', icon: '/static/image/shopping/jingdong/jiazheng.png', disabled: true }
]);

const switchTab = (index) => {
	if (tabList.value[index].disabled) return;
	currentTab.value = index;
};

const currentFilter = ref(1);
const filterList = ref([
	{ name: '待付款' },
	{ name: '待收货' },
	{ name: '待使用' },
	{ name: '已完成' },
	{ name: '待评价' },
	{ name: '已取消' }
]);

const switchFilter = (index) => {
	currentFilter.value = index;
};

const mockOrderList = ref([
	{
		shopType: 'self',
		shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
		statusType: 'warning',
		statusDesc: '20小时11分钟',
		image: '/static/image/shopping/jingdong/product1.png',
		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
		tags: ['无理由退货政策'],
		price: '69.00',
		count: 1,
		promoType: 'text',
		promoHighlight: '白条支付券0.5元优惠券',
		buttons: [
			{ text: '取消订单', type: 'default' },
			{ text: '查看发票', type: 'default' },
			{ text: '修改订单', type: 'default' },
			{ text: '去支付', type: 'primary', badge: '减0.5元' }
		]
	},
	{
		shopType: 'none',
		shopName: '甜小南旗舰店',
		status: '正在出库',
		statusColor: 'red',
		trackingTitle: '仓库处理中',
		trackingDesc: '预计 3月12日24:00 前发货，3月15日 24:00 前送达',
		trackingTime: '2026-03-10 15:14:30',
		image: '/static/image/shopping/jingdong/product1.png',
		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
		tags: ['无理由退货政策'],
		price: '69.00',
		count: 1,
		promoType: 'plus',
		promoText: '告别凑单, 享免运优惠',
		buttons: [
			{ text: '查看发票', type: 'default' },
			{ text: '再次购买', type: 'default' },
			{ text: '申请退款', type: 'default' },
			{ text: '修改订单', type: 'default' }
		]
	},
	{
		shopType: 'self',
		shopName: '甜小南旗舰店',
		status: '完成',
		statusColor: 'gray',
		trackingTitle: '已签收',
		trackingDesc: '您的订单已签收，可对快递员的服务进行评价或打赏哦~',
		trackingTime: '2026-03-10 15:14:30',
		image: '/static/image/shopping/jingdong/product1.png',
		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
		tags: ['无理由退货政策'],
		price: '69.00',
		count: 1,
		promoType: 'plus',
		promoText: '告别凑单, 享免运优惠',
		hasMore: true,
		buttons: [
			{ text: '卖了换钱', type: 'default' },
			{ text: '退还/售后', type: 'default' },
			{ text: '再次购买', type: 'primary' }
		]
	},
	{
		shopType: 'jd',
		shopName: '甜小南旗舰店',
		status: '完成',
		statusColor: 'gray',
		image: '/static/image/shopping/jingdong/product1.png',
		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
		tags: ['无理由退货政策'],
		price: '1669.00',
		count: 1,
		hasMore: true,
		buttons: [
			{ text: '再次购买', type: 'default' },
			{ text: '申请退款', type: 'default' },
			{ text: '修改订单', type: 'default' }
		]
	},
	{
		shopType: 'self',
		shopName: '甜小南旗舰店',
		status: '已取消',
		statusColor: 'gray',
		image: '/static/image/shopping/jingdong/product1.png',
		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
		tags: ['无理由退货政策'],
		price: '1669.00',
		count: 1,
		buttons: [
			{ text: '再次购买', type: 'default' },
			{ text: '申请退款', type: 'default' },
			{ text: '修改订单', type: 'primary' }
		]
	}
]);
</script>

<style lang="less">
.top-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #F0F4F9;
}

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

::v-deep .uni-navbar__header-container {
	padding-right: 0 !important;
}

.search-box {
	width: 100%;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 0 16rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	border: 1rpx solid #E5E5E5;

	.search-icon {
		width: 36rpx;
		height: 36rpx;
		flex-shrink: 0;
		margin-right: 14rpx;
	}


	::v-deep .input-placeholder {
		font-size: 26rpx;
		line-height: 26rpx;
		color: #CCCCCC;
	}
}

.right-box {
	display: flex;
	align-items: center;

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 22rpx;
	}
}

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

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

		.title {
			font-size: 28rpx;
			color: #1A1A1A;
			font-weight: 700;
			line-height: 28rpx;
		}

		&.active {
			.title {
				font-size: 28rpx;
				color: #F51919;
				font-weight: 700;
			}
		}

		.line {
			position: absolute;
			bottom: -10rpx;
			left: -5%;
			transform: translateX(50%);
			width: 30rpx;
			height: 4rpx;
			background-color: #F51919;
			border-radius: 4rpx;
		}

		.badge-icon {
			position: relative;
			top: 0;
			margin-left: 2rpx;
			height: 32rpx;
		}
	}
}

.filter-wrapper {
	display: flex;
	align-items: center;
	height: 64rpx;
	padding: 0 0 0 24rpx;
	background-color: #F0F4F9;
	margin-top: 10rpx;
	margin-bottom: 26rpx;

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

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

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

			.text {
				font-size: 26rpx;
				color: #1A1A1A;
			}

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

			&.active {
				background-color: #FFECF5;
				border-color: #E40C24;

				.text {
					color: #E40C24;
				}
			}
		}
	}

	.filter-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 82rpx;
		height: 64rpx;
		background-color: #F0F4F9;
		position: relative;
		z-index: 10;
		box-shadow: -10rpx 0 10rpx -10rpx rgba(0, 0, 0, 0.1);

		.filter-icon {
			width: 28rpx;
			height: 28rpx;
			margin-bottom: 4rpx;
		}

		.filter-text {
			font-size: 20rpx;
			line-height: 20rpx;
			color: #575757;
		}
	}
}

.content {
	padding: 0 20rpx;
}

.bottom-item {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1A1A1A;
	font-size: 28rpx;
	line-height: 26rpx;
	font-weight: 500;
	margin-bottom: 22rpx;
}

.like-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}

.upload-screenshot-box {
	width: 100%;
	height: 540rpx;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;

	.upload-screenshot {
		width: 92rpx;
		height: 92rpx;
	}
}
</style>