<template>
	<view class="flex-row relative page">
		<view class="flex-row justify-center items-center section_2 pos">
			<image class="image"
				src="https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=49977e5fbfb65cc3b62ce79b9d6705a2.png" />
			<text class="font text ml-4">搜索订单</text>
		</view>
		<view class="flex-col section_44">
			<view class="flex-row justify-between self-stretch groupp">
				<view class="font_22" :class="{ active: orderStatus === '全部', selected: isSelected('全部') }"
					@click="changeTab('全部')">
					全部
				</view>
				<view class="font_22" :class="{ active: orderStatus === '待支付', selected: isSelected('待支付') }"
					@click="changeTab('待支付')">
					待支付
				</view>
				<view class="font_22" :class="{ active: orderStatus === '待发货', selected: isSelected('待发货') }"
					@click="changeTab('待发货')">
					待发货
				</view>
				<view class="font_22" :class="{ active: orderStatus === '已发货', selected: isSelected('已发货') }"
					@click="changeTab('已发货')">
					已发货
				</view>
				<view class="font_22" :class="{ active: orderStatus === '已退款', selected: isSelected('已退款') }"
					@click="changeTab('已退款')">
					售后/退款
				</view>
			</view>


			<view class="flex-col pos_8">
				<view class="flex-col section_4 list-item_1 mt-14" v-for="(order, index) in Status.displayedOrders"
					:key="order.id" @click="goToText(index)">
					<view class="flex-col">
						<!-- <text class="self-end font_3 text_5">交易关闭</text> -->
						<view class="flex-row items-center self-stretch mt-2">
							<text class="font_4">订单编号：</text>
							<text class="font_5 ml-5">{{order.orderNumber}}</text>
						</view>
					</view>
					<view class="flex-col group">
						<view class="flex-row justify-between list-item group_3" v-for="item in order.orderItemList"
							:key="item.id">
							<view class="flex-row">
								<image class="image_2" :src="item.goodSnapshot.goodImg" />
								<view class="flex-col self-start group_1 ml-18">
									<view class="flex-row self-stretch">
										<text class="font">{{ item.goodSnapshot.name }}</text>
										<text class="font text_10">【{{ item.goodSnapshot.type }}】</text>
									</view>
									<text class="self-start font_7 text_12 mt-36">×1</text>
								</view>
							</view>
							<view class="flex-row items-center self-start group_2">
								{{ item.goodSnapshot.price }}
							</view>
						</view>
					</view>
					<view class="divider view_1"></view>
					<view class="flex-row justify-end group_5">
						<view v-if="order.orderStatus==='待支付'" class="font text_18">去支付</view>
						<view v-if="order.orderStatus==='待发货'" class="font text_18">取消订单</view>
						<view v-if="order.orderStatus==='已发货'" class="font text_18">确认收货</view>
						<view v-if="order.orderStatus==='已退款'" class="font text_18">售后详情</view>
					</view>
					<view class="flex-row justify-end items-center view">
						<text class="font_9 text_16">总 金额：</text>
						<image class="image_4 image_5"
							src="https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=f10bd62afae3562e9d76103ff6fb0f84.png" />
						<text class="font_8 text_17">{{order.totalAmount}}</text>
					</view>
					<!-- <view class="flex-row justify-end group_7"> -->
						<!-- <view class="flex-col justify-start items-center text-wrapper"><text
								class="font text_18">删除记录</text></view>
						<view class="flex-col justify-start items-center text-wrapper_2 ml-14"  v-if="order.orderStatus==='待支付'">
							<text class="font_3">去支付</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper_2 ml-14"  v-if="order.orderStatus==='待发货'">
							<text class="font_3">取消订单</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper_2 ml-14"  v-if="order.orderStatus==='已发货'">
							<text class="font_3">确认收货</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper_2 ml-14"  v-if="order.orderStatus==='已退款'">
							<text class="font_3">已退款</text>
						</view> -->
				<!-- 	</view> -->
					<view class="flex-row justify-end group_7" v-if="order.orderStatus==='待支付'">
						<view class="flex-col justify-start items-center text-wrapper"><text
								class="font text_18">取消订单</text></view>
						<view class="flex-col justify-start items-center text-wrapper_2 ml-14">
							<text class="font_3">去支付</text>
						</view>		
					</view>
					<view class="flex-row justify-end group_7" v-if="order.orderStatus==='待发货'">
						<view class="flex-col justify-start items-center text-wrapper_2 ml-14">
							<text class="font_3">联系客服</text>
						</view>		
					</view>
					<view class="flex-row justify-end group_7" v-if="order.orderStatus==='已发货'">
						<view class="flex-col justify-start items-center text-wrapper"><text
								class="font text_18">取消订单</text></view>
						<view class="flex-col justify-start items-center text-wrapper_2 ml-14">
							<text class="font_3">查看物流</text>
						</view>		
					</view>
					<view class="flex-row justify-end group_7" v-if="order.orderStatus==='已退款'">
						<view class="flex-col justify-start items-center text-wrapper"><text
								class="font text_18">删除订单</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		toRaw
	} from 'vue';
	import {
		baseUrl,
		testUrl,
		suiUrl
	} from '@/api/request';
	import { onLoad } from "@dcloudio/uni-app";
	const Status = ref({
		orderStatus: '全部',
		orders: [],
		displayedOrders: [],
	})
	const orderStatus = ''
	const currentColor = ref(0);
	const isSelected = (tab) => Status.value.orderStatus === tab
 onMounted(async () => {
        await Getorder()
        if (Status.value.orderStatus === '全部') {
            Status.value.displayedOrders = Status.value.orders;
        } else {
            Status.value.displayedOrders = Status.value.orders.filter((order) => {
                switch (Status.value.orderStatus) {
                    case '待支付':
                        return order.orderStatus === '待支付'
                    case '待发货':
                        return order.orderStatus === '待发货'
                    case '已发货':
                        return order.orderStatus === '已发货'
                    case '已退款':
                        return order.orderStatus === '已退款'
                    default:
                        return false;
                }
            })
        }
    })

	const userInfo = wx.getStorageSync('userInfo')
	const Getorder = async () => {
		const res = await uni.request({
			url: baseUrl + '/order/list',
			method: 'POST',
			header: {
				cookie: wx.getStorageSync('cookie')
			},
			data: {
				id: userInfo.id,
			},
		})
		if (res.data.code === 1) {
	
			Status.value.orders = res.data.data
		} else {
			console.log('没拿到用户数据')
		}
	}
	const zt = ref({
		tab:''
	})
	onLoad((options)=>{
		zt.value.tab = JSON.parse(options.zt)
		changeTab(zt.value.tab)
	})
	const changeTab = (tab) => {
		if (tab === '全部') {
			Status.value.displayedOrders = Status.value.orders;
			Status.value.orderStatus = '全部';
		} else {
			Status.value.displayedOrders = Status.value.orders.filter((order) => {
				switch (tab) {
					case '待支付':
						return order.orderStatus === '待支付';
					case '待发货':
						return order.orderStatus === '待发货';
					case '已发货':
						return order.orderStatus === '已发货';
					case '已退款':
						return order.orderStatus === '已退款';
					default:
						return false;
				}
			})
			Status.value.orderStatus = tab
		}
	}  
	const goToText = (index) => {
		uni.navigateTo({
			// url: '../../../pages/mine/OrderDetails/OrderDetails?info=' + JSON.stringify(Status.value.displayedOrders[index]),
			url: '../../../pages/order/product-waitpay/product-waitpay?info' + JSON.stringify(Status.value.displayedOrders[index]) 
		})
	}
