<!-- 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 any)

const searchParames = ref({
  pageNum: 0,
  pageSize: 0,
  searchKey: ''
} as {
  pageNum: number,
  pageSize: number,
  searchKey: string
})

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

const getList = async () => {
  const res: any = await DynamicApi.getDynamicList(searchParames.value)
  if (res.code == 0) {
    data.value = res.data
  } else {
    showToast('活动信息获取失败')
  }
}

onBeforeMount(() => {
  // getList()
  data.value = [
    {
      type: '全部',
      activitys: [
        {
          id: 0,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
        {
          id: 1,
          title: '宁国博物馆开放日',
          thebm: '',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
        {
          id: 2,
          title: '宁国博物馆开放日',
          thebm: '',
          abstract: '',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
        {
          id: 3,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
      ]
    },
    {
      type: '展览开放',
      activitys: [
        {
          id: 4,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
      ]
    },
    {
      type: '展览开放',
      activitys: [
        {
          id: 5,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
      ]
    },
    {
      type: '展览开放',
      activitys: [
        {
          id: 6,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
      ]
    },
    {
      type: '展览开放',
      activitys: [
        {
          id: 7,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
      ]
    },
    {
      type: '展览开放',
      activitys: [
        {
          id: 7,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
      ]
    }, {
      type: '展览开放',
      activitys: [
        {
          id: 7,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
      ]
    }, {
      type: '展览开放',
      activitys: [
        {
          id: 7,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
      ]
    }, {
      type: '展览开放',
      activitys: [
        {
          id: 7,
          title: '宁国博物馆开放日',
          thebm: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
          abstract: '这是摘要这是摘要',
          mainBody: '这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文这是正文',
          videos: [
            'https://wxfalangchang.4dage.com/national/1687243969660/thumb/20230710_094753323140.mp4'
          ],
          releaseTime: '2023-12-27'
        },
      ]
    }
  ]
})
</script>

<template>
  <div class='dynamic'>
    <!-- <van-tabs v-model:active="active" id="tabs">
      <van-tab v-for="(item, index) in data" :key="index" :title="item.type">
       
      </van-tab>
    </van-tabs> -->

    <div class="tabs">
      <div class="tab-item" :class="{ active: index === active }" v-for="(item, index) in data" :key="item"
        @click="active = index">{{ item.type }}</div>
    </div>

    <div class="tab-content">
      <div class="activity-card" v-for="(item, index) in data[active].activitys" :key="index" @click="goDetai(item.id)">
        <img v-show="item.thebm != ''" class="thebm" :src="item.thebm" alt="">
        <div class="title">{{ item.title }}</div>
        <div v-show="item.abstract != ''" class="abstract">{{ item.abstract }}</div>
        <div class="time">
          发布时间：{{ item.releaseTime }}
        </div>
      </div>
    </div>
  </div>
</template>

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



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


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

    &::-webkit-scrollbar {
      display: none;
      /* 或 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: 20px;

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

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

      }

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

      }


    }
  }


}
</style>