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

const {t} = useI18n()

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

<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <template #top>
      <navbar :title="t('navbar-today-order')"></navbar>
    </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 6" :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>