<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的订单',
  },
}
</route>

<template>
  <view class="bg-white min-h-screen">
    <view class="space-y-4">
      <wd-sticky-box>
        <!-- 订单选择 -->
        <view class="sticky-box-content w-100vw">
          <wd-search
            placeholder="请输入订单号"
            cancel-txt="搜索"
            @blur="blur"
            @search="search"
            @clear="clear"
            @change="change"
          />
        </view>
      </wd-sticky-box>

      <!-- 订单列表 -->
      <view class="sticky-box-content w-100vw" v-if="orderListShow.length">
        <view class="order-list">
          <view
            class="order-item"
            v-for="item in orderListShow"
            :key="item.ordersid"
            @click="handleClick(item)"
          >
            <view class="order-header">
              <text class="product-name">{{ item.ordersproductname }}</text>
              <wd-tag :type="getOrderStatusType(item.ordersorderstatus)" custom-class="status-tag">
                {{ getOrderStatus(item.ordersorderstatus) }}
              </wd-tag>
            </view>
            <view class="order-content">
              <text class="order-info">订单号: {{ item.ordersnumber }}</text>
              <text class="order-info">下单时间: {{ item.ordersorderdate }}</text>
              <view class="price-row">
                <text class="order-info">订单总金额:</text>
                <text class="price-text">¥{{ Number(item.orderstotalprice).toFixed(2) }}</text>
              </view>
            </view>
            <view class="order-footer">
              <wd-icon name="arrow-right" />
            </view>
          </view>
        </view>
      </view>
      <view class="sticky-box-content w-100vw" v-else>
        <wd-status-tip image="content" tip="暂无内容" />
      </view>

      <!-- loading -->
      <wd-overlay :show="overlayShow">
        <view class="wrapper w-full h-full flex items-center justify-center">
          <wd-loading />
        </view>
      </wd-overlay>

      <!-- 回到首页 -->
      <view class="sticky-box-content w-full box-border px-2 pb-2">
        <wd-button type="primary" block @click="handleBack">回到首页</wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useOrderStore } from '@/store/order'
import { useAppStore } from '@/store/app'
import { useThrottleFn } from '@vueuse/core'

const appStore = useAppStore()
const orderStore = useOrderStore()
const orderListAll = ref([])
const orderListShow = ref([])
const overlayShow = ref(false)

function blur(e: any) {
  const filters = orderListAll.value.filter((item: any) => item.ordersnumber.includes(e.value))
  orderListShow.value = filters
}

function search(e: any) {
  const filters = orderListAll.value.filter((item: any) => item.ordersnumber.includes(e.value))
  orderListShow.value = filters
}

function clear() {
  orderListShow.value = orderListAll.value
}

const handleChange = useThrottleFn(({ value }) => {
  const filters = orderListAll.value.filter((item: any) => item.ordersnumber.includes(value))
  orderListShow.value = filters
}, 500) // 500ms 的节流时间

function change(e: any) {
  handleChange(e)
}

// 获取订单状态
const getOrderStatus = (status: number) => {
  const statusMap = {
    0: '待审核',
    1: '已支付',
    2: '已完成',
  }
  return statusMap[status] || '未知状态'
}

// 获取订单状态对应的标签类型
// 待审核 (0): 黄色警告色 (warning)
// 已支付 (1): 绿色成功色 (success)
// 已完成 (2): 蓝色主要色 (primary)
// 未知状态: 红色危险色 (danger)
const getOrderStatusType = (status: number) => {
  const typeMap = {
    0: 'warning', // 待审核 - 黄色警告色
    1: 'success', // 已支付 - 绿色成功色
    2: 'primary', // 已完成 - 蓝色主要色
  }
  return typeMap[status] || 'danger' // 未知状态使用红色危险色
}

function handleClick(item: any) {
  uni.navigateTo({
    url: `/pages/order/detail?ordersid=${item.ordersid}`,
  })
}

function handleBack() {
  uni.switchTab({
    url: '/pages/index/index',
  })
}

onLoad((query) => {
  overlayShow.value = true
  orderStore
    .getOrderList(appStore.appInfo.userid)
    .then((res) => {
      orderListAll.value = res
      orderListShow.value = res
      overlayShow.value = false
    })
    .finally(() => {
      overlayShow.value = false
    })
})
</script>

<style lang="scss" scoped>
.order-list {
  padding: 0 12px;
}

.order-item {
  position: relative;
  padding: 12px;
  margin-bottom: 12px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid #f5f5f5;
}

.product-name {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.status-tag {
  flex-shrink: 0;
}

.order-content {
  padding: 8px 0;
}

.order-info {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.price-row {
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.price-text {
  font-size: 14px;
  font-weight: 500;
  color: #f56c6c;
}

.order-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  color: #999;
}
</style>
