<template>
  <!-- 新闻公告 -->
  <div class="news-list">
    <div
      v-for="newsItem in newsList"
      :key="newsItem.id"
      class="news-item"
      @click="readNewsItem(newsItem)"
    >
      <div class="news-item__left">
        <div class="news-item__title">
          <i :class="newsItem.icon ? newsItem.iocn : 'iconfont icon-read1'"></i>
          <el-tooltip
            class="item"
            effect="dark"
            :content="newsItem.title"
            placement="top"
          >
            <span>{{ newsItem.title }}</span>
          </el-tooltip>
        </div>
        <div v-if="newsItem.titleDescription" class="news-item__desc">
          {{ newsItem.titleDescription }}
        </div>
      </div>
      <div class="news-item__right">
        {{ newsItem.drafter }}&nbsp;&nbsp;
        {{ newsItem.createTime | dateTimeFormat }}
      </div>
    </div>

    <home-news-read ref="newsRead" :news-id="newsId" />
  </div>
</template>

<script>
  import HomeNewsRead from './HomeNewsRead'
  import { getNewsList } from '@/api/portal'
  export default {
    name: 'HomeNewsList',
    components: {
      HomeNewsRead,
    },
    filters: {
      dateTimeFormat(val) {
        const moment = require('moment')
        return val ? moment(val).format('YYYY-MM-DD HH:mm') : ''
      },
    },
    props: {
      classifyId: {
        type: String,
        default: 'all',
      },
    },
    data() {
      return {
        newsId: '',
        newsList: [],
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        getNewsList(this.classifyId).then((data) => {
          this.newsList = data ? data : []
        })
      },
      readNewsItem(news) {
        this.newsId = news.id
        this.$refs.newsRead.showDialog()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .news-list {
    width: 100%;
    cursor: pointer;
    .news-item {
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-radius: $base-border-radius;
      .news-item__left {
        width: 50%;
        .news-item__title {
          span {
            color: $base-font-color;
            font-size: $base-font-size-default;
          }
        }
        .news-item__desc {
          color: $base-color-grey;
          font-size: $base-font-size-small;
          margin-top: 10px;
        }
      }
      .news-item__right {
        color: $base-font-color;
        font-size: $base-font-size-small;
      }
      &:hover {
        background: #f5f7fa;
      }
      &:not(:last-child) {
        border-bottom: 1px solid $base-border-color;
      }
    }
  }
</style>
