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

export type exhibitionType = {
  createTime: string,
  creatorId: number,
  creatorName: string,
  dateEnd: string,
  dateStart: string,
  description: string,
  id: number,
  link: string,
  location: string,
  name: string,
  publishDate: string,
  rtf: string,
  thumb: string,
  type: string,
  updateTime: string
}

const router = useRouter()
const route = useRoute()

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

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


const activeIndex = ref(0)

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

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

const dateFormat = (date: string) => {
  const dateNew = new Date(date)
  const month = dateNew.getMonth() + 1
  const day = dateNew.getDate()
  const formattedWithLeadingZeroes = `${month.toString().padStart(2, '0')}.${day.toString().padStart(2, '0')}`;
  const finalFormat = formattedWithLeadingZeroes.replace(/^0(\d)\./, '$1.');
  return finalFormat
}

// 判断临时展厅是否过时
const isOverTime = (date: string) => {
  const dateEnd = new Date(date)
  const dateNow = new Date()

  if (dateNow > dateEnd) {
    return true
  }

  return false
}

// 写死
const typeList = ref([
  '全部',
  '常设展览',
  '临时展览'
] as any)

const getList = async () => {
  searchParames.value.type = activeIndex.value == 0 ? '' : typeList.value[activeIndex.value]
  const res: any = await ExhibitionApi.getExhibitionList(searchParames.value)
  if (res.code == 0) {
    data.value = res.data.records
    if (searchParames.value.type == '临时展览') {
      data.value.sort((a: any, b: any) => {
        const dateA = new Date(a.dateEnd);
        const dateB = new Date(b.dateEnd);
        // @ts-ignore
        return dateB - dateA
      })
    }
  } else {
    showToast(res.msg)
  }
}

onBeforeMount(() => {

  getList()

  // 0 全部 1 常设展览 2 临时展览
  activeIndex.value = route.query.type ? Number(route.query.type) : 0

})
</script>

<template>
  <div class=''>
    <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">
            <!-- <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="name">{{ item.name }}</div>
                <div class="abstract">{{ item.description }}</div>
                <div class="bottom-box">
                  <div class="location">{{ item.location }}</div>
                  <div class="time" v-show="item.type == '临时展览'">{{ isOverTime(`${item.dateEnd} 23:59:59`) ? '已结束' :
                    dateFormat(item.dateStart) +
                    '-'
                    + dateFormat(item.dateEnd) }}
                  </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>
  </div>
</template>

<style lang='less' scoped>
.treasure-box {
  width: 100%;
  height: 100vh;
  background: #F7F3E8;
  overflow: auto;



  .search-box {
    width: 100%;
  }

  .content-box {
    width: 100%;
    overflow: auto;
    padding: 0px 10px;
    box-sizing: border-box;
    background: #F7F3E8;


    .tab-content {
      width: 100%;

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

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



        .name {
          font-size: 1.2em;
          line-height: 1.5em;
          font-weight: bold;
          margin: 10px 0;
          font-family: 'SourceHanSansCN-Medium';
          color: #333333;
        }

        .abstract {
          color: #88866F;
          font-size: 0.9em;
          line-height: 1.2em;
          margin-bottom: 10px;
        }

        .bottom-box {
          display: flex;
          justify-content: space-between;

          .location {
            font-family: 'SourceHanSansCN-Regular';
            color: #9D4F0B;
            font-size: 0.9em;
            max-width: 80%;
          }

          .time {
            font-family: 'SourceHanSansCN-Regular';
            color: #9D4F0B;
            font-size: 0.9em;
          }

        }

        .detail {
          font-size: 0.8em;
          color: gray;
          margin-top: 10px;
        }
      }
    }

    .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>