<template>
  <FlexCol :gap="20" :padding="30">
    <HomeLargeTitle title="发现" />
    <ImageSwiper
      :images="appConfiguration?.banners.discover"
      width="100%"
      :height="400"
      radius="radius.md"
      :innerStyle="{
        border: '1px solid #fff',
        overflow: 'hidden',
      }"
    />
    
    <HomeTitle title="主题导览" />
    <ProvideVar :vars="{
      GridItemIconSize: 90,
      GridItemBackgroundColor: 'transparent',
      GridItemPaddingHorizontal: 0,
    }">
      <Grid :borderGrid="false" :mainAxisCount="3">
        <GridItem title="全部" icon="https://xy.wenlvti.net/app_static/images/discover/IconAll.png" touchable @click="goList(354, '知识库 · 全部')" />
        <GridItem title="优秀案例" icon="https://xy.wenlvti.net/app_static/images/discover/IconExamples.png" touchable @click="goList(359, '知识库 · 优秀案例')" />
        <GridItem title="经验分享" icon="https://xy.wenlvti.net/app_static/images/discover/IconShare.png" touchable @click="goList(358, '知识库 · 经验分享'  )" />
        <GridItem title="常见问题" icon="https://xy.wenlvti.net/app_static/images/discover/IconQuestions.png" touchable @click="goList(357, '知识库 · 常见问题')" />
        <GridItem title="挖掘技巧" icon="https://xy.wenlvti.net/app_static/images/discover/IconTrick.png" touchable @click="goList(356, '知识库 · 挖掘技巧')" />
        <GridItem title="认知基础" icon="https://xy.wenlvti.net/app_static/images/discover/IconBase.png" touchable @click="goList(355, '知识库 · 认知基础')" />
      </Grid>
    </ProvideVar>
    
    <HomeTitle title="最新推荐" />
    <SimplePageContentLoader :loader="discoverLoader">
      <FlexCol :gap="25">
        <ImageBlock3 
          v-for="(item, i) in discoverLoader.content.value"
          :key="i"
          backgroundColor="transparent"
          :src="item.image"
          :title="item.title"
          :desc="item.desc"
          :imageRadius="15"
          :imageWidth="200"
          :imageHeight="140"
          @click="goDetail(item)"
        />
      </FlexCol>
    </SimplePageContentLoader>
    
    <Loadmore status="nomore" />
    <Height :height="150" />
  </FlexCol>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { injectAppConfiguration } from '@/api/system/useAppConfiguration';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import Loadmore from '@/components/display/loading/Loadmore.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import ProvideVar from '@/components/theme/ProvideVar.vue';
import Grid from '@/components/layout/grid/Grid.vue';
import GridItem from '@/components/layout/grid/GridItem.vue';
import Image from '@/components/basic/Image.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import ImageBlock3 from '@/components/display/block/ImageBlock3.vue';
import CommonContent, { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';

const appConfiguration = injectAppConfiguration();

const discoverLoader = useSimpleDataLoader(async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(18)
    .setMainBodyColumnId(354)
  , 1, 30)).list
});

function goDetail(item: GetContentListItem) {
  navTo('/pages/article/details', {
    modelId: item.modelId,
    mainBodyColumnId: item.mainBodyColumnId,
    id: item.id,
  });
}
function goList(mainBodyColumnId: number|undefined, title: string, search?: string) {
  navTo('/pages/article/common/list', {
    modelId: 18,
    mainBodyColumnId,
    title,
    search: search || '',
  });
}
</script>