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

const {t} = useI18n()

const {paging, dataList, loading, queryList, firstLoaded} = usePage((pageNum, pageSize) => {
  return appMerchantOrderOrderListPost({
    params: {
      pageNum,
      pageSize,
    },
    body: {
      orderStatusList: [],
      refundStatusList: currentTabs.value === 0 ? [currentTabs.value + 1] : [currentTabs.value + 1, 3],
    }
  })
})

const currentTabs = ref(0)
const tabsList = ref([
  {
    title: t('pages-user.order.pending'),
    value: '1',
  },
  {
    title: t('pages-user.order.processed'),
    value: '3',
  },
])

function tabsChange(e: any) {
  currentTabs.value = e.index
  paging.value.refresh()
}

onShow(() => {
  nextTick(() => {
    paging.value.refresh()
  })
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
    <template #top>
      <navbar :title="t('navbar-refund-order')"></navbar>
      <wd-tabs v-model="currentTabs" :lineWidth="67" animated color="#14181B" inactiveColor="#666666"
               sticky @change="tabsChange">
        <template v-for="(item, index) in tabsList" :key="item">
          <wd-tab :title="item.title"></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 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">
              <template #rightBtn></template>
            </order-item>
          </view>
        </template>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
:deep(.wd-tabs__nav-item) {
  font-size: 30rpx !important;

  &.is-active {
    font-size: 34rpx !important;
  }
}

:deep(.wd-tabs__line) {
  border-radius: 0 !important;
  height: 10rpx !important;
  bottom: 0 !important;
}
</style>