<template>
  <AppCard :title="$t('home.bulletin.title')" class="home-news">
    <template #header-aside>
      <nuxt-link to="/about/news">{{ $t('viewMore') }}</nuxt-link>
    </template>
    <div class="news-content">
      <div class="left-content">
        <div class="list">
          <div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-no-swiping">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in activityList" :key="index">
                <div class="li">
                  <div class="txt">{{ item.title }}</div>
                  <div class="time">{{ item.abstract }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <ul>
          <template v-for="(item, index) in listData">
            <app-link :key="index" :data="item" :to="`/about/news/${item.id}`">
              <li>
                <div class="time-block">
                  <div class="m-time">{{ formatMD(item.start_time) }}</div>
                  <div class="t-time">{{ formatYY(item.start_time) }}</div>
                </div>
                <div class="text">{{ item.title }}</div>
              </li>
            </app-link>
          </template>
        </ul>
      </div>
    </div>
  </AppCard>
</template>
<script>
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
  components: { AppCard, AppLink },
  data() {
    return {
      listData: [],
      swiperOption: {
        observer: true,
        observeParents: true,
        speed: 300,
        autoplay: true,
        delay: 3000,
        loop: true,
        direction: 'vertical',
        height: 82,
        loopAdditionalSlides: 1
      },
      activityList: []
    }
  },
  async fetch() {
    const params = {
      project_id: process.env.projectId,
      type_tag: 'article_news',
      page: 1,
      limit: 3
    }
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
  },
  mounted() {
    this.getActivity()
  },
  methods: {
    // 2021
    formatYY(value) {
      const date = new Date(value * 1000)
      return date.getFullYear()
    },
    // 2/14
    formatMD(value) {
      const date = new Date(value * 1000)
      return date.getMonth() + 1 + '/' + date.getDate()
    },
    getActivity() {
      const params = {
        project_id: process.env.projectId,
        type_tag: 'www_activity'
      }
      this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
        this.activityList = res.data.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.home-news {
  padding-top: 80px;
  max-width: 1200px;
  margin: 0 auto;

  .news-content {
    margin-top: 15px;
    display: flex;
    .left-content {
      width: 771px;
      height: 282px;
      background: #ffffff;
      box-shadow: 0px 0px 29px rgba(0, 0, 0, 0.03);
      padding: 60px 88px 60px 74px;
      display: flex;
      .tit {
        font-size: 34px;
        font-weight: 500;
        line-height: 51px;
        color: #424242;
        padding-top: 29px;
        text-align: center;
      }
      .list {
        overflow: hidden;
        ::v-deep {
          .swiper-container {
            height: 100%;
            transform: translateY(-2px);
          }
        }
        .swiper-slide-active {
          .li {
            border-bottom: 1px solid #999999;
          }
        }
        // width: 378px;
        // margin-left: 60px;
        // transform: translateY(-15px);
        .li {
          display: flex;
          align-items: center;
          padding-top: 26px;
          padding-bottom: 26px;
          .txt {
            width: 430px;
            font-size: 18px;
            font-weight: 400;
            // line-height: 100%;
            color: #424242;
            text-align: center;
          }
          .time {
            font-size: 30px;
            font-weight: bold;
            line-height: 100%;
            color: #aa1941;
            margin-left: 40px;
          }
        }
      }
    }
    .right-content {
      margin-left: auto;
      ul {
        li {
          display: flex;
          padding: 19px 0 15px;
          align-items: center;
          border-top: 1px solid #e3e3e3;
          cursor: pointer;
          &:nth-child(1) {
            border: none;
          }
          &:hover {
            .text {
              color: #aa1941;
            }
          }
          .time-block {
            width: 76px;
            height: 58px;
            background: #aa1941;
            border: 10px solid #aa1941;
            border-radius: 5px;
            .m-time {
              font-size: 18px;
              font-family: Helvetica Neue LT Pro;
              font-weight: normal;
              // line-height: 53px;
              color: #ffffff;
              opacity: 0.8;
              text-align: center;
            }
            .t-time {
              font-size: 14px;
              font-weight: normal;
              line-height: 15px;
              color: #ffffff;
              opacity: 0.8;
              text-align: center;
            }
          }
          .text {
            width: 275px;
            font-size: 18px;
            line-height: 24px;
            color: #424242;
            margin-left: 15px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
