<script lang="ts" setup>
import {useConfigStore, useUserStore} from "@/store";
import MenuSwiperList from "./components/menu-swiper-list/menu-swiper-list.vue";

const configStore = useConfigStore()
const userStore = useUserStore()
const emits = defineEmits(['changeMenu', 'changeStore'])

const {t} = useI18n()

const tabsLoading = ref(true)
const menuSwiperListRef = ref(null)

function initData() {
  tabsLoading.value = false
  setTimeout(() => {
    tabsLoading.value = true
    if (menuSwiperListRef.value && userStore.isLogin) {
      menuSwiperListRef.value[activeTab.value - 1].initData()
    }
  }, 100)
}

function changeMenu() {
  emits('changeMenu')
}

function indexChangeMenu(value: string) {
  console.log('子组件接受', value)
  console.log('子组件接受', activeTab.value)
  if (+activeTab.value === 1 && userStore.isLogin) {
    menuSwiperListRef.value[activeTab.value - 1].indexChangeMenu(value)
  }
}

const activeTab = ref('1');
const tabs = [
  {title: t('pages.menu.overview'), key: '1'},
  {title: t('pages.menu.menus'), key: '2'},
  {title: t('pages.menu.items'), key: '3'},
];

function changeKey(key: any) {
  console.log(key)
  if (!userStore.isLogin) return
  activeTab.value = key
}

function swiperChange(e: any) {
  activeTab.value = e.detail.current + 1 + ''
}

async function getPlatformDefaultStoreInfo() {
  console.log('getPlatformDefaultStoreInfo被处罚了')
}

function getCurrentMenuId() {
  const list = menuSwiperListRef.value as any
  if (!list || !Array.isArray(list)) return undefined
  return list[0]?.getCurrentMenuId?.()
}

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

<template>
  <view :style="[{
                height: configStore.windowHeight+'px',
  }]"
        class="bg-#fff"
  >
    <z-paging-swiper>
      <template #top>
        <view>
          <status-bar/>
          <view v-if="userStore.isLogin" class="center h-88rpx">
            <title-store @changeStore="emits('changeStore')"/>
          </view>
          <zm-tabs v-if="tabsLoading" :activeKey="activeTab" :list="tabs" @change="changeKey"></zm-tabs>
          <view class="box mt--6px"></view>
        </view>
      </template>
      <swiper :current="activeTab - 1" class="h-full" @change="swiperChange">
        <swiper-item v-for="(item, index) in tabs" :key="index">
          <menu-swiper-list ref="menuSwiperListRef" :currentIndex="activeTab" :tabIndex="index + 1"
                            @changeMenu="changeMenu"></menu-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>
:deep(.zm-tabs-tab) {
  font-size: 40rpx !important;
  color: #999;
  padding-bottom: 32rpx !important;
}

:deep(.zm-active-tab) {
  color: #333 !important;
  font-weight: 500 !important;
}

:deep(.zm-indicator) {
  border-radius: 0 !important;
  height: 10rpx !important;
  background-color: #333333 !important;
}

.box {
  border-bottom: 10rpx solid #F6F6F6 !important;
}
</style>
