<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<!-- 
			<view slot="top">

			</view> -->

			<!-- 订单列表 -->
			<wd-navbar title="订单" safeAreaInsetTop></wd-navbar>
			<!-- 顶部导航栏 -->
			<view class="nav-tabs">
				<!-- 订单状态：0 - 待付款，1 - 已完成，2 - 已取消,示例值(2) -->
				<view class="tab-item" :class="queryFrom.orderStatus === '' ? 'active' : ''" @click="changeStatus('')">全部</view>
				<view class="tab-item" :class="queryFrom.orderStatus === 0 ? 'active' : ''" @click="changeStatus(0)">待付款</view>
				<view class="tab-item" :class="queryFrom.orderStatus == 1 ? 'active' : ''" @click="changeStatus(1)">已完成</view>
				<view class="tab-item" :class="queryFrom.orderStatus == 2 ? 'active' : ''" @click="changeStatus(2)">已取消</view>
			</view>
			<view class="order-list">
				<!-- 订单项1 - 待付款 -->
				<view class="order-item" v-for="(item, index) in dataList" :key="index">
					<view class="order-header">
						<text class="order-id">{{ item.orderNo }}</text>
						<text class="order-status pending" v-if="item.orderStatus === 0">待付款</text>
						<text class="order-status completed" v-if="item.orderStatus == 1">已完成</text>
					</view>

					<view class="order-content">
						<image class="product-image" :src="item.goods.cover" mode="aspectFill"></image>
						<view class="product-info">
							<view class="product-name">
								<view>{{ item.goods.name }}</view>
							</view>
							<view class="product-spec">
								<view>{{ item.goods.specs }}</view>
								<view class="product-count">×{{ item.goodsNum }}</view>
							</view>
							<view class="product-price">
								<view style="font-size: 26rpx" v-if="item.deductionAmount">已抵扣金额：￥{{ item.deductionAmount }}</view>
								<view v-else></view>
								<text style="font-weight: bold">¥{{ item.payableAmount }}</text>
							</view>
						</view>
					</view>

					<view class="order-footer">
						<view class="order-time">{{ timeFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss') }}</view>
						<view class="order-actions">
							<!-- <view class="btn-cancel">取消订单</view> -->
							<!-- <view class="btn-pay">去支付</view> -->
							<view class="btn-buy-again" v-if="item.orderStatus == 1" @click="toGoods(item.goodsId)">再次购买</view>
						</view>
					</view>
				</view>

				<!-- <view class="order-item">
						<view class="order-header">
							<text class="order-id">GMZST202506040001</text>
							<text class="order-status completed">已完成</text>
						</view>
				
						<view class="order-content">
							<image class="product-image" src="/static/product.jpg" mode="aspectFill"></image>
							<view class="product-info">
								<view class="product-name">方愈苗药皮毒清软膏</view>
								<view class="product-spec">12支/箱</view>
							</view>
							<view class="product-count">×230000</view>
							<view class="product-price">¥50w</view>
						</view>
				
						<view class="order-footer">
							<view class="order-time">2025-10-09 19:43:57</view>
							<view class="order-actions">
								<view class="btn-reorder">再来一单</view>
							</view>
						</view>
					</view>
				
					<view class="order-item">
						<view class="order-header">
							<text class="order-id">GMZST202506040001</text>
							<text class="order-status cancelled">已取消</text>
						</view>
				
						<view class="order-content">
							<image class="product-image" src="/static/product.jpg" mode="aspectFill"></image>
							<view class="product-info">
								<view class="product-name">方愈苗药皮毒清软膏</view>
								<view class="product-spec">12支/箱</view>
							</view>
							<view class="product-count">×320000</view>
							<view class="product-price">¥10w</view>
						</view>
				
						<view class="order-footer">
							<view class="order-time">2025-10-09 19:43:57</view>
							<view class="order-actions">
							</view>
						</view>
					</view> -->
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
import api from '@/api/index';
import { ref } from 'vue';
import { timeFormat } from '@/utils/fun.js';
const paging = ref(null);
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([]);

const queryFrom = ref({
	orderType: 1,
	payStatus: '',
	orderStatus: ''
});

const changeStatus = (e) => {
	queryFrom.value.orderStatus = e;
	paging.value.reload();
};

const queryList = (pageNo, pageSize) => {
	api.orderPage({ pageNo, pageSize, ...queryFrom.value })
		.then((res: any) => {
			paging.value.complete(res.list);
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};

const toGoods = (e) => {
	uni.navigateTo({
		url: '/pages/goods/goods?id=' + e
	});
};
</script>

<style scoped>
.container {
	padding: 0;
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 导航标签样式 */
.nav-tabs {
	display: flex;
	/* justify-content: space-around; */
	background-color: #ffffff;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #eee;
}

.tab-item {
	font-size: 15px;
	color: #999;
	position: relative;
	padding: 0 10px;
	z-index: 9;
}

.tab-item.active {
	color: #333;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0rpx;
	right: 20rpx;
	width: 40rpx;
	height: 12rpx;
	background: #627c54;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	z-index: 5;
	opacity: 0.5;
}

/* 订单列表样式 */
.order-list {
	padding: 10px;
}

.order-item {
	background-color: #fff;
	margin-bottom: 36rpx;
	border-radius: 16rpx;
	padding: 36rpx;
}

.order-header {
	font-size: 28rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #eeeeee;
	padding-bottom: 24rpx;
	color: #232323;
}

.order-id {
	font-size: 14px;
	color: #333;
}

.order-status {
	font-size: 14px;
	font-weight: 500;
}

.pending {
	color: #ff5722;
}

.completed {
	color: #4caf50;
}

.cancelled {
	color: #f44336;
}

.order-content {
	display: flex;
	padding: 20rpx 0;
}

.product-image {
	width: 150rpx;
	height: 150rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
	background-color: #f0f0f0;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	color: #232323;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.product-spec {
	font-size: 28rpx;
	color: #666;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.product-count {
	font-size: 24rpx;
	color: #232323;
	text-align: right;
}

.product-price {
	font-size: 36rpx;
	color: #ff3d3d;
	/* font-weight: bold; */
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.order-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 0 0;
	border-top: 1rpx solid #f5f5f5;
}

.order-time {
	font-size: 24rpx;
	color: #232323;
}

.order-actions {
	display: flex;
	gap: 10px;
}

.btn-cancel,
.btn-pay,
.btn-reorder,
.btn-buy-again {
	width: 150rpx;
	height: 56rpx;
	border-radius: 28rpx;
	/* border: 1rpx solid #999999; */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
}

.btn-cancel {
	border: 1rpx solid #999999;
	color: #999;
}

.btn-pay {
	color: #ff6f00;
	border: 1rpx solid #ff6f00;
}

.btn-reorder {
	color: #ffffff;
	background-color: #458f3b;
	border: none;
}

.btn-buy-again {
	color: #ffffff;
	background-color: #f44336;
	border: none;
}

.btn-cancel:active,
.btn-pay:active,
.btn-reorder:active,
.btn-buy-again:active {
	opacity: 0.8;
}
</style>
