<template>
  <view class="d-flex flex-column bg-base">
    <u-navbar title="文物" autoBack placeholder bgColor="transparent" />
    <u-tabs 
      :list="tabs" 
      lineWidth="30"
      lineColor="#d9492e"
      :activeStyle="{
        color: '#000',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      }"
      :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)'
      }"
      :scrollable="false"
      class="top-tab"
      @click="(e: any) => tab = e.index"
    />

    <view class="d-flex flex-col p-2">
      <uni-search-bar 
        v-model="searchValue"
        radius="100" 
        bgColor="#fff" 
        placeholder="搜索文物" 
        clearButton="auto" 
        cancelButton="none"
        @confirm="doSearch"
      />
    </view>
    <view class="d-flex flex-row justify-around p-2 pt-0">
      <SimpleDropDownPicker v-model="selectedTag" :columns="categoryData.content.value" />
      <SimpleDropDownPicker v-model="selectedLevel" :columns="levelData.content.value" />
      <SimpleDropDownPicker v-model="selectedRegion" :columns="regionData.content.value" />
    </view>
    <view class="d-flex flex-row flex-wrap justify-between p-2">
      <view
        v-for="item in listLoader.list.value"
        :key="item.id"
        class="width-1-2"
      >
        <Box2LineLargeImageUserShadow 
          classNames="ml-2 mb-3"
          titleColor="title-text"
          :image="item.image"
          :title="item.name"
          @click="goDetails(item.id)"
        />
      </view>
    </view>
    <SimplePageListLoader :loader="listLoader" />
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { navTo } from '@/common/utils/PageAction';
import MoveableContent from '@/api/inheritor/MoveableContent';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import Box2LineLargeImageUserShadow from '@/pages/parts/Box2LineLargeImageUserShadow.vue';
import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';

const categoryData = useSimpleDataLoader(async () => 
  [{
    id: 0, 
    name: '全部分类'
  }].concat((await CommonContent.getCategoryList(3)).map((item) => ({
    id: item.id,
    name: item.title,
  })))
, true);
const levelData = useSimpleDataLoader(async () => 
  [{
    id: 0, 
    name: '全部级别'
  }].concat((await CommonContent.getCategoryList(2)).map((item) => ({
    id: item.id,
    name: item.title,
  })))
, true);
const regionData = useSimpleDataLoader(async () => 
  [{
    id: 0, 
    name: '全部区域'
  }].concat((await CommonContent.getCategoryList(1)).map((item) => ({
    id: item.id,
    name: item.title,
  })))
, true);
const selectedTag = ref(0);
const selectedLevel = ref(0);
const selectedRegion = ref(0);
const searchValue = ref('');
const tab = ref(0)
const tabs = [
  {
    name: '不可移动文物'
  },
  {
    name: '可移动文物'
  },
];
const listLoader = useSimplePageListLoader<{
  id: number,
  image: string,
  name: string
}>(8, async (page, pageSize) => {
  let api;
  switch (tab.value) {
    default:
    case 0: api = UnmoveableContent; break; 
    case 1: api = MoveableContent; break; 
  }
  const res = await api.getContentList(new GetContentListParams().setSelfValues({
    crType: selectedTag.value == 0 ? undefined: selectedTag.value,
    level: selectedLevel.value == 0 ? undefined: selectedLevel.value,
    region: selectedRegion.value == 0 ? undefined: selectedRegion.value,
    keywords: searchValue.value,
  }), page, pageSize);
  return res.list.map((item) => {
    return {
      id: item.id,
      image: item.thumbnail || item.image,
      name: item.title,
    }
  })
});

watch(selectedLevel, () => {
  listLoader.loadData(undefined, true);
});
watch(selectedRegion, () => {
  listLoader.loadData(undefined, true);
});
watch(selectedTag, () => {
  listLoader.loadData(undefined, true);
});
watch(tab, () => {
  listLoader.loadData(undefined, true);
}, { immediate: true });

function doSearch() {
  listLoader.loadData(undefined, true);
}
function goDetails(id: number) {
  navTo('details', { id })
}
</script>