<template>
     <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
             <el-button  style="float:right;" type="primary" size="small"  @click="$router.push('/articles/articleComment')">返回全部文章</el-button>
        </div>
        <div class="app-container">
             <div class="title">{{listQuerty.title}}</div>
             <div>{{listQuerty.publicTime}}</div>
             <div class="sort">已按最新热度排序</div>
            <div class="border2"></div>            
            <div v-for="item in comments" :key="item.id">
                <div class="img">
                    <img :src="item.comment_user_avater" style="width:50px;height:50px">
                </div>               
                <div class="commentname">
                    {{item.comment_user_name}}
                    <span class="fortime">{{format(item.ctime)}}</span>
                </div>
                <div class="reply">
                    |&nbsp;&nbsp;<span  @click="replyComments(item.id)">回复</span>&nbsp;&nbsp;
                    |&nbsp;&nbsp;<span @click="spread(item.id)" id="copy">展开</span>&nbsp;&nbsp;|
                    &nbsp;&nbsp;删除&nbsp;&nbsp;
                </div>
                <div class="content">
                    {{item.content}}
                </div> 
               <div class="reply_box" v-show="showindex===item.id">
                        <textarea name="" id="" cols="156" rows="5" class="reply " placeholder="回复:" v-model="form.replycontent"></textarea>
                        <div class="clearfix"></div>
                        <div class="button" style="display: block;">
                            <el-button @click="cancel()">取消</el-button>
                            <el-button type="primary" @click="send(item)">发送</el-button>
                       </div>
                </div>
                 <div class="reviewed" v-show="showReply==item.id">
                     <div v-for="(child) in item.childs" :key="child.id">
                     你&nbsp;回复了&nbsp;{{item.comment_user_name}}:{{child.content}}
                     <div  id="tub" class="el-icon-error" @click="clear(item.id,index)"></div>
                     </div>
                </div>
                 <div class="reviewed2" v-show="shows==item.id">
                     <div v-for="(items,index) in commentsReplyInfo" :key="items.id">
                     你&nbsp;回复了&nbsp;{{items.comment_user_name}}:{{items.content}}
                     <div  id="tub" class="el-icon-error" @click="clear(items.id,index)"></div>
                     </div>
                </div>           
            <div class="border"></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 { getArticleCommentDetail,send,spread} from '@/api/act/submitinfo'
   import {getFileExtension,uParseTime} from '@/utils/tools'
   import { constants } from 'crypto';
   import { truncateSync } from 'fs';
    export default {
        name: "articleCommentDetail",
        components:{
            BreadCrumb
         },
         data(){
             return{
                 crumbs: [
                   { path: false, name: '文章管理' },
                   { path: '/articles/articleComment', name: '文章评论详情' }
                ],
                listQuerty:{
                   page:1,
                   limit:10,
                   title:'',
                   publicTime:'',
                   id:0,
                },
                total:0,
                comments:[],
                show:true,
                shows:false,
                showindex:-1,
                form:{
                  replycontent:'',  
                },
                showReply:-1,
                shows:-1,
                commentsReplyInfo:[],
             }
         },
         methods:{
             getArticleCommentDetail(){
                 const id = this.$route.params && this.$route.params.id
                 console.log("id",id)
                 getArticleCommentDetail(this.listQuerty.page,this.listQuerty.limit,this.listQuerty.title,this.listQuerty.publicTime,id).then(response=>{
                        if(response.data.state == 1){
                            var articles = response.data.data.articles;
                            var comment =  response.data.data.comment;
                            this.comments =  response.data.data.comment;
                             for (let index = 0; index < this.comments.length; index++) {
                                        
                                 this.$set(this.comments[index], "childs", []);                      
                             }
                            console.log("评论信息",this.comments);
                            this.total =  response.data.data.total;
                            console.log("total",this.total);
                            var orgname = response.data.data.orgName;
                            console.log("orgname",orgname);
                            var orgID =   response.data.data.orgID;
                            console.log("orgID",orgID);
                            this.listQuerty.title = articles.title;
                            this.listQuerty.publicTime =  articles.publicTime;
                            console.log("内容是设么",articles)
                        }
                 })
             },
          handleSizeChange(limit) {
            this.listQuery.limit = limit;
            this.getArticleCommentDetail();
          },
          handleCurrentChange(page){
            this.listQuerty.page = page;
            this.getArticleCommentDetail();
          }, 
          format(time){
              return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}"); 
          },
          replyComments(id){
              this.showindex = id;

          },
          cancel(){
              this.showindex = -1;
          },
          spread(parentid){
               var spancontent = document.getElementById("copy").innerHTML;
            if(spancontent == "展开"){
               document.getElementById("copy").innerHTML="收起";
               this.shows = parentid;
          } 
            if(spancontent == "收起"){
              document.getElementById("copy").innerHTML = "展开";
              this.shows = 0;              
          } 
           const articid = this.$route.params && this.$route.params.id;
          console.log("文章id",articid);   
            spread(parentid,articid).then(response=>{
                if(response.data.state == 1){
                  var comments = response.data.data.comments;
                  this.commentsReplyInfo = response.data.data.comments;
                  this.shows = parentid;
                  console.log("获取的内容:",comments)
                }
            }) 
          },
          send(parent){
              const articid = this.$route.params && this.$route.params.id;
              console.log("文章id",articid);
               console.log("父类id",parent.id)
               var replycontent =  this.form.replycontent;
               if(replycontent == ""){
                  this.$message.error("回复内容不能为空");
               }else{
                   send(replycontent,articid,parent.id).then(response=>{
                   if(response.data.state ==1){
                      var comment = response.data.data.comment;
                      parent.childs.push(comment);
                      this.showReply = parent.id;
                      console.log("内容",comment)
                      console.log(parent.childs)
                  }
                })
               }
          },
          clear(id){
             console.log("id是什么?",id);
          }
         },
          created(){
            this.getArticleCommentDetail(); 
         },
    }

</script>

<style scoped>
   .border{
       border: 1px #dcdfe6 solid;
       margin-top: 50px;
   }
   .border2{
      border: 1px #dcdfe6 solid;
      margin-top: 20px;
   }
   .title{
       font-size: 25px;
       margin-bottom: 20px;
   }
   .sort{
      float: right;
      font-size: 18px;
   }
   .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;
   }
   .fortime{
       font-size: 15px;
       color: #495060;
   }
   .img{
       float: left;
       
   }
   .reply_box{
       margin-top: 30px;
   }
   .button{
       float: right;
       margin-top: 5px;
            
   }

     .reviewed{
      margin-top: 50px;
       width: 1585px;
       height:50px;
       margin-left: 92px;
       background-color: #f4f7fa;
       padding-top: 15px;
    }
     .reviewed2{
         margin-top: 50px;
         background-color: #f4f7fa;
         width: 1585px;
         height:50px;
         margin-left: 92px;
     }
    #tub{
      float: right;
   }
</style>
