<!-- 引产入校 -->
<template>
  <div style="background-color: #fff">
    <div class="banner">
      <img src="https://webapp-pub.ezijing.com/www/pc/digital/yx_4/banner.png" />
    </div>
    <div class="main">
      <ul class="tab">
        <li :class="{ 'is-active': tabActive === item.prop }" v-for="item in tabs" @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>
import { getArticleList } from '@/api'

export default {
  data() {
    return {
      tabs: [
        { name: '赛事动态', prop: 'event_dynamics' },
        { name: '往届回顾', prop: 'past_review' }
      ],
      tabActive: 'event_dynamics',
      list: [],
      showArticle: false,
      data: {}
    }
  },
  watch: {
    tabActive: {
      immediate: true,
      handler() {
        this.fetchList()
      }
    }
  },
  methods: {
    formatDate(value) {
      const date = new Date(value * 1000)
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    },
    fetchList() {
      getArticleList({ project_id: process.env.projectId, type_tag: this.tabActive }).then(res => {
        this.list = res.data.data
      })
    },
    handleTabClick(data) {
      this.tabActive = data.prop
      this.showArticle = false
    },
    handleClick(data) {
      if (data.uri) {
        window.open(data.uri)
      } else {
        this.data = data
        this.showArticle = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.banner {
  img {
    width: 100%;
  }
}
.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>
