<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <div class="news-content-box">
      <card :title="$t('home.news.title')">
        <template #header-aside
          ><nuxt-link to="/news/hot">{{ $t('viewMore') }}</nuxt-link></template
        >
        <div class="content-box" v-if="Object.keys(listData.first).length">
          <div class="news-left">
            <app-link :data="listData.first" :to="`/news/hot/${listData.first.id}`">
              <img :src="listData.first.web_img_uri" alt="" />
              <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="`/news/hot/${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>
      </card>
    </div>
  </div>
</template>
<script>
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
  name: 'news',
  components: {
    Card,
    AppLink
  },
  async fetch() {
    const params = { project_id: process.env.newProjectId, type_tag: 'article_news_hot', page: 1, limit: 4 }
    await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
      this.data = res.data.data || []
    })
  },
  data() {
    return {
      data: [],
      titleParams: {
        name: '最新动态',
        more: {
          path: '/news/hot'
        }
      }
    }
  },
  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)
      console.log(date.getMonth())
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
}
</script>
<style lang="scss" scoped>
.is-pc {
  .news-content-box {
    width: 1200px;
    margin: 0 auto;
    padding-top: 65px;
    .content-box {
      display: flex;
      justify-content: space-between;
      padding-top: 26px;
      .news-left {
        width: 780px;
        height: 500px;
        position: relative;
        img {
          width: 100%;
          height: 500px;
          display: block;
        }
        .mantle-box {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 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-content-box {
    .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>
