<!-- 引产入校 -->
<template>
  <div style="background-color: #fff">
    <div class="banner">
      <img src="https://webapp-pub.ezijing.com/www/pc/digital/yx_4/banner.png" />
      <div class="cover">专业共建 · 多维赋能 · 成果导向</div>
    </div>
    <div class="main">
      <ul class="tab">
        <li
          :class="{ 'is-active': tabActive === item.prop }"
          v-for="(item, index) in tabs"
          :key="index"
          @click="handleTabClick(item)">
          {{ item.name }}
        </li>
      </ul>
      <div class="list" v-if="!showArticle">
        <div class="list-item" v-for="item in list" :key="item.id" @click="handleClick(item)">
          <img :src="item.web_img_uri" class="list-item-pic" loading="lazy" />
          <div class="list-item-content">
            <div class="list-item-content__date">{{ formatDate(item.start_time) }}</div>
            <div class="list-item-content__title">{{ item.title }}{{ item.remarks }}</div>
            <div class="list-item-content__text">{{ item.abstract }}</div>
          </div>
        </div>
      </div>
      <article class="article" v-else>
        <h1>{{ data.title }}</h1>
        <h1>{{ data.remarks }}</h1>
        <div class="article-text" v-html="data.content"></div>
      </article>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getArticleList } from '@/api'

const tabs = [
  { name: '赛事动态', prop: 'event_dynamics' },
  { name: '往届回顾', prop: 'past_review' },
]

const tabActive = ref('event_dynamics')
const list = ref([])
const showArticle = ref(false)
const data = ref({})

const formatDate = (value) => {
  const date = new Date(value * 1000)
  return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}

const fetchList = () => {
  const config = useRuntimeConfig()
  getArticleList({ project_id: config.public.projectId, type_tag: tabActive.value }).then((res) => {
    list.value = res.data.data
  })
}

const handleTabClick = (data) => {
  tabActive.value = data.prop
  showArticle.value = false
}

const handleClick = (item) => {
  if (item.uri) {
    window.open(item.uri)
  } else {
    data.value = item
    showArticle.value = true
  }
}

watch(
  tabActive,
  () => {
    fetchList()
  },
  { immediate: true },
)
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  img {
    width: 100%;
  }
  .cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4039);
    line-height: 1;
    color: #ffffff;
    h2 {
      font-size: 42px;
      font-family:
        Source Han Sans CN-Bold,
        Source Han Sans CN;
      font-weight: bold;
      line-height: 1;
    }
    h3 {
      margin-bottom: 20px;
      font-size: 24px;
      font-family:
        Source Han Sans CN-Medium,
        Source Han Sans CN;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 4px;
    }
    span {
      margin: 24px 0;
      width: 42px;
      height: 3px;
      background: #ffffff;
    }
    h6 {
      margin-bottom: 24px;
      font-size: 20px;
      font-family:
        Source Han Sans CN-Medium,
        Source Han Sans CN;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 2px;
    }
    p {
      max-width: 644px;
      font-size: 14px;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      line-height: 26px;
    }
    a {
      margin-top: 28px;
      width: 112px;
      height: 36px;
      font-size: 16px;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 36px;
      background: #aa1941;
      text-align: center;
    }
  }
  .cover-inner {
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
.main {
  max-width: 1200px;
  margin: 0 auto;
}
.tab {
  position: relative;
  margin-top: -50px;
  display: flex;
  column-gap: 40px;
  li {
    flex: 1;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
    font-size: 16px;
    font-family:
      Source Han Sans CN-Regular,
      Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    cursor: pointer;
    &.is-active {
      color: #fff;
      background-color: var(--main-color);
    }
  }
}
.list {
  padding: 64px 0;
}
.list-item {
  display: flex;
  padding: 36px 0;
  cursor: pointer;
  & + .list-item {
    border-bottom: 1px solid #e6e6e6;
  }
}

.list-item-pic {
  width: 218px;
  height: 120px;
  // height: fit-content;
  // height: 210px;
  // object-fit: cover;
}
.list-item-content {
  flex: 1;
  overflow: hidden;
  margin-left: 30px;
}
.list-item-content__date {
  font-size: 16px;
  font-weight: 300;
  line-height: 100%;
  color: #c6c6c6;
  // padding-top: 13px;
}
.list-item-content__title {
  font-size: 22px;
  font-weight: bold;
  line-height: 32px;
  color: #141414;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.list-item-content__text {
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: #666666;
  margin-top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.article {
  padding: 100px 0;
  h1 {
    font-size: 30px;
    font-family:
      Source Han Sans CN-Bold,
      Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    line-height: 46px;
    text-align: center;
  }
}
.article-text {
  margin-top: 30px;
  font-size: 16px;
  font-family:
    Source Han Sans CN-Regular,
    Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
}
</style>
