<template>
    <div class="main-contain">
        <div class="position">
          <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container">
            <div class="pl">
               <el-checkbox  @change="selectAllFunc" v-model="selectAll"><span class="comment" >全部评论</span></el-checkbox>  
              <el-button size="small" icon="el-icon-delete" @click="openDeleteReply">批量删除</el-button>     
            </div> 
            <div class="border2"></div>

            <div v-for="(item,index) in comments" :key="item.id">
              <div class="check"><el-checkbox v-model='item.checked' @change="selectProduct"></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">{{format(item.ctime)}}</span>
                </div>
                <div class="reply">
                  |&nbsp;&nbsp;<span @click="replay(item.id)">回复</span>&nbsp;&nbsp;
                  |&nbsp;&nbsp;<span @click="spreadReplay(item.article_id,item.id)" id="span">展开</span>&nbsp;&nbsp;
                  |&nbsp;&nbsp;<span @click="deleteReply(item.id,index)">删除</span>&nbsp;&nbsp;
                  </div>
                <div class="content">
                  {{item.content}}
                 </div> 

                  <div class="reply_box"  v-show="showindex===item.id">
                        <textarea name="" id="" cols="162" rows="5" class="reply " placeholder="回复:" v-model="form.content"></textarea>
                        <div class="clearfix"></div>
                        <div class="button" style="display: block;" myAttr="123">
                            <el-button @click="cancel()">取消</el-button>
                            <el-button type="primary" @click="sendInformation(item.article_id,item.id)">发送</el-button>
                       </div>                      
                 </div>
                 
                 <div>
                 <div class="reviewed" v-for="(items,index) in Replycomments" :key="items.id" v-show="showReply==item.id">
                    <div> 你&nbsp;回复了{{items.comment_user_name}}:{{items.content}} </div>
                    <div  id="tub" class="el-icon-error" @click="clearRelyInfo(items.id,index)"></div>
                 </div>  
                 </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,sendInformation,spreadReplay,clearRelyInfo,deleteReply,openDeleteReply} from '@/api/act/submitinfo'
   import {getFileExtension,uParseTime} from '@/utils/tools'
import { constants } from 'crypto';
import { copyFile } from 'fs';
  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:[],
        Replycomments:[],
        total:0,
        showindex:-1,
        showReply:-1,
        checked: false,
        selectAll:false,
        selectReply:[],
      }
    },
    methods:{
      replay(id){
       this.showindex = id;
      },
      cancel(){
       this.showindex = 0;
      },
      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)
               }
          });
        },
        format(time){
              return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}"); 
        },
        sendInformation(artilcid,parentid){
             console.log("文章id",artilcid,parentid);
             sendInformation(artilcid,parentid,this.form.content).then(response=>{
                 if(response.data.state ==1){
                    var comment =  response.data.data.comment;
                    this.$message.success("发送成功");
                    console.log("comment",comment)
                 }
             })
        }, 
        spreadReplay(artilcid,parentid){
          // document.getElementById("span").innerHTML="收起";
          var spancontent = document.getElementById("span").innerHTML;
          if(spancontent == "展开"){
               document.getElementById("span").innerHTML="收起";
                this.showReply = parentid;
          } 
          if(spancontent == "收起"){
             document.getElementById("span").innerHTML = "展开";
             this.showReply = 0;
          }              
          console.log("文章id",artilcid,parentid);
          spreadReplay(artilcid,parentid).then(response=>{
               if(response.data.state == 1){
                  var Replycomments  = response.data.data.comments;
                  this.Replycomments  = response.data.data.comments;
                  console.log("回复列表",Replycomments);
               }  
          })
        },
        clearRelyInfo(id,index){
           console.log("id为",id);
            this.$confirm("确定删除此评论?",'删除提示',{
             dangerouslyUseHTMLString:true,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(()=>{
               clearRelyInfo(id).then(response=>{
                  if(response.data.state ==1){
                     this.Replycomments.splice(index,1)
                     this.$message.success("删除成功");
                  }else{
                    this.$message.error("删除失败");                   
                  }
             }).catch(e=>{});
           }).catch(() => {
               return false
            });            
        },
        selectProduct(val){
            for(let i=0,len=this.comments.length;i<len;i++){
                if(!this.comments[i].checked){
                   this.selectAll = false;
                }else{
                  this.selectAll = true;
                }
            } 
            this.selectReply = val; 
        },
        selectAllFunc(val){
           this.comments.map((item,i)=>{
             item.checked = val;
           }) 
        },
        deleteReply(id,index){
          this.$confirm("确定删除此评论?",'删除提示',{
            dangerouslyUseHTMLString:true,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
          }).then(()=>{
             deleteReply(id).then(response=>{
                 if(response.data.state ==1 ){
                    this.comments.splice(index,1)
                    this.$message.success("删除成功");   
                 }else{
                   this.$message.error("删除失败");
                 }
             }).catch(e=>{}); 
          }).catch(() => {
               return false
            }); 
        },
        openDeleteReply(){
          if(this.selectReply.length == 0){
             this.$message.error("请选择你要删除的信息");
             return false;
          }
          this.$confirm("确定删除此评论?",'删除提示',{
             dangerouslyUseHTMLString:true,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
          }).then(()=>{
              var ids = [];
              var idMap = {};
              for (const index in this.selectReply) {
                ids.push(this.selectReply[index].id);
                idMap[this.selectReply[index].id] = this.selectReply[index].id;
              }
              openDeleteReply({ids:ids}).then(response=>{
                  if(response.data.state==1){
                    // var commentslength = this.comments.length;
                    // for (let index = commentslength-1; index>=0; index--) {
                    //    if(this.comments[index].id in idMap){
                    //       this.comments.splice(index,1);
                    //    }
                    // }
                    // this.$message.success("删除会员成功");
                  }
              })
          })
        }
    },
    created(){
      this.getReplyAllComents();
    }
  }
</script>

<style scoped>

      .border{
       border: 1px #dcdfe6 solid;
       margin-top: 50px;
     }
     .border2{
       border: 1px #dcdfe6 solid;
       margin-top: 20px;
     }
     .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;
     font-size: 15px;
   }
    .reply_box{
       margin-top: 40px;
   }
   .button{
       float: right;
       margin-top: 5px;
            
   }
    .reviewed{
       margin-top: 50px;
       width: 1650px;
       height:50px;
       margin-left: 35px;
       background-color: #f4f7fa;
       padding-top: 15px;
    }
    
   .pl{
     margin-bottom: 50px;
   }
   .img{
     float: left;
     margin-left: 20px;
     margin-top: 20px;
   }
   #tub{
     float: right;
     margin-top: -15px;
   }
</style>
