<template>
<div>
  <div class="right_con">
    <div class="news_info_fgx fl"></div>
    <p class="fl titles">公告通知</p>
    <div class="clear"></div>
    <Table :columns="newsList" :data="newsData" class="tables newtable" border @on-row-click='open_detail' ></Table>
    <div class="page">
      <Page :total="count" :page-size="10" size="small" show-total show-elevator @on-change="getNewsInfo"/>
    </div>
  </div>
  <Modal v-model="is_newDetail" :title="modalTitle" id="new_detail_modal" class-name="vertical-center-modal" width="776">
    <div class="modal_con" id='data_new_html_con' style="height:340px;overflow:auto">
      <p v-html="modal_con"></p>
    </div>
    <div class="modal_footer">
      <p class="fl">上一篇：<span class="lasttitle" @click="intoNewInfo(-1,lastTitle)">{{lastTitle}}</span></p>
      <p class="fr">下一篇：<span class="nexttitle" @click="intoNewInfo(1,nextTitle)">{{nextTitle}}</span></p>
    </div>
  </Modal>
</div>
</template>
<script>
import { changeUnixtime } from '@/assets/js/common'
export default {
  name: "data_news",
  data() {
    return {
      count:0,
      pindex:1,
      curIndex:0,
      modalTitle:'',
      lastTitle:'',
      nextTitle:'',
      modal_con:'',
      is_newDetail:false,
      newsList: [
        {
          title: "编号",
          key: "id",
          width: 140
        },
        {
          title: "标题",
          key: "title"
        },
        {
          title: "分类",
          render:(h,params)=>{
            if(params.row.category=='gonggao'){
              return h('span','公告通知')
            }
            if(params.row.category=='biaoyang'){
              return h('span','内部表扬')
            }
            if(params.row.category=='falv'){
              return h('span','法律法规')
            }
          }
        },
        {
          title: "通知时间",
          render:(h,params)=>{
            if(params.row.start_time===0){
              return h('span','未推送')
            }else{
              let time=changeUnixtime(params.row.start_time)
              return h('span',time)
            }
          }
        }
      ],
      newsData: []
    };
  },
  watch: {
    is_newDetail(n){}
  },
  methods: {
    open_detail(data,index){
      document.getElementById('data_new_html_con').scrollTop=0
      this.curIndex=index
      this.is_newDetail=true
      this.modalTitle=data.title
      this.modal_con=data.content
      this.lastTitle=index!==0?this.newsData[index-1].title:'无'
      this.nextTitle=index+1<=Number(this.newsData.length)-1?this.newsData[index+1].title:'无'
    },
    intoNewInfo(ix,title){
      if(title==='无'){return false}
      document.getElementById('data_new_html_con').scrollTop=0
      let index=Number(this.curIndex+ix)
      this.modalTitle=this.newsData[index].title
      this.modal_con=this.newsData[index].content
      this.lastTitle=index!==0?this.newsData[index-1].title:'无'
      this.nextTitle=index+1<=Number(this.newsData.length)-1?this.newsData[index+1].title:'无'
      this.curIndex=index
    },
    getNewsInfo(page=1){
      this.pindex=page
      this.$store.commit('changeloading',true)
      this.$api.getDataNewsInfo({limit:10,page:this.pindex}).then(data =>{
        if(data.code==200){
          this.newsData=data.data
          this.count=data.count
          this.$store.commit('changeloading',false)
        }else{
          this.$store.commit('changeloading',false)
          this.$Message.info(data.msg)
        }
      })
    }
  },
  created() {
    this.getNewsInfo()
  }
};
</script>
<style lang="less" scoped>
.modal_con{
  min-height: 300px;
  width: 100%;
  padding: 15px 10px;
  word-break: normal;
  color: rgba(96, 122, 149, 1);
  font-size: 13px;
  line-height:24px;
}
.modal_con img{
  width: 100%;
}
.news_info_fgx{
  width: 2px;
  height: 14px;
  background-color: rgba(0, 153, 255, 1);
  margin-top: 20px
}
.right_con .titles{
  margin-top: 15px;
  font-size: 15px;
  margin-left: 5px;
}
.newtable .ivu-table-row{
  color: rgba(96, 122, 149, 1)!important;
  cursor: pointer;
}
.modal_footer{
  width: 100%;
  height: 40px;
  padding: 8px 20px 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(52, 64, 78, 1);
  border-radius: 0px 0px 3px 3px;
}
.lasttitle,.nexttitle{
  cursor: pointer;
}
</style>




