<template>
  <div class="news-content-box">
    <ul class="list-content">
      <template v-for="(item, index) in data">
        <template v-if="item.uri">
          <a :href="item.uri" target="_black" :key="index">
            <li>
              <img :src="item.web_img_uri" alt="" />
              <div class="right-con">
                <div class="time">{{ formatDate(item.start_time) }}</div>
                <div class="title">{{ item.title }}</div>
                <div class="text">{{ item.abstract }}</div>
              </div>
            </li>
          </a>
        </template>
        <template v-else>
          <li :key="index" @click="handleClick(item)">
            <img :src="item.web_img_uri" alt="" />
            <div class="right-con">
              <div class="time">{{ formatDate(item.start_time) }}</div>
              <div class="title">{{ item.title }}</div>
              <div class="text">{{ item.abstract }}</div>
            </div>
          </li>
        </template>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array
    }
  },
  data() {
    return {
      listData: []
    }
  },
  methods: {
    formatDate(value) {
      const date = new Date(value * 1000)
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    },
    handleClick(item) {
      this.$emit('onClick', item)
    }
  },
  mounted() {
    console.log(this.data)
  }
}
</script>
<style lang="scss" scoped>
.news-content-box {
  .list-content {
    width: 900px;
    margin: 0 auto;
    background: #fff;
    li {
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #e6e6e6;
      margin-bottom: 20px;
      padding-bottom: 36px;
      cursor: pointer;
      &:hover {
        .right-con {
          .text {
            color: #141414;
          }
        }
      }
      img {
        width: 320px;
        height: 210px;
        display: block;
      }
      .right-con {
        width: 550px;
        margin-left: 30px;
        .time {
          font-size: 16px;
          font-weight: 300;
          line-height: 100%;
          color: #aa1941;
          padding-top: 13px;
        }
        .title {
          font-size: 22px;
          font-weight: bold;
          line-height: 32px;
          color: #141414;
          margin-top: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .text {
          font-size: 14px;
          font-weight: 300;
          line-height: 24px;
          color: #666666;
          margin-top: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
