<script lang="ts" setup>
import {useUserStore} from "@/store";
import {appMerchantOrderOrderListPost} from "@/service";
import {OrderStatus} from "@/constant/enums";

const {t} = useI18n()

const props = defineProps<{
  tabIndex: number
  currentIndex: number
  status: null | number | string
}>()

const userStore = useUserStore()

const {paging, dataList, loading, queryList, firstLoaded} = usePage((pageNum, pageSize) => {
  if (userStore.isLogin) {
    return appMerchantOrderOrderListPost({
      params: {
        pageNum,
        pageSize,
      },
      body: {
        orderStatusList: props.status ? [Number(props.status)] : [],
      }
    })
  } else {
    return Promise.resolve([])
  }
})
watch(
    () => props.currentIndex,
    () => {
      console.log(props.currentIndex, props.tabIndex)
      if (props.currentIndex === props.tabIndex) {
        if (!firstLoaded.value) {
          nextTick(() => {
            paging.value?.reload()
          })
        }
      }
    },
)


function reload() {
  paging.value?.reload()
}

function refresh() {
  paging.value?.refresh()
}

function navigateTo(url: string) {
  uni.navigateTo({url})
}

defineOptions({
  name: 'OrderSwiperList',
})

defineExpose({
  reload,
  refresh,
})
</script>

<template>
  <view class="h-full">
    <z-paging ref="paging" v-model="dataList" :auto="false" :fixed="false" @query="queryList">
      <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-if="!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>
                  <wd-button
                      v-if="+item.receiveMethod === 1 && +item.orderStatus === OrderStatus.HAS_PENDING_PAYMENT"
                      class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff"
                  >{{ t('pages-user.order.receiving') }}
                  </wd-button>

                  <!--配送订单 已经接单-->
                  <wd-button
                      v-if="+item.receiveMethod === 1 && +item.orderStatus === OrderStatus.MERCHANT_ACCEPTED"
                      class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff"
                  >{{ t('pages-user.order.startDelivery') }}
                  </wd-button>

                  <!--配送订单 配送中-->
                  <wd-button
                      v-if="+item.receiveMethod === 1 && +item.orderStatus === OrderStatus.DELIVERING"
                      class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff"
                  >{{ t('pages-user.order.delivered') }}
                  </wd-button>

                  <!-- 自取已隐藏 -->
                  <wd-button
                      v-if="false"
                      class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff"
                  >{{ t('pages-user.order.receiving') }}
                  </wd-button>
                  <wd-button
                      v-if="false"
                      class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff"
                      @click.stop="navigateTo('/pages-user/pages/scan-code/index')">
                    {{ t('pages-user.order.writeOff') }}
                  </wd-button>
                </template>
              </order-item>
            </view>
          </template>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<style lang="scss" scoped></style>
