<template>
    <div class="message" >
        <div class='sidebar'>
          <div class="sidebar-title">信息公告</div>
          <el-col :span="12">
            <el-menu  :default-active="activeName" class="el-menu-vertical-demo"  @select="handleSelect">
              <el-menu-item :index = "item.id +''" v-for="item in artList" :key="item.id" router>
                <i class="el-icon-menu"></i>
                <span slot="title">{{item.title}}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </div>
        <ul >
          <li v-for="item in messageList" :key="item.id" @click="isClick(item.id)" v-show="isList">
            <!-- <nuxt-link :to="{name:'index-message-newsdetails',query:{id:(item.id)}}"  class="flex-between link-style" >-->
              <div class="flex-between link-style">
                  <div class="t2">{{item.title}}</div>
                  <div class="t1">发布时间：{{item.createTime}}</div>
              </div>
            <!-- </nuxt-link> -->
          </li>
          <div class="pagination" v-show="isList">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :size ="size"
                :page-sizes="[10, 20, 30, 40]"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination >
          </div>
        </ul>
      <div   class="content" v-show="!isList">
          <div >
            <h1>{{detailList.title}}</h1>
            <div class="flex-center pos">
              <span style="margin-right:20px">发布时间:{{detailList.createTime}}</span>
              <span>作者:{{detailList.author}}</span>
            </div>
            <div v-html="detailList.content" style="width:600px;margin:0 auto"></div>
            <div class="flex-center" style="margin-buttom:40px">
              <el-button type="primary" @click="returnPrev" style="margin-top:50px">返回</el-button>
            </div>
          </div>
      </div>
      
   </div>
</template>
<script>
import {
  getListContent,
  getCategoryList,
  getnewsdetails,
} from '@/common/list.js'
import Cookies from "js-cookie"
  export default {
    name: 'cardApplyQuery',
    mounted(){
        this.getCategoryList()
        let message = {}
        message.currentPage = 1
        message.size = 10
        let type = window.location.href.split("?id=")[1]
        if(type){
          this.activeName = type
          message.cateId = this.activeName
        }else{
          message.cateId = this.activeName
        }
        this.getListContent(message)
        let detailsType = Cookies.get("detailsType")
        let detailsId = Cookies.get("detailsId")
        //判断是否来自于首页底部三大模块
        if(detailsType =="1"){
          this.isClick(detailsId)
          Cookies.remove("detailsType")
          Cookies.remove("detailsId")
        }
    },
    /* async asyncData({params}){
        let message = {}
        message.currentPage = 1
        message.size = 10
        let type = location.href.split("?id=")[1]
        if(type){
          activeName = type
          message.cateId = activeName
        }else{
          message.cateId =  activeName
        }
        const res = await getCategoryList()
        const {data,total} = await getListContent(message)
        return {
          messageList : data,
          total : total,
          artList:res
        }
        let detailsType = sessionStorage.getItem("detailsType")
        let detailsId = sessionStorage.getItem("detailsId")
        if(detailsType =="1"){
          isClick(detailsId)
          sessionStorage.removeItem("detailsType")
          sessionStorage.removeItem("detailsId")
        }
      }, */
    data() {
      return {
        detailList:{
          
        },
        detailsId:'',
        contentList:'',
        isList:true,
        activeName: '124',
        conText:"",
        activeIndex: '',
        size:10,
        total:0,
        artId:0,
        artList:[],
        currentPage:1,
        messageContext:'',
        messageList: [
        ]
      }
    },
    methods:{
      handleSelect(key, keyPath) {
         let keyValue = key/* .slice(4) */
         this.detailsId = key
         let message = {}
          message.cateId = keyValue
          this.getListContent(message)
          let contentStatus = Cookies.get("contentStatus")
          if(contentStatus == '1'){
            this.isList = true
            this.getListContent(message)
            Cookies.remove("contentStatus")
          }
      },
      //分类列表
      async getCategoryList(){
        const {data} = await getCategoryList()
        this.artList = data
      },
      // 文章列表
       async getListContent(params){
        const {data,total} = await getListContent(params)
        this.messageList = data
        this.total = total
      }, 
      handleSizeChange(val) {
        /* this.getListContent(this.currentPage,val) */
        let mes = {
          currentPage:this.currentPage,
          size:val
        }
        this.getListContent(mes)
      },
      handleCurrentChange(val) {
        let mes = {
          currentPage:val,
          size:this.size
        }
        this.getListContent(mes)
      },
      //点击之后存储id 获取详情
      async isClick(id){
        const {data} = await getnewsdetails(id)
        this.detailList= data
        this.isList = false
        Cookies.set("contentStatus",1)
      },
      //返回
      returnPrev(){
        this.isList = true
        let mess = {
          cateId:this.detailsId
        }
        this.getListContent(mess)
      },
    }
  }
</script>

<style scoped>
.pagination{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform:translateX(-50%);
}
  .message {
    border: 1px solid rgba(219, 219, 219, 1);
    min-height:6.98rem;
    position: relative;
    left:115px;
    width:9.2rem
    
  }

  .message>ul>li {
    width: 9.23rem;
    height: .61rem;
    line-height: .61rem;
    box-sizing: border-box;
    padding-left: 0.3rem;
    padding-right: 0.55rem;
    border-bottom: 1px solid rgba(219, 219, 219, 1);
  }
  .message>ul>li div:last-child{
    color:rgba(151,152,153,1);
  }

  .message>.pagination{
    margin-top: 4rem;
  }
  .sidebar {
    width: 2.4rem;
    border: 1px solid rgba(219, 219, 219, 1);
    position: absolute;
    left:-217px
  }

  .el-menu {
    border-right: none;
  }

  .sidebar>.sidebar-title {
    width: 2.4rem;
    height: .60rem;
    line-height: .6rem;
    background: rgba(245, 246, 247, 1);
    text-align: center;
    font-size: .20rem;
    color: rgba(0, 0, 0, 1);
    font-weight: bold;
  }
  .el-col-12 {
    width: 100%;
  }
  .content{
    width:9.2rem;
    height:100%;
  }
  h1{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .pos{
    margin-bottom: 50px;
  }
  .link-style{
    cursor:pointer
  }
</style>


