<script lang="ts" setup>
import {useConfigStore, useUserStore} from "@/store";
import OrderSwiperList from "./components/order-swiper-list/order-swiper-list.vue";
import {OrderStatus} from "@/constant/enums";

const configStore = useConfigStore()
const userStore = useUserStore()

const {t} = useI18n()
const emits = defineEmits(['changeStore'])

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

const orderSwiperListRef = ref(null)

function initData() {
  orderSwiperListRef.value[selectedTabs.value].reload()
}

const selectedTabs = ref(0)
const tabList = ref([
  {
    title: t('pages.order.CONF'),
    value: OrderStatus.HAS_PENDING_PAYMENT,
  },
  {
    title: t('pages.order.ACPT'),
    value: OrderStatus.MERCHANT_ACCEPTED,
  },
  {
    title: t('pages.order.OTW'),
    value: OrderStatus.DELIVERING,
  },
  {
    title: t('pages.order.DCOMP'),
    value: OrderStatus.COMPLETED,
  }
])


async function getPlatformDefaultStoreInfo() {
}

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

<template>
  <view :style="[{
                height: configStore.windowHeight+'px',
  }]"
        class="bg-#F6F6F6"
  >
    <z-paging-swiper>
      <template #top>
        <view class="bg-white">
          <status-bar/>
          <view v-if="userStore.isLogin" class="center h-88rpx">
            <title-store @changeStore="emits('changeStore')"/>
          </view>
          <wd-tabs v-model="selectedTabs" auto-line-width color="#14181B" inactiveColor="#666666">
            <template v-for="(item, index) in tabList" :key="item">
              <wd-tab :title="item.title"></wd-tab>
            </template>
          </wd-tabs>
        </view>
      </template>
      <swiper :current="selectedTabs" :disable-touch="true" class="h-full">
        <swiper-item v-for="(item, index) in tabList" :key="index">
          <order-swiper-list ref="orderSwiperListRef" :currentIndex="selectedTabs" :status="item.value"
                             :tabIndex="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 lang="scss" scoped>

</style>
