<template>
  <ScrollRect scroll="vertical" class="position-relative" style="min-height:0;">
    <SimplePageListContentLoader class="d-flex flex-col flex-fill" :loader="loader">
      <template
        v-for="value in loader.content.value?.list"
        :key="value.id"
      >
        <h1>{{ value.name }}</h1>
        <GridList :list="(value.contentList as any[])" itemStyleType="ugly-box" height="10vw" @item-click="handleItemClick"  />

      </template>
    </SimplePageListContentLoader>
  </ScrollRect>
</template>

<script setup lang="ts">
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { useRouter } from 'vue-router';
import CommonContent, { GetColumListParams } from '@/api/CommonContent';
import SimplePageListContentLoader from '@/components/SimplePageListContentLoader.vue';
import GridList from '@/components/small/GridList.vue';
import { ScrollRect } from '@imengyu/vue-scroll-rect';

const emit = defineEmits(['itemClick']);
const router = useRouter();
const loader = useSimpleDataLoader(async () => {
  return CommonContent.getColumList(new GetColumListParams()
    .setModelId(4)
    .setMainBodyColumnId([ 8,9,246,248 ])
  )
});

function handleItemClick(item: any) {
  router.push({ name: 'ArticleDetail', query: { id: item.id } });
}


</script>

<style scoped lang="scss">
h1 {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--color-text-primary);
}

:deep(.grid-container) {
  grid-template-rows: repeat(1, 1fr);
}
</style>

