<script setup lang="ts">
import {OrderStatus} from "@/constant/enums";
import OrderSwiperList from "./components/order-swiper-list/order-swiper-list.vue";
import {useConfigStore} from "@/store";
import {debounce} from "throttle-debounce";
const configStore = useConfigStore()
const {t} = useI18n()

const orderSwiperListRef = ref(null)
// async function initData() {
//   orderSwiperListRef.value[currentIndex.value].reload()
// }
const initData = debounce(500, () => {
  nextTick(() => {
    // listItem.value[currentTab.value].reload()
    orderSwiperListRef.value[currentIndex.value].reload()
  })
}, {atBegin: true})



async function getPlatformDefaultStoreInfo() {}

const currentIndex = ref(0)
const tabList = ref([
  {
    name: t('pages.order.all'),
    value: ''
  },
  {
    name: t('pages.order.confirmReady'), // 待接单待取餐
    value: OrderStatus.HAS_PENDING_PAYMENT,
  },
  {
    name: t('pages.order.accept'), // 已接单
    value: OrderStatus.MERCHANT_ACCEPTED,
  },
  {
    name: t('pages.order.onTheWay'), // 配送中
    value: OrderStatus.DELIVERING,
  },
  {
    name: t('pages.order.completed'), // 已送达
    value: OrderStatus.COMPLETED,
  },
])
function handleClickTab(event: any) {
  currentIndex.value = event.index
}
function handleSwiperChange(event: any){
  currentIndex.value = event.detail.current
}

defineExpose({
  initData,
  init: getPlatformDefaultStoreInfo,
})
</script>

<template>
  <view
        :style="[{
                height: configStore.windowHeight+'px',
  }]"
  >
    <view class="bg h-360rpx fixed top-0 left-0 right-0"></view>
    <z-paging-swiper>
      <template #top>
        <status-bar/>
        <view class="pl-30rpx pt-18rpx text-56rpx lh-56rpx text-#333 font-bold tracking-[.04em]">{{ t('pages.order.title') }}</view>
        <view class="tab pl-20rpx mt-24rpx">
          <wd-tabs
              slidable="always"
              key="tab"
              color="#333"
              inactiveColor="#999"
              :line-height="3"
              :line-width="30"
              v-model="currentIndex"
              @click="handleClickTab"
          >
            <template v-for="(item, index) in tabList" :key="index">
              <wd-tab :title="item.name"></wd-tab>
            </template>
          </wd-tabs>
          <view class="px-20rpx mt--2rpx">
            <view class="border-b-solid border-b-4rpx border-b-#999"></view>
          </view>
        </view>
      </template>
      <swiper class="h-full"
              :current="currentIndex"
              @change="handleSwiperChange">
        <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
          <order-swiper-list ref="orderSwiperListRef" :currentIndex="currentIndex" :status="index"></order-swiper-list>
        </swiper-item>
      </swiper>
      <template #bottom>
        <view class="h-50px"></view>
        <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
      </template>
    </z-paging-swiper>
  </view>
</template>

<style scoped lang="scss">
.tab {
  :deep(.wd-tabs) {
    .wd-tabs__line {
      bottom: 0 !important;
      z-index: 99 !important;
      border-radius: 0 !important;
    }
    .wd-tabs__nav-item {
      padding: 0 22rpx !important;
    }
    .wd-tabs__nav-item-text{
      font-size: 32rpx !important;
      text-overflow: unset !important;
      font-family: 'UberMove', sans-serif !important;
    }
  }
}
.bg {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 51%, rgba(255, 255, 255, 0) 100%);
}
</style>