</script>

<style lang="scss" scoped>
	.groupp {
		padding: 22.5rpx 0 18.75rpx;
	}

	.section_44 {
		padding-left: 33.75rpx;
		padding-right: 30rpx;
		width: 100%;
		height: 120rpx;
		margin-top: 80rpx;
	}

	.ml-5 {
		margin-left: 9.38rpx;
	}

	.font_22.selected {
		position: relative;
	}

	.font_22.selected::after {
		content: '';
		position: absolute;
		bottom: -5px; // 调整线条距离底部的距离
		left: 0;
		right: 0;
		height: 2px; // 调整线条的粗细
		background-color: #f6aaa4; // 调整线条颜色
		transition: all 0.3s ease; // 添加过渡效果
	}

	.page {
		padding: 46.88rpx 22.5rpx 401.25rpx;
		background-color: #ffffff;
		background-image: url('https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=4ba8389730acda4f67d46a7370efec60.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 2073.75rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_2 {
		padding: 9.38rpx 0;
		background-color: #ffffff;
		border-radius: 75rpx;
	}

	.pos {
		position: absolute;
		left: 35.63rpx;
		right: 35.63rpx;
		top: 46.88rpx;
	}

	.image {
		width: 37.5rpx;
		height: 37.5rpx;
	}

	.font {
		font-size: 26.25rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 25.54rpx;
		color: #323232;
	}

	.text {
		color: #c0c0c0;
		line-height: 25.84rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 28.84rpx;
		color: #323232;
	}

	.font_22 {
		font-size: 30rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 27.81rpx;
		color: #323232;
	}

	.text_2 {
		line-height: 28.48rpx;
	}

	.pos_2 {
		position: absolute;
		left: 33.99rpx;
		top: 146.36rpx;
	}

	.text_3 {
		line-height: 28.24rpx;
	}

	.pos_3 {
		position: absolute;
		left: 147.66rpx;
		top: 146.14rpx;
	}

	.pos_4 {
		position: absolute;
		left: 295.78rpx;
		top: 145.78rpx;
	}

	.pos_5 {
		position: absolute;
		right: 214.22rpx;
		top: 145.78rpx;
	}

	.text_4 {
		line-height: 29.53rpx;
	}

	.pos_6 {
		position: absolute;
		right: 34.22rpx;
		top: 147.07rpx;
	}

	.section_3 {
		background-color: #ffaaa5;
		width: 73.13rpx;
		height: 5.63rpx;
	}

	.pos_7 {
		position: absolute;
		left: 30rpx;
		top: 182.81rpx;
	}

	.pos_8 {
		position: absolute;
		left: 22.5rpx;
		right: 30rpx;
		top: 217.5rpx;
	}

	.section_4 {
		padding: 34.61rpx 15rpx 31.88rpx;
		background-color: #ffffff;
		border-radius: 31.88rpx;
	}

	.list-item_1:first-child {
		margin-top: 0;
	}

	.font_3 {
		font-size: 26.25rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 25.54rpx;
		color: #ffaaa5;
	}

	.text_5 {
		margin-right: 8.08rpx;
		line-height: 24.62rpx;
	}

	.font_4 {
		font-size: 22.5rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 22.14rpx;
		color: #818181;
	}

	.font_5 {
		font-size: 22.5rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 15.04rpx;
		color: #818181;
	}

	.group {
		margin-top: 29.21rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.image_2 {
		border-radius: 9.38rpx;
		width: 146.25rpx;
		height: 144.38rpx;
	}

	.group_1 {
		margin-top: 2.33rpx;
	}

	.text_10 {
		line-height: 25.01rpx;
	}

	.font_7 {
		font-size: 26.25rpx;
		font-family: Open Sans;
		line-height: 19.29rpx;
		color: #323232;
	}

	.text_12 {
		margin-left: 5.34rpx;
		line-height: 18.73rpx;
	}

	.group_2 {
		margin-right: 8.23rpx;
		margin-top: 89.19rpx;
	}

	.font_6 {
		font-size: 33.75rpx;
		font-family: Open Sans;
		line-height: 25.54rpx;
		font-weight: 600;
		color: #323232;
	}

	.text_11 {
		margin-left: 25.03rpx;
		line-height: 24.88rpx;
	}

	.image_3 {
		margin-left: -90.66rpx;
		width: 30rpx;
		height: 26.25rpx;
	}

	.font_8 {
		font-size: 26.25rpx;
		font-family: Open Sans;
		line-height: 19.29rpx;
		font-weight: 600;
		color: #323232;
	}

	.text_13 {
		margin-left: 61.14rpx;
	}

	.divider {
		background-color: #dad2d2;
		height: 0.81rpx;
	}

	.view_1 {
		margin: 30.43rpx 28.13rpx 0 39.38rpx;
	}

	.group_5 {
		margin-top: 49.41rpx;
		padding: 0 21.21rpx;
		color: #ffaaa5;
	}

	.font_9 {
		font-size: 26.25rpx;
		font-family: FZSongKeBenXiuKaiS-R-GB;
		line-height: 25.54rpx;
		color: #000000;
	}

	.text_14 {
		line-height: 24.62rpx;
	}

	.text_15 {
		margin-top: 2.17rpx;
		line-height: 24rpx;
	}

	.view {
		margin-top: 19.93rpx;
		padding: 0 19.54rpx;
	}

	.text_16 {
		margin-right: 6.99rpx;
		line-height: 24.3rpx;
	}

	.image_4 {
		width: 31.88rpx;
		height: 30rpx;
	}

	.image_5 {
		margin-right: -8.29rpx;
	}

	.text_17 {
		color: #ffaaa5;
		line-height: 19.39rpx;
	}

	.group_7 {
		margin-top: 52.5rpx;
		padding: 0 9.38rpx;
	}

	.text-wrapper {
		padding: 13.86rpx 0 13.52rpx;
		background-color: #fffef8;
		border-radius: 75rpx;
		width: 155.63rpx;
		height: 56.25rpx;
		border: solid 1.88rpx #cbcbcb;
	}

	.text_18 {
		line-height: 25.13rpx;
	}

	.text-wrapper_2 {
		padding: 13.46rpx 0 13.5rpx;
		background-color: #fffef8;
		border-radius: 75rpx;
		width: 155.63rpx;
		height: 56.25rpx;
		border: solid 1.88rpx #ffaaa5;
	}

	.group_3 {
		margin-top: 15rpx;
	}

	@import url("../../../common/css/global.css");
</style>