<script setup lang="ts">
import { ref, watch } from 'vue'
import orderListItem from '@/pagesOrder/pages/list/components/order-list-item.vue'
import { usePopupStore } from '@/stores'
import { pageMateStyle } from '@/utils/constants'

//页面传参
const query = withDefaults(
  defineProps<{
    status?: string
  }>(),
  {
    status: '',
  },
)

const tabs = ref()
const tabList = ref([
  {
    name: '全部',
    value: '',
    disabled: false,
  },
  {
    name: '待付款',
    value: '1',
    disabled: false,
  },
  {
    name: '待发货',
    value: '2',
    disabled: false,
  },
  {
    name: '待收货',
    value: '3',
    disabled: false,
  },
  {
    name: '待评价',
    value: '4',
    disabled: false,
  },
])

// 当前tab下标
const sub = tabList.value.findIndex((item) => item.value == query.status)
const current = ref(sub == -1 ? 0 : sub)
// tabs通知swiper切换
const tabsChange = (index: number) => {
  current.value = index
}

// swiper滑动中
const swiperTransition = (e: UniHelper.SwiperOnTransitionEvent) => {
  if (!current.value) {
    tabs.value.setDx(e.detail.dx)
  }
}

// swiper滑动结束
const swiperAnimationfinish = (e: UniHelper.SwiperOnAnimationfinishEvent) => {
  current.value = e.detail.current
  if (current.value) {
    tabs.value.unlockDx()
  }
}

watch(
  () => usePopupStore().show,
  (newVal) => {
    tabList.value.forEach((item) => (item.disabled = newVal))
  },
  { immediate: true },
)
</script>

<template>
  <!-- #ifdef MP-WEIXIN-->
  <page-mate :pageStyle="pageMateStyle">
    <!-- #endif -->
    <z-paging-swiper>
      <template #top>
        <z-tabs
          ref="tabs"
          :list="tabList"
          :current="current"
          @change="tabsChange"
          bg-color="#f6f6f6"
        />
      </template>
      <swiper
        class="swiper"
        :current="current"
        @transition="swiperTransition"
        @animationfinish="swiperAnimationfinish"
      >
        <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
          <order-list-item
            :tabIndex="index"
            :currentIndex="current"
            :status="tabList[current].value"
          ></order-list-item>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
    <!-- #ifdef MP-WEIXIN -->
  </page-mate>
  <!-- #endif -->
</template>

<style lang="scss">
page {
  background-color: #f6f6f6;
}
.swiper {
  height: 100%;
}
</style>
