<template>
  <AppCard :title="$t('menu.notice')">
    <template #title>
      <nuxt-link to="/about/news">{{ $t('menu.notice') }}</nuxt-link>
    </template>
    <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(item.abstract) }}</div>
                    <div class="t-time">{{ formatYY(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 * 1000) }}
                  </div>
                  <div class="t-time">
                    {{ formatYY(item.start_time * 1000) }}
                  </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)
      return date.getFullYear()
    },
    // 2/14
    formatMD(value) {
      const date = new Date(value)
      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>
.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>
