<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 mt-16rpx bg-white">
          <wd-tabs
              slidable="always"
              key="tab"
              color="#14181B"
              inactiveColor="#B0B0B0"
              :line-height="6"
              :line-width="48"
              v-model="currentIndex"
              @click="handleClickTab"
          >
            <wd-tab v-for="(item, index) in tabList" :key="index" :title="item.name"></wd-tab>
          </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 order-swiper"
              :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="item.value"></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) {
    background: #fff !important;
    .wd-tabs__line {
      bottom: 0 !important;
      z-index: 99 !important;
      border-radius: 2rpx !important;
      background: #14181B !important;
    }
    .wd-tabs__nav-item {
      padding: 0 !important;
      flex: 1 1 0 !important;
      display: flex !important;
      justify-content: center !important;
    }
    .wd-tabs__nav-item-text {
      font-size: 26rpx !important;
      text-overflow: unset !important;
      font-family: 'UberMove', sans-serif !important;
      // font-weight: 500 !important;
      width: 100%;
      text-align: center;
    }
    .wd-tabs__nav-item.is-active .wd-tabs__nav-item-text {
      font-weight: 700 !important;
      color: #14181B !important;
    }
  }

  :deep(.wd-tabs__nav-container) {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
}
.bg {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 40%, rgba(245, 245, 245, 0) 100%);
}

.order-swiper {
  background-color: #F5F5F5;
}
</style>
