<template>
  <CommonListPage 
    ref="list"
    title="非遗"
    itemType="image-large-2"
    showTotal
    :detailsPage="[
      '/pages/inhert/intangible/details',
      '/pages/inhert/product/details',
      '',
      '/pages/inhert/seminar/details',
    ]"
    :dropDownNames="dropdownNames"
    :tabs="[
      { id: 0, name: '非遗项目' },
      { id: 1, name: '非遗作品' },
      { id: 2, name: '非遗传承人', jump: () => navTo('/pages/inhert/inheritor/list') },
      { id: 3, name: '非遗传习所' },
    ]"
    :tabsScrollable="true"
    :startTabIndex="startTab"
    :load="loadData" 
    :loadMounted="false"
  />
</template>

<script setup lang="ts">
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import ProductsContent from '@/api/inheritor/ProductsContent';
import ProjectsContent from '@/api/inheritor/ProjectsContent';
import SeminarContent from '@/api/inheritor/SeminarContent';
import { navTo } from '@/common/utils/PageAction';
import CommonListPage, { type DropDownNames } from '@/pages/article/common/CommonListPage.vue';
import { onLoad } from '@dcloudio/uni-app';
import { waitTimeOut } from '@imengyu/imengyu-utils';
import { onMounted, ref } from 'vue';

const list = ref();
const dropdownNames = ref<DropDownNames[]>([]);
const startTab = ref(0);
async function loadData(
  page: number, 
  pageSize: number,
  searchText: string,
  dropDownValues: number[],
  tabSelect: number,
) {
  let api;
  switch (tabSelect) {
    case 0: api = ProjectsContent; break;
    default:
    case 1: api = ProductsContent; break;
    case 3: api = SeminarContent; break;
  }
  const res = (await api.getContentList(new GetContentListParams().setSelfValues({
    ichType: tabSelect !== 0 || dropDownValues[0] == 0 ? undefined: dropDownValues[0],
    level: (tabSelect !== 0 && tabSelect !== 2) || dropDownValues[1] == 0 ? undefined: dropDownValues[1],
    region: tabSelect !== 0 || dropDownValues[2] == 0 ? undefined: dropDownValues[2],
    keywords: searchText,
  }), page, pageSize));

  res.list.forEach((item) => {
    item.bottomTags = [
      item.levelText, 
      item.ichTypeText, 
      item.batchText,
      item.regionText,
    ]
  })
  return res;
}

onLoad(async (querys) => {
  if (querys?.tab) {
    startTab.value = Number(querys.tab); 
  }
  dropdownNames.value.push({ 
    options: [{
      id: 0, 
      name: '全部分类'
    }].concat((await CommonContent.getCategoryList(4)).map((item) => ({
      id: item.id,
      name: item.title,
    }))),
    activeTab: [0],
    defaultSelectedValue: 0,
  });
  const levels = await CommonContent.getCategoryList(2);
  dropdownNames.value.push({ 
    options: [{
      id: 0, 
      name: '全部级别'
    }].concat(levels.map((item) => ({
      id: item.id,
      name: item.title,
    }))),
    activeTab: [0,3],
    defaultSelectedValue: querys?.level ?? 0,
  });
  dropdownNames.value.push({ 
    options: [{
      id: 0, 
      name: '全部地区'
    }].concat((await CommonContent.getCategoryList(1)).map((item) => ({
      id: item.id,
      name: item.title,
    }))),
    activeTab: [0],
    defaultSelectedValue: 0,
  });
  await waitTimeOut(800);
  list.value.load();
})
</script>
