<template>
  <!-- 通用列表 -->
  <view class="position-relative d-flex flex-row flex-wrap justify-between align-stretch mt-3">
    <view
      v-for="(item, i) in listLoader.list.value"
      :key="item.id"
      :class="[
        'position-relative d-flex flex-grow-1',
        itemType.endsWith('-2') ? 'width-1-2' : 'w-100'
      ]"
    >
      <Box2LineLargeImageUserShadow 
        v-if="itemType.startsWith('image-large')"
        class="w-100"
        titleColor="title-text"
        :classNames="getItemClass(i)"
        :image="getImage(item)"
        :titleBox="item.titleBox"
        :titlePrefix="item.titlePrefix"
        :title="getTitle(item)"
        :desc="item.desc"
        :tags="item.bottomTags"
        :badge="item.badge"
        @click="goDetails(item, item.id)"
      />
      <Box2LineImageRightShadow 
        v-else-if="itemType.startsWith('article-common')"
        class="w-100"
        titleColor="title-text"
        :titleBox="item.titleBox"
        :titlePrefix="item.titlePrefix"
        :classNames="getItemClass(i)"
        :image="getImage(item)"
        :title="getTitle(item)"
        :desc="item.desc"
        :tags="item.bottomTags"
        :badge="item.badge"
        :wideImage="true"
        @click="goDetails(item, item.id)"
      />
      <Box2LineImageRightShadow 
        v-else-if="itemType.startsWith('article-character')"
        class="w-100"
        :classNames="getItemClass(i)"
        :image="getImage(item)"
        titleColor="title-text"
        :title="getTitle(item)"
        :titlePrefix="item.titlePrefix"
        :titleBox="item.titleBox"
        :tags="item.bottomTags || item.keywords"
        :desc="item.desc"
        :badge="item.badge"
        @click="goDetails(item, item.id)"
      />
      <Box2LineImageRightShadow 
        v-else-if="itemType.startsWith('simple-text')"
        class="w-100"
        :classNames="getItemClass(i)"
        titleColor="title-text"
        :border="false"
        :showImage="false"
        :title="getTitle(item)"
        :titlePrefix="item.titlePrefix"
        :titleBox="item.titleBox"
        :tags="item.bottomTags || item.keywords"
        :desc="item.desc"
        :badge="item.badge"
        @click="goDetails(item, item.id)"
      />
      <Grid4Item 
        v-else-if="itemType.startsWith('image-small')"
        :title="getTitle(item)"
        :image="item.image"
        :classNames="itemType.endsWith('-2') ? 'half' : 'full'"
        @click="goDetails(item, item.id)"
      />
      <Box2LineRightShadow
        v-else
        :key="i" 
        :title="getTitle(item)"
        :titleBox="item.titleBox"
        :desc="item.desc"
        :tags="(item.bottomTags as string[])"
        @click="goDetails(item, item.id)"
      />
      <slot name="itemRight" :item="item" :index="i" />
    </view>
    <view v-if="itemType.endsWith('-2') && listLoader.list.value.length % 2 != 0" class="width-1-2" />
  </view>
  <Empty v-if="listLoader.list.value.length == 0 && listLoader.loadStatus.value !== 'loading'" :description="emptyText" />
  <SimplePageListLoader v-else :loader="listLoader" />
</template>

<script setup lang="ts">
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import Box2LineLargeImageUserShadow from '@/pages/parts/Box2LineLargeImageUserShadow.vue';
import Box2LineImageRightShadow from '@/pages/parts/Box2LineImageRightShadow.vue';
import Empty from '@/components/feedback/Empty.vue';
import Grid4Item from '@/pages/parts/Grid4Item.vue';
import Box2LineRightShadow from '@/pages/parts/Box2LineRightShadow.vue';
import type { CommonListPageItemType } from './CommonListPage';
import type { CommonListItem } from './CommonListPage.vue';

function getImage(item: any) {
  return item.thumbnail || item.image
}
function getItemClass(index: number) {
  return props.itemType.endsWith('-2') ? (index % 2 != 0 ? 'ml-1' : 'mr-1') : ''
}
function getTitle(item: CommonListItem) {
  return item[props.titleKey]
}

const emit = defineEmits([ 'goDetails' ])
const props = withDefaults(defineProps<{
  pageSize: number,
  load: (page: number, pageSize: number) => Promise<{ list: CommonListItem[], total: number }>,
  itemType?: CommonListPageItemType,
  emptyText?: string,
  titleKey?: string,
}>(), {
  titleKey: 'title',
  emptyText: '暂无数据',
  itemType: 'article-common',
})

const listLoader = useSimplePageListLoader(props.pageSize, async (page, pageSize) => {
  return await props.load(page, pageSize)
});
function goDetails(item: CommonListItem, id: number) {
  emit('goDetails', item, id)
}
</script>

<style lang="scss">
</style>