<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang='ts'>
import { DynamicApi } from '@/api/api/dynamic';
import { showToast } from 'vant';


const active = ref(0)

const router = useRouter()

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

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

export type DynamicType = {
  createTime: string,
  creatorId: number,
  creatorName: string,
  description: string,
  dirCode: string,
  fileIds: string,
  files: any,
  id: number,
  name: string,
  publishDate: string,
  rtf: string,
  thumb: string,
  type: string,
  updateTime: string
}

const typeList = ref([] as any)
const allData = ref([] as DynamicType[])

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

const getTypeList = async () => {
  // 获取珍藏类型
  const resType: any = await DynamicApi.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
    })
    console.log(typeList.value)
  } else {
    showToast(resType.msg)
  }

  getList()
}


const getList = async () => {
  searchParames.value.dictId = active.value == 0 ? null : typeList.value[active.value].id!
  const res: any = await DynamicApi.getDynamicList(searchParames.value)
  if (res.code == 0) {
    allData.value = res.data.records
    data.value = allData.value
  } else {
    showToast(res.msg)
  }
}

watch(active, () => {
  getList()
})

onMounted(() => {
  getTypeList()
})

</script>

<template>
  <div class='dynamic'>

    <div class="tabs">
      <div class="tab-item" :class="{ active: index === active }" v-for="(item, index) in typeList" :key="item.id"
        @click="active = index">{{ item.name }}</div>
    </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="item.thumb" alt="">
        <div class="title">{{ item.name }}</div>
        <div v-show="item.description != ''" class="abstract">{{ item.description }}</div>
        <div class="time">
          发布时间：{{ item.publishDate }}
        </div>
      </div>
    </div>
    <div class="no-data" v-else>
      <img src="@/assets/images/no-data.png" alt="">
      <div class="tips">暂时没有数据 ，请试一下其他关键字</div>
    </div>
  </div>

</template>

<style lang='less' scoped>
* {
  box-sizing: border-box;
}



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



  .tabs {
    // height: 40px;
    white-space: nowrap;
    overflow-x: auto;
    padding: 15px 10px 5px 0px;
    // padding-top: 10px;
  
    margin: 0 10px;
    
    font-family: 'SourceHanSansCN-Regular';

    &::-webkit-scrollbar {
      height: 0px
      /* 或 width: 0; */
    }

    .tab-item {
      margin-left: 10px;
      display: inline-block;
      width: 85px;
      height: 30px;
      float: none;
      font-size: 0.9rem;
      line-height: 30px;
      text-align: center;
      background-color: #F1E9D4;
      border-radius: 5px;
      // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
      color: rgba(0, 0, 0, 0.8);
      color: #88866F;
    }

    .active {
      background: #9D4F0B;
      color: #F7F3E8;
    }
  }

  // padding: 0 10px;\
  .tab-content {
    width: 100%;
    padding: 20px;
    max-height: calc(100vh - 8vh);
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
      /* 或 width: 0; */
    }

    .activity-card {
      width: 100%;
      // background: rgba(177, 177, 177, 0.226);
      border-radius: 15px;
      // padding: 20px;
      margin-bottom: 30px;

      .thumb {
        width: 100%;
        border-radius: 5px;
        margin-bottom: 5px;
      }

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

      .abstract {
        font-size: 1.1em;
        color: #88866F;
        line-height: 1.4em;
        font-family: 'SourceHanSansCN-Regular';
        margin-bottom: 5px;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;

      }

      .time {
        font-size: 0.9em;
        line-height: 1.4em;
        width: 100%;
        color: #9D4F0B;
        font-family: 'SourceHanSansCN-Regular';

      }


    }
  }

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