<template>
  <AppCard 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="time-block">
                    <div class="m-time">{{ formatMD(Date.parse(item.abstract)) }}</div>
                    <div class="t-time">{{ formatYY(Date.parse(item.abstract)) }}</div>
                  </div>
                  <div class="txt">{{ item.title }}</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="content_con">
                  <div class="text">{{ item.title }}</div>
                  <div class="desc">{{ item.abstract }}</div>
                </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: 101,
        loopAdditionalSlides: 1,
        spaceBetween: 30
      },
      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 {
  max-width: 1200px;
  margin: 80px auto;

  .news-content {
    margin-top: 15px;
    display: flex;
    .left-content {
      width: 600px;
      height: 282px;
      background: #ffffff;
      box-shadow: 0px 0px 29px rgba(0, 0, 0, 0.03);
      padding: 40px 25px 40px 38px;
      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;
          }
        }

        .li {
          width: 549px;
          display: flex;
          align-items: center;
          padding-bottom: 30px;
          box-sizing: border-box;
          padding-left: 12px;

          .time-block {
            width: 70px;
            height: 70px;
            background: #aa1941;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .m-time {
              font-size: 20px;
              font-weight: normal;
              color: #ffffff;
              text-align: center;
              opacity: 0.8;
            }
            .t-time {
              font-size: 16px;
              font-weight: normal;
              line-height: 15px;
              color: #ffffff;
              opacity: 0.8;
              text-align: center;
            }
          }
          .txt {
            margin-left: 33px;
            width: 390px;
            font-size: 18px;
            font-weight: 400;
            color: #424242;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1; //超出第几行，关键在这里
            line-clamp: 1; //超出第几行，关键在这里
          }
        }
      }
    }
    .right-content {
      margin-left: 45px;
      height: 282px;

      ul {
        li {
          padding: 9px 0 22px 0;

          display: flex;
          align-items: center;
          cursor: pointer;
          &:nth-child(1) {
            border: none;
          }
          &:hover {
            .content_con {
              .text {
                color: #aa1941;
              }
              .desc {
                color: #aa1941;
              }
            }

            .time-block {
              background: #aa1941;
              .m-time {
                color: #ffffff;
                opacity: 1;
              }
              .t-time {
                color: #ffffff;
                opacity: 1;
              }
            }
          }

          .time-block {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.39);
            box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .m-time {
              font-size: 20px;
              font-weight: normal;
              color: #777777;
              opacity: 0.8;
            }
            .t-time {
              font-size: 16px;
              font-weight: normal;
              line-height: 15px;
              color: #777777;
              opacity: 0.8;
            }
          }
          .content_con {
            width: 459px;
            margin-left: 15px;

            .text {
              text-align: left;
              font-size: 18px;
              font-weight: 500;
              color: #333333;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              // margin-bottom: 11px;
            }
            .desc {
              text-align: left;

              font-size: 13px;
              font-weight: 400;
              line-height: 22px;
              color: #666666;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
</style>
