<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useOrderStore } from '@/pinia/stores/order'
import { useWxStoreOutside } from '@/pinia/stores/wx'

const activeTab = ref(0);

const router = useRouter()
const orderStore = useOrderStore()
const wxStore = useWxStoreOutside();

const hasReturn = ref<number>(0);

// 处理标签页切换
const handleTabChange = (tabIndex: number) => {
  hasReturn.value = tabIndex;
  orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value);
}

onMounted(() => {
  orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value)
})

onBeforeRouteUpdate(() => {
  orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value)
})

const statusMap: Record<number, string> = {
  1: '待付款',
  2: '已付款',
  3: '已发货',
  4: '已完成',
  5: '已取消'
}

const getStatusText = (status: number) => {
  return statusMap[status] || '未知状态'
}
</script>

<template>
  <div class="order-list">
    <!-- 状态切换标签页 -->
    <van-tabs v-model:active="activeTab" @change="handleTabChange" style="margin-bottom: 8px;">
      <van-tab title="未退还"></van-tab>
      <van-tab title="已退还"></van-tab>
    </van-tabs>
    
    <div v-if="orderStore.orders.length === 0" class="empty">
      暂无订单
    </div>
    
    <div v-else class="orders">
      <div v-for="order in orderStore.orders" :key="order.orderId" class="order-item">
        <div class="order-header">
          <span>订单号: {{ order.orderId }}</span>
          <van-button
            type="primary"
            size="small"
            @click="router.push('/order/' + order.orderId)"
            class="detail-btn"
          >
            订单详情
          </van-button>
        </div>
        
        <van-cell-group class="goods-list">
          <van-cell
            v-for="(goods, index) in order.goodsList.slice(0,1)"
            :key="goods.orderGoods.orderGoodsId"
            class="goods-item"
          >
            <template #icon>
              <van-image 
                :src="goods.goodsInfo?.coverImg"
                width="80"
                height="80"
                class="product-image"
              />
            </template>
            <div class="product-info">
              <div class="product-name van-ellipsis">
                {{ goods.goodsInfo?.goodsName }}
              </div>
              <div class="product-meta">
                <span class="status">状态: {{ getStatusText(order.status) }}</span>
                <span class="total">总价: ¥{{ order.totalAmount }}</span>
              </div>
            </div>
          </van-cell>
          <van-cell v-if="order.goodsList.length > 1" class="more-goods">
            <div class="van-ellipsis">等{{ order.goodsList.length }}个商品</div>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<style scoped>
.order-list {
  padding: 8px;
}

.empty {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.order-item {
  margin-bottom: 8px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px 5px 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
}

.goods-list {
  padding: 10px;
}

.goods-item {
  display: flex;
  padding: 10px 0;
}

goods-item:last-child {
  border-bottom: none;
}

goods-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
}

goods-info {
  flex: 1;
}
.detail-btn {
  margin-left: 10px;
  padding: 0 12px;
  height: 28px;
  line-height: 28px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.status {
  color: #1989fa;
}

.total {
  font-weight: bold;
}
</style>