<template>
  <AppCard :title="isEn ? 'Updates' : '最新动态'" class="news-card">
    <template #header-aside><nuxt-link :to="baseUrl">查看更多+</nuxt-link></template>
    <div class="content-box" v-if="Object.keys(listData.first).length">
      <div class="news-left">
        <app-link :data="listData.first" :to="`${baseUrl}/${listData.first.id}`">
          <img :src="listData.first.web_img_uri" />
          <div class="mantle-box">
            <div class="tit" v-if="!isMobile">{{ listData.first.title }}</div>
            <div class="con-txt">{{ listData.first.abstract }}</div>
          </div>
        </app-link>
      </div>
      <ul class="news-right">
        <li v-for="(item, index) in listData.list" :key="index">
          <app-link :data="item" :to="`${baseUrl}/${item.id}`">
            <div class="time">{{ formatDate(item.start_time) }}</div>
            <div class="news-r-title">{{ item.title }}</div>
            <div class="del">{{ item.abstract }}</div>
          </app-link>
        </li>
      </ul>
    </div>
  </AppCard>
</template>
<script>
import AppCard from '@/components/AppCard.vue'
import AppLink from '@/components/Link'
export default {
  name: 'NewsCard',
  props: { baseUrl: String, default: '/about/news', params: Object },
  components: { AppCard, AppLink },
  async fetch() {
    const params = this.params || { project_id: process.env.projectId, type_tag: 'article_news_hot', page: 1, limit: 4 }
    await this.$axios
      .get('/api/cms/api/v1/articles', { params, headers: { 'Content-Type': 'application/json' } })
      .then(res => {
        this.data = res.data.data || []
      })
  },
  data() {
    return {
      isEn: false,
      data: []
    }
  },
  computed: {
    listData() {
      const [first = {}, ...list] = this.data
      return { first, list: list || [] }
    },
    isMobile() {
      return this.$store.state.isMobile
    }
  },
  methods: {
    formatDate(value) {
      const date = new Date(value * 1000)
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  },
  mounted() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
  }
}
</script>
<style lang="scss" scoped>
.is-pc {
  .news-card {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0;
    .content-box {
      display: flex;
      justify-content: space-between;
      .news-left {
        width: 780px;
        height: 500px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
        .mantle-box {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.2);
          padding: 30px 37px;
          .tit {
            font-size: 24px;
            font-weight: bold;
            line-height: 100%;
            color: #ffffff;
            width: 696px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .con-txt {
            width: 461px;
            font-size: 14px;
            line-height: 24px;
            color: #ffffff;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-top: 10px;
          }
        }
      }
      .news-right {
        li {
          width: 366px;
          border-bottom: 1px solid #e3e3e3;
          padding-bottom: 19px;
          margin-bottom: 30px;
          cursor: pointer;
          .time {
            font-size: 16px;
            font-weight: normal;
            line-height: 100%;
            color: #8e1e22;
          }
          .news-r-title {
            font-size: 22px;
            font-weight: bold;
            line-height: 30px;
            color: #333333;
            margin-top: 15px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .del {
            width: 350px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            line-height: 100%;
            color: #999999;
            margin-top: 15px;
          }
        }
      }
    }
  }
}
.is-h5 {
  .news-card {
    .content-box {
      // height: 2.18rem;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
      .news-left {
        position: relative;
      }
      .mantle-box {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgba(8, 8, 8, 0.45);
        padding-bottom: 0.14rem;
        .con-txt {
          font-size: 0.12rem;
          font-weight: bold;
          line-height: 0.17rem;
          color: #ffffff;
          padding: 0.14rem 0.32rem 0 0.19rem;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
    .news-right {
      li {
        margin-top: 0.1rem;
        padding: 0.13rem 0.14rem 0.11rem 0.12rem;
        background: #fff;
        .time {
          font-size: 0.1rem;
          line-height: 100%;
          color: #ab0a3d;
        }
        .news-r-title {
          font-size: 0.14rem;
          color: #333333;
          margin-top: 0.1rem;
          line-height: 0.21rem;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .del {
          font-size: 0.11rem;
          line-height: 0.2rem;
          color: #666666;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
</style>
