<template>
  <CommonListPage 
    title="闽南歌曲"
    itemType="article-common"
    showTotal
    detailsPage="/pages/video/details"
    :dropDownNames="dropdownNames"
    :detailsParams="detailsParams"
    :tabsScrollable="true"
    :tabs="[
      /*{
        id: 191,
        text: '闽南语经典歌曲',
        width: 200,
      },
      {
        id: 190,
        text: '南音',
        width: 100,
      },
      {
        id: 189,
        text: '闽南童谣',
      },*/
      {
        id: 315,
        text: '闽南语原创歌曲',
        width: 200,
      },
      /*{
        id: -100,
        text: '常用闽南语',
      },*/
      {
        id: -101,
        text: '闽南语原声',
        jump: () => {
          navTo('/pages/inhert/language/list')
        },
      },
    ]"
    :load="loadData" 
  />
</template>

<script setup lang="ts">
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import { navTo } from '@/components/utils/PageAction';
import CommonListPage, { type DropDownNames } from '@/pages/article/common/CommonListPage.vue';
import { onMounted, ref } from 'vue';

const dropdownNames = ref<DropDownNames[]>([]);
const modelDefine = [
  { modelId: 16, mainBodyColumnId: 191, id: 191, name: '闽南语经典歌曲' },
  { modelId: 16, mainBodyColumnId: 190, id: 190, name: '南音' },
  { modelId: 16, mainBodyColumnId: 189, id: 189, name: '闽南童谣' },
  { modelId: 16, mainBodyColumnId: 315, id: 315, name: '闽南语原创歌曲' },
  { modelId: 5, mainBodyColumnId: [ 257,235,237,210 ], id: -100, name: '常用闽南语' },
  { modelId: 5, mainBodyColumnId: 313, id: -101, name: '闽南语原声' },
]

async function loadData(
  page: number, 
  pageSize: number,
  searchText: string,
  dropDownValues: number[],
  tabId: number,
) {

  const model = modelDefine.find((p) => p.id === tabId);
  if (!model)
    throw new Error('tabId not found');

  detailsParams.value.mainBodyColumnId = model.mainBodyColumnId;

  const res = (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(model.modelId)
    .setMainBodyColumnId(model.mainBodyColumnId!)
    .setKeywords(searchText)
    .setSelfValues({

    })
  , page, pageSize));
  res.list.forEach((p) => {
    p.desc = p.ichName as string;
    p.bottomTags = [
      p.levelText, 
      p.batchText,
      p.ichTypeText,
    ];
  })
  return res;
}

const detailsParams = ref({
  mainBodyColumnId: 0 as any,
  modelId: 16,
});

onMounted(async () => {
  
})
</script>
