<script lang="ts" setup>
import {appMerchantOrderOrderListPost} from "@/service";
import dayjs from "dayjs";

const {t} = useI18n()

const timeData = ref({
  createBeginTime: dayjs().add(1, 'day').startOf('day').valueOf(),
  createEndTime: dayjs().add(1, 'day').endOf('day').valueOf(),
})
const {paging, loading, dataList, queryList, firstLoaded} = usePage((pageNum, pageSize) => {
  return appMerchantOrderOrderListPost({
    params: {
      pageNum,
      pageSize,
    },
    body: {
      orderStatusList: [],
      ...timeData.value
    }
  })
})

// 生成未来四天的日期,不包含今天
const recentDays = computed(() => {
  const days = []
  for (let i = 1; i < 6; i++) {
    const date = new Date()
    date.setDate(date.getDate() + i)
    // 格式化日期，不显示年份，只显示月/日
    const month = date.getMonth() + 1
    const day = date.getDate()
    days.push(`${month}/${day}`)
  }
  return days
})
// 选中的日期
const selectedDate = ref(0)

// 监听选中日期的变化，更新timeData
watch(selectedDate, (newIndex) => {
  const targetDate = dayjs().add(newIndex + 1, 'day')
  timeData.value = {
    createBeginTime: targetDate.startOf('day').valueOf(),
    createEndTime: targetDate.endOf('day').valueOf(),
  }
  // 重新查询数据
  paging.value?.refresh()
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <template #top>
      <navbar :title="t('navbar-future-order')"></navbar>
      <wd-tabs v-model="selectedDate" auto-line-width color="#14181B" inactiveColor="#666666" sticky>
        <template v-for="(item, index) in recentDays" :key="item">
          <wd-tab :title="item"></wd-tab>
        </template>
      </wd-tabs>
    </template>
    <view
        v-show="loading"
        class="animate-in fade-in animate-ease-out animate-duration-300"
    >
      <view class="bg-#F6F6F6 px-20rpx py-28rpx rounded-16rpx">
        <template v-for="item in 5" :key="item">
          <view class="w-full p-20rpx rounded-16rpx bg-white mb-20rpx last:mb-0">
            <view class="flex items-center justify-between mb-20rpx">
              <view class="w-150rpx h-24rpx skeleton-item"></view>
              <view class="w-80rpx h-24rpx skeleton-item"></view>
            </view>
            <view class="flex items-center justify-between mb-20rpx">
              <view class="w-200rpx h-20rpx skeleton-item"></view>
              <view class="w-100rpx h-20rpx skeleton-item"></view>
            </view>
            <view class="flex items-center justify-between mb-20rpx">
              <view class="w-180rpx h-20rpx skeleton-item"></view>
              <view class="w-120rpx h-20rpx skeleton-item"></view>
            </view>
            <view class="flex items-center justify-between">
              <view class="w-160rpx h-20rpx skeleton-item"></view>
              <view class="w-120rpx h-56rpx rounded-56rpx skeleton-item"></view>
            </view>
          </view>
        </template>
      </view>
    </view>
    <view
        v-show="!loading"
        class="animate-in fade-in animate-ease-in animate-duration-300"
    >
      <view class="px-30rpx py-20rpx">
        <template v-for="item in dataList">
          <view class="w-full p-20rpx rounded-16rpx bg-white mb-20rpx last:mb-0">
            <order-item :item="item"/>
          </view>
        </template>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>

</style>