<template>
    <div class="message" >
        <div class='sidebar'>
          <div class="sidebar-title">信息公告</div>
          <el-col :span="12">
            <el-menu  :default-active="123+''" class="el-menu-vertical-demo"  @select="handleSelect">
              <el-menu-item :index = "item.id +''" v-for="item in artList" :key="item.id">    <!-- :index="`?id=${item.id}`" -->
                <i class="el-icon-menu"></i>
                <span slot="title">{{item.title}}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </div>
      <ul v-show="isList">
        <li v-for="item in messageList" :key="item.id" @click="urlChage">
          <nuxt-link :to="{name:'index-message-news',params:{id:(item.id)}}" :messageContext="item" class="flex-between link-style" router>
            <div class="t2">{{item.title}}</div>
            <div class="t1">发布时间：{{item.createTime}}</div>
          </nuxt-link>
        </li>
        <div class="pagination" v-if="isList">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :size ="size"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination >
        </div>
      </ul>
      
      <div v-for="item in messageList" :key="item.id" class="content" v-show="!isList">
          <h1>{{item.title}}</h1>
          <div class="flex-center pos">
            <span style="margin-right:20px">发布时间:{{item.createTime}}</span>
            <span>作者:{{item.author}}</span>
          </div>
          <div v-html="item.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>
</template>
<script>
import {
  getListContent,
  getCategoryList,
} from '@/common/list.js'
  export default {
    mounted(){
        this.getCategoryList()
        let message = {}
        message.currentPage = 1
        message.size = 10
        message.cateId = 123
        this.getListContent(message)
    },
    data() {
      return {
        contentList:'',
        isList:true,
        activeName: '1',
        conText:"",
        activeIndex: '',
        size:10,
        total:0,
        artId:0,
        artList:[],
        currentPage:1,
        messageContext:'',
        messageList: [/* {
            title: "工程招投标活动的突出问题与对策思路",
            time: "2020-09-09 18:12"
          },
          {
            title: "工程招投标活动的突出问题与对策思路",
            time: "2020-09-09 18:12"
          },
          {
            title: "工程招投标活动的突出问题与对策思路",
            time: "2020-09-09 18:12"
          } */
        ]
      }
    },
    methods:{
      returnPrev(){
        this.isList = true
      },
      urlChage(){
        this.isList = !this.isList
      },
      handleSelect(key, keyPath) {
         let keyValue = key/* .slice(4) */
         let message = {}
          message.cateId = keyValue
          this.getListContent(message,keyValue)
          this.isList = false
      },
      //分类列表
      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)
      },
      handleCurrentChange(val) {
        this.getListContent(val,this.size)
      },
    }
  }
</script>

<style scoped>
.pagination{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform:translateX(-50%);
}
/* .el-menu-item.is-active {
      background-color: #3370ff !important;
      color: #fff;
    } */
/*   .el-menu-item.is-active span{
    color: blue !important
  } */
  .message {
    border: 1px solid rgba(219, 219, 219, 1);
    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
  }
  h1{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .pos{
    margin-bottom: 50px;
  }
</style>


