<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">
        <wd-cell-group>
          <wd-cell
            v-for="item in orderListShow"
            :key="item.ordersid"
            :title="`${item.ordersproductname}`"
            is-link
            @click="handleClick(item)"
            custom-class="product-cell"
          >
            <template #label>
              <p class="text-gray-500">订单号:{{ item.ordersnumber }}</p>
              <p class="text-gray-500">下单时间:{{ item.ordersorderdate }}</p>
              <p class="text-gray-500">订单总金额:{{ Number(item.orderstotalprice).toFixed(2) }}</p>
            </template>
          </wd-cell>
        </wd-cell-group>
      </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)
}

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>
::v-deep(.order-cell) {
  .wd-cell__right {
    flex: inherit !important;
    width: 50px !important;
  }
}
</style>
