<template>
  <ie-page :fix-height="true">
    <ie-navbar title="资讯" />
    <ie-auto-resizer>
      <ie-tabs-swiper v-model="current" :list="tabs" :scrollable="true">
        <!-- #ifdef WEB -->
        <template v-for="item in tabs" #[item.slot]>
          <news-paging-list :params="item.params" />
        </template>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <block v-for="item in tabs">
          <template #[item.slot]>
            <news-paging-list :params="item.params" />
          </template>
        </block>
        <!-- #endif -->
      </ie-tabs-swiper>
    </ie-auto-resizer>
  </ie-page>
</template>
<script lang="ts" setup>
import { getNewsTypes } from '@/api/modules/news';
import NewsPagingList from './components/news-paging-list.vue';
import { News } from '@/types';

const current = ref(0);
type TabItem = {
  name: string;
  value: string;
  slot: string;
  params: News.NewsQueryDTO;
}
const tabs = ref<TabItem[]>([]);

const handleChangeSwiper = (e: any) => {
  current.value = e.detail.current;
}
const loadData = () => {
  getNewsTypes().then(res => {
    const list = res.rows.map(item => ({ name: item.label, value: item.value, slot: item.label, params: { type: item.value } }));
    tabs.value = [
      {
        name: '热门资讯',
        value: 'hot',
        slot: 'hot',
        params: { tag: 'hot' }
      },
      ...list
    ]
  });
}
loadData();
</script>
<style lang="scss" scoped></style>