<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { computed, ref, watch } from 'vue';
import Tab from '@/components/small/Tab.vue';
import TabCommonList from './Content/TabCommonList.vue';
import Header from '@/components/parts/Header.vue';
import TabCustomList from './Content/TabCustomList.vue';

const route = useRoute();
const router = useRouter();
const mainTabData = [
  { 
    id: 0,
    label: '首页'
  },
  { 
    id: 1,
    label: '保护概况',
  },
  { 
    id: 2,
    label: '闽南精神'
  },
  { 
    id: 3,
    label: '古早话仙'
  },
  { 
    id: 4,
    label: '民俗风情'
  },
  { 
    id: 5,
    label: '保护传承'
  },
  { 
    id: 6,  
    label: '闽南时尚'
  },
  { 
    id: 7,
    label: '文化之旅'
  },
  { 
    id: 8,
    label: '厝边记忆'
  },
]
const activeTab = ref(Number(route.query.tab));
const activeTabId = computed(() => {
  return mainTabData.find((item) => item.id === activeTab.value)?.id;
});

watch(() => activeTab.value, (newVal) => {
  if (newVal === 0)
    router.push({ name: 'Home' });
});
</script>

<template>
  <main class="main-content main-bg main-bg1">
    <Header />
    <div class="inner fill pt-0">
      <Tab v-model="activeTab" :tabs="mainTabData" />
      <div class="tab-content d-flex flex-col">
        <TabCommonList v-if="activeTabId === 1" :modelId="17" :mainBodyColumnId="[ 255,256,283,284 ]" />
        <TabCommonList v-else-if="activeTabId === 2" :modelId="3" :mainBodyColumnId="4" />
        <TabCommonList 
          v-else-if="activeTabId === 3" 
          :modelId="16" 
          :mainBodyColumnId="[ [189,190,191,291],187,{ modelId: 5, mainBodyColumnId: [] } ]" 
          :mainBodyColumnAsTabs="[ '闽南童谣', '讲古', '方言' ]"
          :detailPageNames="['VideoDetail', 'VideoDetail', 'Play']"
        />
        <TabCustomList v-else-if="activeTabId === 4" />
        <TabCommonList v-else-if="activeTabId === 6" :modelId="16" />
        <TabCommonList 
          v-else-if="activeTabId === 7" 
          :modelId="17" 
          :mainBodyColumnId="[ 275,276,277,278 ]" 
          :mainBodyColumnAsTabs="[ '非遗旅游路线', '红色文化旅游路线', '美食旅游路线', '文旅融合示范点' ]"
        />
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>

.tab-content {
  position: absolute;
  top: 2rem;
  left: 10%;
  right: 10%;
  bottom: 2rem;
}

@media (max-width: 600px) {
  .tab-content {
    left: 5%;
    right: 5%;
  }
}

</style>
