<template>
  <div class="relate-news">
    <div class="title">
      最新资讯：
    </div>
    <div class="item" v-for="item in newsList" :key="item.ID" @click="clickNews(item)">
      <p class="item-title">{{item.TIT}}</p>
      <span class="time">{{item.PUB_DATE}}</span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'RelateNews',
  props: ['currentId'],
  data () {
    return {
      newsList: [],
    }
  },
  computed: mapState({
      purchaseColumn: 'purchaseColumn',
      purchaseList: 'purchaseList',      
    }),
  methods: {
    clickNews (item) {
      window.location.href = "#/article?id="+item.ID+'&purchase='+item.purchase     
    },
    getRelateNews () {
      let data = {
        SCENE_ID: '',
        MODULE_ID: '226273',
        PAGE_NO: '1',
        PAGE_SIZE: '4',
      }
      let _this = this
      fql.h5ucm['资讯列表查询']({
        data: JSON.stringify(data)        
      }, false).then(function(res){
        if(res.RNUM == '1'){
          let result = JSON.parse(res.list[0].rts_data)
          if(result.code == '0'){
            let list = result.data.FUNCTION_RESULT_LIST[0].NEWS_LIST
            for(let i=3; i>=0; i--){
              if(list[i].ID != _this.currentId){
                list[i].PUB_DATE = (list[i].PUB_DATE).substring(0, 19)
                _this.newsList.push(list[i])
              }
            }
          if(_this.purchaseColumn == false){
            for(let i=0; i<_this.newsList.length; i++){
              _this.newsList[i].purchase = false;
              let index = _this.purchaseList.indexOf(_this.newsList[i].ID)
              if(index != -1){
                _this.newsList[i].purchase = true;
              }
            }
          }else{
            for(let i=0; i<_this.newsList.length; i++){
              _this.newsList[i].purchase = true;
            }            
          }            
          }
        }
      });
    },    
  },
  mounted () {
    this.getRelateNews();
  },
}
</script>

<style scope>
.relate-news .title {
  font-size: 16px;
}
.relate-news .item {
  border-bottom: 1px dashed rgba(255,255,255,.15);
  padding: 15px 0;
  cursor: pointer;
}
.relate-news .item-title {
  font-size: 18px;
  color: #EAEBF0;
  margin-bottom: 10px;
  width: 1130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.relate-news .time {
  color: #767C8A;
}
</style>