<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang='ts'>
import { TreasureApi } from '@/api/api/treasure';
import { showToast } from 'vant';
import SearchInput from '@/components/SearchInput/index.vue'
import { baseIMGUrl } from '@/api/request';

export type DictType = {
  createTime: string | null,
  creatorId: number | null,
  creatorName: string | null,
  display: string | null,
  id: number | null,
  name: string | null,
  parentId: number | null,
  rtf: string | null,
  sort: number | null,
  type: string | null,
  typeKey: string | null,
  updateTime: string | null
}

export type TreasureType = {
  age: string,
  createTime: string,
  creatorId: number,
  creatorName: string,
  description: string,
  dirCode: string,
  fileIds: string,
  fileTypes: string,
  id: 1,
  name: string,
  publishDate: string,
  size: string,
  texture: string,
  thumb: string,
  type: string,
  updateTime: string
}


const searchParames = ref({
  dictId: null,
  pageNum: 1,
  pageSize: 9999,
  searchKey: '',
} as {
  dictId: number | null,
  pageNum: number,
  pageSize: number,
  searchKey: string,
})

const router = useRouter()

const data = ref([] as TreasureType[])

const typeList = ref([] as DictType[])


const activeIndex = ref(0)

const goDetai = (id: number) => {
  router.push({ name: 'treasureDetail', params: { id } });
}


const getList = async () => {
  searchParames.value.dictId = activeIndex.value == 0 ? null : typeList.value[activeIndex.value].id!
  // 获取指定类型的列表
  const res: any = await TreasureApi.getTreasureList(searchParames.value)
  if (res.code == 0) {
    data.value = res.data.records
  } else {
    showToast(res.msg)
  }
}


const getTypeList = async () => {
  // 获取珍藏类型
  const resType: any = await TreasureApi.getTypeList()
  if (resType.code == 0) {
    typeList.value = resType.data
    typeList.value.unshift({
      createTime: null,
      creatorId: null,
      creatorName: '',
      display: null,
      id: null,
      name: '全部',
      parentId: null,
      rtf: '',
      sort: null,
      type: '',
      typeKey: '',
      updateTime: null
    })
  } else {
    showToast(resType.msg)
  }

  getList()
}


const onSearch = (eventData: any) => {
  searchParames.value.searchKey = eventData
  getList()
}


onBeforeMount(() => {
  getTypeList()
})




</script>

<template>
  <div class="treasure-box">
    <SearchInput @onSearch="onSearch" />
    <div class="content-box">
      <van-tabs v-model:active="activeIndex" color="#9D4F0B" background="#F7F3E8" title-active-color="#9D4F0B"
        title-inactive-color="#88866F" @change="getList()">
        <van-tab v-for="(item, index) in typeList" :key="index" :title="item.name">
          <!-- <div>{{ activeIndex }}</div> -->
          <div class="tab-content" v-if="data.length > 0">
            <div class="activity-card" v-for="(item, index) in data" :key="index" @click="goDetai(item.id)">
              <img v-show="item.thumb != ''" class="thumb" :src=" baseIMGUrl + item.thumb" alt="">
              <div class="title">{{ item.name }}</div>
              <div class="detail" v-if="item.age||item.texture">
                <div style="margin-right: 30px;" v-if="item.age">朝代：{{ item.age }}</div>
                <div v-if="item.texture">质地：{{ item.texture }}</div>
              </div>

            </div>
          </div>
          <div v-else class="no-data">
            <img src="@/assets/images/no-data.png" alt="">
            <div class="tips">暂时没有数据 ，请试一下其他关键字</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style lang='less' scoped>
.van-tabs__content {
  background-color: #F7F3E8;
}

.treasure-box {
  width: 100%;
  min-height: 100%;
  background: #F7F3E8;
  overflow: auto;



  .content-box {
    width: 100%;
    padding: 0px 10px;
    box-sizing: border-box;

    .van-tabs {
      .van-tabs__nav {
        background: #F7F3E8 !important;
      }
    }

    .tab-content {
      width: 100%;

      .activity-card {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 20px;


        img {
          width: 100%;
          border-radius: 10px;
        }

        .detail {
          font-size: 1em;
          color: #9D4F0B;
          margin-top: 10px;
          font-family: 'SourceHanSansCN-Regular';
          display: flex;

        }

        .title {
          font-size: 1.2em;
          font-weight: bold;
          margin-top: 5px;
          color: #333333;
          font-family: 'SourceHanSansCN-Medium';
        }
      }
    }

    .no-data {
      width: 100%;
      height: calc(100% - 7vh);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 10%;


      img {
        width: 40%;
      }

      .tips {
        color: #88866F;
        margin-top: 10px;
        font-family: 'SourceHanSansCN-Regular';
      }

    }
  }
}
</style>