<template>
    <div class="p_all_200">
        <div class="container0">

          <div class="con_body_list leftbox">
              <p class="title_item">{{dataDetails.title}}</p>
              <p class="time_show">时间：{{dataDetails.pushTime}}</p>
              <div class="text_info" v-html="dataDetails.content">
                  <!-- {{dataDetails.content}} -->
              </div>
              <span class="label" v-if="dataDetails.noticeType == 0"><img src="@/assets/img/state_1.png" alt=""></span>
                <span class="label" v-if="dataDetails.noticeType == 1"><img src="@/assets/img/state_2.png" alt=""></span>
          </div>
          <div class="rightbox">
                <div class="box" v-for="(item,index) in newsData" :key="index">
                    <span class="title_item" @click="lookdetails(item.id)">{{item.title}}</span>
                    <span class="label" v-if="item.noticeType == 0"><img src="@/assets/img/state_1.png" alt=""></span>
                    <span class="label" v-if="item.noticeType == 1"><img src="@/assets/img/state_2.png" alt=""></span>
              </div>
            

                <div class="pagination">
                    <pagination 
                      small
                      :background="false"
                      :layout="layout"
                      @eventSizeChange="eventSizeChange" 
                      @eventCurrentChange="eventCurrentChange" 
                      :total="total" 
                      :pageSize="pageSize">
                    </pagination>
                  </div>
  
          </div>

        </div>
    </div>
</template>

<script>
import pagination from "@/components/common/pagination"
    export default {
        name: 'noticeDetial',
        data() {
            return {
              dataDetails:[],
              layout:"total,prev, pager,next",
              id:"",
              pageSize:12,
              total:0,
              page:1,
              newsData:[]
            }
        },
        components:{
          pagination
        },
        mounted(){
          this.id = this.$route.query.noticeId;
          // if(this.id){
          //   this.init(this.id);
          // }
       
          this.getList();
          this.init(this.id);
        },
        methods: {
          lookdetails(id){
              this.init(id)
          },
          init(id){
            this.$axios.get('/notice/getInfo',{
              params:{
                id:id
              }
            })
            .then((res) => {
              if(res.data.code == 200){
                this.dataDetails = res.data.data
              }
            })
            .catch((err) => {console.log(err)})
          },
           getList(){
              var params = {
                page:this.page,
                pageSize:this.pageSize,
                type:0
              }
              this.$axios.get('/notice/list',{
              params
                })
              .then((res) => {
                let {code,data} = res.data;
                if(code == 200){
                  if(data.list.length>0){
                    this.newsData = data.list;
              
                    // this.init(this.newsData[0]['noticeId'])
                  }
                  this.total = ~~data.total;
                  
                }else{
                  this.$message.error(res.data.message);
                }
              })
              .catch((err) => {console.log(err)})
            },
            eventSizeChange(e) {
              this.pageSize = e;
              this.getList();
            },
            eventCurrentChange(e) {
              this.page = e;
              this.getList();
            },
        },
    }

</script>

<style lang="scss" scoped>
>>>.pagination .el-pagination{
  text-align: center;
}
.container0{
  overflow: hidden;
  min-height: 78vh;
  display: flex;
}
.con_body_list{
  position: relative;
  padding: 40px;
  width: 920px;
  height: 100%;
  box-sizing: border-box;
}
.leftbox{
    .title_item {
    font-size: 18px;
    padding-bottom: 6px;
    padding-right: 16px;
    text-align: center;
    font-weight: bold;
    line-height: 26px;
    margin-bottom: 4px;
  }
  .time_show {
    color: #999;
    padding-bottom: 12px;
    font-size: 14px;
    text-align: center;
  }
  .text_info {
    display: block;
    font-size: 16px;
    line-height: 30px;
    overflow: hidden;
    text-indent: 2rem;
  }
  .label{
    display: block;
    position: absolute;
    left: 0;
    top: 15px;
    width: 56px;
    height: 20px;
  }
}
.rightbox{
  width: 300px;
  box-sizing: border-box;
  border-left: 1px solid #f5f5f5;
  min-height: 100%;
  .box{
      position: relative;
      height: 54px;
      border-bottom:1px solid #f5f5f5;
      margin: 0 8px;
      &:last-child{
          border:none;
    }

    }
    
    .title_item {
        font-size: 14px;
        line-height: 54px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        padding-left: 56px;
        cursor: pointer;
    }
    .time_show {
        color: #999;
        padding-bottom: 12px;
        font-size: 14px;
    }
    .label{
      display: block;
      position: absolute;
      left: 0;
      top: 17px;
      width: 56px;
      height: 20px;
    }
}
</style>

