<script setup lang="ts">
import OrderSwiperList from "./components/order-swiper-list/order-swiper-list.vue";
const {t} = useI18n()
const segmentedValue = ref(0);
const segmentedList = [
    'Store',
    'Dish',
    'Recipe',
]

function handleSwiperChange(e) {
  segmentedValue.value = e.detail.current;
}

const orderSwiperListRef = ref()
onMounted(()=> {
  nextTick(()=> {
    orderSwiperListRef.value[segmentedValue.value].reload()
  })
})
</script>

<template>
  <view>
    <z-paging-swiper>
      <template #top>
        <navbar/>
        <view class="px-30rpx">
          <view class="text-46rpx lh-46rpx text-#333 font-bold mb-52rpx">{{ t('pages.mine.collection') }}</view>
          <l-segmented v-model="segmentedValue" :options="segmentedList" shape="round" bg-color="#F2F2F2" active-color="#333" />
        </view>
      </template>

      <swiper class="h-full"
              :current="segmentedValue"
              @change="handleSwiperChange">
        <swiper-item class="swiper-item" v-for="(item, index) in segmentedList" :key="index">
          <order-swiper-list ref="orderSwiperListRef" :currentIndex="segmentedValue" :index="index"></order-swiper-list>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<style>
page {
  background-color: white;
}
</style>