<template>
    <div class="main-contain">
        <div class="position">
          <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container">
            <div class="pl">
              <el-checkbox><span class="comment">全部评论</span></el-checkbox>      
            </div> 
            <div class="border2"></div>
            <div v-for="item in comments" :key="item.id">
            <div class="check"><el-checkbox></el-checkbox></div>
            <div class="img">
                 <img :src="item.comment_user_avater" style="width:50px;height:50px">
            </div>
             <div>
                <div class="commentname">{{item.comment_user_name}}<span class="time">{{item.ctime}}</span></div>
                <div class="reply">
                  |&nbsp;&nbsp;<span @click="replay()">回复</span>&nbsp;&nbsp;
                  |&nbsp;&nbsp;展开&nbsp;&nbsp;
                  |&nbsp;&nbsp;删除&nbsp;&nbsp;
                  </div>
                <div class="content">
                  {{item.content}}
                 </div> 
                  <div class="reply_box" v-if="show">
                        <textarea name="" id="" cols="163" rows="5" class="reply " placeholder="回复:"></textarea>
                        <div class="clearfix"></div>
                        <div class="button" style="display: block;" myAttr="123">
                            <el-button @click="cancel()">取消</el-button>
                            <el-button type="primary" @click="send()">发送</el-button>
                       </div>
                 </div>
                  <div class="reviewed" v-if="shows">
                     你&nbsp;回复了&nbsp;:
                  </div>   
                <div class="border"></div>  
             </div>  
            </div>
              <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :page-sizes="[10,20,50,100]"
               :page-size="10"
               background
               style="margin-top:20px;float: right"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
             </el-pagination>             
        </div>
    </div>
</template>

<script>
   import BreadCrumb from '../components/bread-crumb'
   import {getReplyAllComents} from '@/api/act/submitinfo'
import { constants } from 'crypto';
  export default {
    name: 'commentList',
    components:{
      BreadCrumb
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '文章管理' },
          { path: '/articles/commentList', name: '评论列表' }
        ],
        show:false,
        shows:false,
        form:{
          page:1,
          limit:10,
          comment_user_name:'',
          content:'',
          comment_user_avater:'',
        },
        comments:[],
        total:0,
      }
    },
    methods:{
      replay(){
        this.show = true;
      },
      cancel(){
        this.show = false;
      },
      send(){
        this.shows = true;
      },
      handleSizeChange(limit){
         this.form.limit = limit;
         this.getReplyAllComents();
      },
      handleCurrentChange(page){
         this.form.page = page;
         this.getReplyAllComents();
      },
        getReplyAllComents(){
          getReplyAllComents(this.form).then(response=>{
               if(response.data.state ==1){
                var comments =  response.data.data.comments;
                this.comments =  response.data.data.comments;
                 console.log("评论列表",comments)
                var total =  response.data.data.total;
                 this.total =  response.data.data.total;
                 console.log("总条数",total)
               }
          });
        }
    },
    created(){
      this.getReplyAllComents();
    }
  }
</script>

<style scoped>

      .border{
       border: 1px #dcdfe6 solid;
       margin-top: 140px;
     }
     .border2{
       border: 1px #dcdfe6 solid;
     }
     .comment{
       font-size: 20px;
       color: black;
       font-weight: 700;
     }

     .commentname{
       margin-top: 20px;
       font-size: 20px;
       color: blue;
       margin-left: 100px;
   }
   .reply{
       float: right;
       margin-top: -20px;
       font-size: 20px;
       color: #495060;
   }
   .content{
       font-size: 20px;
       margin-top: 15px;
       margin-left: 100px;
   }
   .check{
      margin-top: 20px;
      float: left;
   }
   .time{
     color: #495060;
   }
    .reply_box{
       margin-top: 30px;
   }
   .button{
       float: right;
       margin-top: 5px;
            
   }
     .reviewed{
       float: right;
       margin-top: 30px;
       margin-left: 100px;
       padding-top: 16px;
       width: 1650px;
       height:50px;
       font-size: 15px;
       border:1px solid #f4f7fa;
       background-color: #f4f7fa;
   }

   .pl{
     margin-bottom: 50px;
   }
   .img{
     float: left;
     margin-left: 20px;
     margin-top: 20px;
   }
</style>
