<template>
  <view class="container">
    <view class="tabs">
      <view
        v-for="(item, index) in categoryList"
        :key="index"
        :class="['tabItem', selectedTab === index ? 'active2' : '']"
        @click="selectTab(index, item)"
      >
        {{ item.category_name }}
      </view>
    </view>

    <view class="content">
      <view v-for="(category, catIndex) in categoryList" :key="catIndex">
        <view v-if="selectedTab === catIndex">
          <view v-for="(item, index) in orderData" :key="index">
            <view class="contentList" @click="toDetails">
              <!-- 订单头部信息 -->
              <view class="order-header">
                <text>提交订单：{{ item.createTime }}</text>
                <text class="status">{{ item.status }}</text>
              </view>

              <!-- 商品列表 -->
              <view class="goods-list">
                <view
                  v-for="(goods, goodsIndex) in item.goodsList"
                  :key="goodsIndex"
                  class="goods-item"
                >
                  <image :src="goods.image" class="goods-img"></image>
                </view>
              </view>

              <!-- 订单底部信息 -->
              <view class="order-footer">
                <view class="order-footer-text"
                  >共{{ item.totalCount }}件商品，共计
                  <text> {{ item.totalPrice }}</text>
                </view>
                <view class="btn-group">
                  <button class="cancel-btn" @click="cancelOrder">
                    取消订单
                  </button>
                  <button class="pay-btn" @click="goToPay">立即支付</button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { picUrl, NavgateTo } from '../../../utils';

export default {
  data() {
    return {
      categoryList: [
        { category_name: "全部" },
        { category_name: "待付款" },
        { category_name: "待发货" },
        { category_name: "配送中" },
        { category_name: "已完成" },
      ],
      selectedTab: 0,
      orderData: [
        {
          createTime: "2025-07-15 23:23:23",
          status: "待付款",
          goodsList: [
            { image: "http://localhost:8080/order_index1.png" },
            { image: "http://localhost:8080/order_index2.png" },
            { image: "http://localhost:8080/order_index3.png" },
            { image: "http://localhost:8080/order_index4.png" },
            { image: "http://localhost:8080/order_index5.png" },
          ],
          totalCount: 1,
          totalPrice: "¥4704.00",
        },
        {
          createTime: "2025-07-15 23:23:23",
          status: "待发货",
          goodsList: [
            { image: "http://localhost:8080/order_index1.png" },
            { image: "http://localhost:8080/order_index2.png" },
            { image: "http://localhost:8080/order_index3.png" },
            { image: "http://localhost:8080/order_index4.png" },
            { image: "http://localhost:8080/order_index5.png" },
          ],
          totalCount: 2,
          totalPrice: "¥4704.00",
        },
        {
          createTime: "2025-07-15 23:23:23",
          status: "已取消",
          goodsList: [
            { image: "http://localhost:8080/order_index1.png" },
            { image: "http://localhost:8080/order_index2.png" },
            { image: "http://localhost:8080/order_index3.png" },
            { image: "http://localhost:8080/order_index4.png" },
            { image: "http://localhost:8080/order_index5.png" },
          ],
          totalCount: 3,
          totalPrice: "¥4704.00",
        },
      ],
    };
  },
  methods: {
    selectTab(index, item) {
      this.selectedTab = index;
    },
    cancelOrder() {
      // 取消订单逻辑
      uni.showModal({
        title: "提示",
        content: "确定要取消订单吗？",
        success: (res) => {
          if (res.confirm) {
            // 调用取消订单API
          }
        },
      });
    },
    goToPay() {
      console.log("🚀 ~ goToPay ~ goToPay:", "去支付...");
    },
    toDetails() {
      NavgateTo("/packages/myOrders/orderDetails/index");
    },
  },
};
</script>
<style>
@import url("./index.css");
</style>