<template>
  <!--评论组件-->
  <div class="comments">
      <!-- <div v-if="showTop" class="comments-top">
          <div class="comments-top-left">评论 <span style="color: #797979;">{{total}}条</span>
              <el-checkbox v-if="objType ==2" class="btn" v-model="value" type="primary">只看作者</el-checkbox>
              <el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{'只看案主'}}</el-checkbox>
              <span v-if="objType ==3" class="anzhu"> @案主可以给他发私信哦</span>
          </div>
      </div> -->
        <div v-if="showTop" class="comments-top">
          <div class="comments-top-left portal-title-tow" style="font-size: 18px;"> <span v-if="objType ==3">案例评论</span> <span v-if="objType ==2">文章评论</span>
              <el-checkbox v-if="objType ==2" class="btn" v-model="value" type="primary">只看作者</el-checkbox>
              <el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{'只看案主'}}</el-checkbox>
              <span v-if="objType ==3" class="anzhu">@案主可以给他发私信哦</span>
          </div>
      </div>
      <div class="comments-input" v-if="!readonly">
      <div class="grid-content bg-purple">
        <div style="position: relative !important" class="at-min">
          <el-popover placement="top-start"  width="160" v-model="visible">
            <p style="margin-bottom: 10px">请选择要@的老师</p>

            <div>
              <el-radio-group v-model="toUserId" @change="confirmTeacher()">
                <el-radio-button
                  class="reference-tag"
                  v-for="item in toUsers"
                  :key="item.aid"
                  :label="item.aid">{{ item.name }}</el-radio-button>
              </el-radio-group>
            </div>
            <el-tag ref="tag" slot="reference" class="tag-block"></el-tag>
          </el-popover>
        </div>
        <div style="width:100%;display:flex;">
          <div style="flex: 1;">
            <el-input
             style="line-height:45px"
              v-if="objType  !==3"
              :autosize="{ minRows: 2, maxRows: 2 }"
              type="textarea"
              class="hideControl"
              show-word-limit
              v-model="inputValue"
              maxlength="800"
              placeholder="写评论～"
            ></el-input>
            <el-input
            v-if="objType ==3"
              :autosize="{ minRows: 2, maxRows: 2 }"
              type="textarea"
              class="hideControl"
              show-word-limit
              v-model="inputValue"
              maxlength="800"
              placeholder="写下您的评论～"
            ></el-input>


          </div>
          <div style="width: 90px;display: flex;justify-content: flex-end;">
            <el-button class="publish-button" @click="submit()" style="height: 30px;" type="primary">发布</el-button>
          </div>
        </div>
      </div>
    </div>

      <!--列表内容-->
      <div class="comments-items" v-show="listShow">
          <!--一个评论-->
          <div class="zan-wu" v-if="list.length == 0">暂无评论～</div>
          <div class="comment" v-for="(com,comIdx) in list" :key="com.id">
               <div class="comment-top">
                  <div class="comment-author">
                      <authorInfo  :aid="com.sysCreateAid" :avatar="com.avatar" :name="com.sysCreateBy"  :sex="com.sex" :info="com.orgInfo" :sign="com.sign"></authorInfo>
                     <!-- <span class="signtext">{{ com.sign }}</span>  -->
                  </div>
               </div>
               <div class="comment-body" >
                    <div class="comment-info" @mouseover="showButtons(com.id)" @mouseout="hideButtons()">
                      <div class="comment-content" @click="cancelReply()">
                          <span class="portal-summary-text" style="color: #333333;text-indent:0px;" v-html="displayAll(com)"></span>
                          <span v-if="com.content.length>170" @click="changeIsAll(com)">
                            {{com.isAll?'收起':'全文'}}
                          </span>
                      </div>
                      <div class="comment-time portal-time">
                        <showTime :time="com.sysCreateTime"></showTime>
                        <interactBar :type="praisesType" :pageType="objType" :pageParams="objId" :shares="false"  :data="com" @addAnswers="showReply(com)" :favorites="false" :views="false" :comments="false" :answers="true"></interactBar>
                      </div>
                      <div class="comment-btns">

                         <!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
                         <div style="display: flex" v-show="btnsShowRowId==com.id">

                           <a style="display: flex;align-items: center;" @click="showReply(com)">
                            <!-- <svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon> -->
                              <div class="is_comment"></div>
                              <span>回复</span> 
                           </a>
                           <!--必须当前登录人是一个人-->
                           <a style="display: flex;align-items: center;" v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)">
                            <!-- <svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon> -->
                             <div class="is_remove"></div>
                            <span>删除</span>
                           </a>
                           <a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a>
                         </div>
                      </div>
                      <div v-if="replyInfo.parentId==com.id" class="comment-reply" style="padding-bottom: 5px;">
                        <div style="width:100%;display:flex;">
                          <div style="flex: 1;">
                            <el-input class="hideControl" type="textarea" show-word-limit v-model="replyInfo.content"  maxlength="800" placeholder="回复内容..."></el-input>
                          </div>
                          <div style="width: 120px;display: flex;justify-content: flex-end;">
                            <el-button @click="submitReply(com)" type="primary">发布回复</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!--回复内容-->
                    <div v-if="com.replyList && com.replyList.length>0">
                        <div v-for="(reply,replyIdx) in com.replyList" :key="reply.id" v-if="replyIdx<com.showNum">
                            <div  class="comment"  :class="replyIdx===com.replyList.length-1 ? 'comment-last' : ''">
                                  <div class="comment-top">
                                     <div class="comment-author">
                                       <authorInfo :aid="reply.sysCreateAid" :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex" :info="reply.orgInfo" :sign="reply.sign"></authorInfo>
                                       <span style="margin-left: 10px;color: #8590A6;font-size:14px; ">
                                        <!-- <svg-icon style="font-size: 10px;margin-right: 0;" icon-class="triangle"></svg-icon> -->
                                        <span>回复了</span>
                                      </span>
                                       <span style="margin-left: 6px;font-size:14px;" class="portal-title-tow" >{{reply.replyName || reply.toAname}}</span>
                                     </div>
                                  </div>
                                  <div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
                                    <div class="comment-info" >
                                       <div class="comment-content"  @click="cancelReply()">
                                            <span class="portal-summary-text" style="color: #666666;" v-html="displayAll(reply)"></span>
                                            <span v-if="reply.content.length>170" @click="changeIsAll(reply)">
                                              {{reply.isAll?'收起':'全文'}}
                                            </span>
                                        </div>
                                        <div class="comment-time portal-time">
                                         <showTime :time="reply.sysCreateTime"></showTime>
                                         <interactBar :type="praisesType" :pageType="objType" :pageParams="objId" :shares="false"  :data="reply" @addAnswers="showReply(reply)" :favorites="false" :views="false"  :comments="false" :answers="true"></interactBar>
                                        </div>
                                       <div class="comment-btns">
                                          <!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
                                          <div v-show="btnsShowRowId==reply.id">
                                            <a  @click="showReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
                                            <a  v-if="userInfo.aid==reply.sysCreateAid" @click="delReply(com,reply,replyIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
                                          </div>
                                       </div>
                                    </div>
                                    <!--发布回复-->
                                    <div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
                                         <div style="width:100%;display:flex;">
                                            <div style="flex: 1;">
                                             <el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content"  maxlength="100" placeholder="回复内容..."></el-input>
                                           </div>
                                           <div style="width: 120px;display: flex;justify-content: flex-end;">
                                             <el-button @click="submitReply(com)" type="primary">发布回复</el-button>
                                           </div>
                                         </div>
                                       </div>
                                  </div>
                             </div>
                         </div>
                        <div v-if="com.replyList.length>com.showNum" style="padding-left: 45px;padding-bottom: 10px;" @click="loadReplyMore(com)"><span style="color: #9e9e9e;cursor: pointer; border-radius: 5px;border:1px solid #cccccc;padding: 5px 10px;font-size: 14px;">加载更多&gt;&gt;</span></div>
                    </div>
                  </div>
               </div>
      </div>
      <div class="pagination-div">
         <!-- v-if="moreState == 1 -->
          <span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
          <span class="pag-text-msg" style="font-size:14px;color: #444444;" v-else-if="list.length !== 0 && moreState == 3">没有更多数据了</span>
      </div>
      <el-dialog title="全部回复内容" width="60%" :visible.sync="replyDiaglog.show" :close-on-click-modal="false" custom-class="g-dialog">
          <div style="padding: 10px;max-height: 500px;overflow-y: auto;">
              <div class="comment" v-for="(reply,rIdx) in replyDiaglog.list" :key="rIdx">
                   <div class="comment-top">
                      <div class="comment-author">
                          <authorInfo :aid="reply.sysCreateAid" :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex" :info="reply.orgInfo"></authorInfo>
                          <span style="margin-left: 10px;color: #8590A6;font-size:14px; ">回复</span>
                          <span style="margin-left: 10px; font-size:14px">{{reply.replyName || reply.toAname}}</span>
                      </div>
                      <div class="comment-time">
                          <showTime :time="reply.sysCreateTime"></showTime>
                      </div>
                   </div>
                   <div class="comment-body"  @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
                        <div class="comment-info">
                          <div class="comment-content">{{reply.content}}</div>
                          <div class="comment-btns"><!--操作还没有加-->
                              <div v-show="btnsShowRowId==reply.id">
                                <a  @click="showDlgReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
                                <a  v-if="userInfo.aid==reply.sysCreateAid" @click="delDlgReply(reply,rIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
                              </div>
                          </div>
                        </div>
                        <!--发布回复-->
                        <div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
                         <div style="width:100%;display:flex;">
                            <div style="flex: 1;">
                             <el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content"  maxlength="100" placeholder="回复内容..."></el-input>
                           </div>
                           <div style="width: 120px;display: flex;justify-content: flex-end;">
                             <el-button @click="submitDlgReply(com)" type="primary">发布回复</el-button>
                           </div>
                         </div>
                       </div>
                  </div>
              </div>
              <div  style="padding: 20px 10px;text-align: center;">
                  <div v-if="replyDiaglog.pages>replyDiaglog.pageIndex">
                    <span class="pag-text" @click="loadMoreReply()">加载更多</span>
                  </div>
                  <div v-else >
                    <span class="pag-text-msg">没有更多数据了</span>
                  </div>
              </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="replyDiaglog.show= false"> 关 闭 </el-button>
          </span>
      </el-dialog>
      <!-- <el-dialog title="选择@的人" :visible.sync="toUserDig.show" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
          <div style="height: 200px;padding-right: 30px;">
              <el-form  label-width="100px"  @submit.native.prevent >
                <el-form-item label="姓名">
                  <el-input v-model="toUserDig.name" maxlength="10" placeholder="根据姓名查找" @keyup.enter.native="findUserKeyupEnter">
                    <el-button @click="findUser" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </el-form-item>
              </el-form>
              <div style="padding: 0px 20px;">
                <a style="margin: 5px;cursor: pointer;">
                  <el-tag v-for="(u,uidx) in toUserDig.list" :key="uidx" :label="u.aid" @click="confirmUser(u)">{{u.name+'('+u.orgInfo+')'}}</el-tag>
                </a>
              </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="toUserDig.show= false">取 消</el-button>
          </span>
      </el-dialog> -->
  </div>
</template>
<script>
  import showTime from '@/components/Portal/datetimeShow.vue'
  import interactBar from "@/components/Portal/interactBar.vue";
  import apiComment from '@/api/modules/comments.js'
  import apiUser from '@/api/system/user.js'
  import authorInfo from '@/components/Portal/commentAuthor.vue';
  // import author from '@/components/Portal/author.vue';
  import { mapGetters } from 'vuex';
  export default {
  	props:{
  		showTop:{
  			type:Boolean,
  			default:true
  		},
      authorId:{
        type:String,
      },
      objId:{
        type:String,
        required:true
      },
      objType:{
        type:Number,
        required:true
      },
      objTitle:{
        type:String,
        default:''
      },
      toUsers:{
        type:Array,
      },

      readonly:{
        type:Boolean,
        default:false
      }
  	},
    components:{showTime,authorInfo,interactBar},
    computed: {
      ...mapGetters(['userInfo'])
    },
  	data() {
  		return {
        praisesType:0,//用于设定评论里点赞的type 课程评论点赞为10，文章的为20，案例的为30
        radio:1,
        value:false,
        sex:null,
        author:'',
        moreState:1,
        isAuthor: false,
        authorList:[],//当前页面存储的用户信息，如果已经存在就不再重新请求了
        toUserId: '',
      	loadStatus:'more',//more,loading,noMore
  			pageSize:10,
  			pageIndex:1,
        total:0,
        listShow:true,
  			inputValue:'',
  			list:[],
  			replyParent:{},
        replyShow:false,
        btnsShowRowId:'',
        replyInfo:{
          clevel:2,
          parentId:'',
          replyAid:'',
          commentId:'',
          replyName:'',
          objType:'',
          objId:'',
          content:''
        },
        replyDiaglog:{
          show:false,
          pageIndex:1,
          pageSize:8,
          pages:1,
          count:0,
          commentId:'',
          list:[]
        },
        toUserDig:{
          show:false,
          name:'',
          chooseUserId:'',
          chooseUserName:'',
          list:[]
        },
        visible:false,
  		}
  	},
    watch:{
      value(newVal,oldVal){
        if(newVal){
          this.author = this.authorId;
        } else {
          this.author = '';
        }
        this.loadData();
      },
      radio(newVal){
        if(newVal == 2){
          this.author = this.authorId;
        } else {
          this.author = '';
        }
        this.loadData();
      },
      inputValue(val,oldVal) {
       let fu = val.substr(-1);
       if(fu == '@'&&!oldVal) {
         this.toUserId = '';
          if(this.toUsers.length == 1 && this.toUsers.length !== 0) {
            this.toUserDig.chooseUserId = this.toUsers[0].aid;
            this.toUserDig.chooseUserName=this.toUsers[0].name;
            this.inputValue+=this.toUsers[0].name;
          }else {
            this.$refs.tag.$el.click();
          }
       }
      }
    },
    mounted() {
      this.author = this.authorId;
      this.loadData(false);
      if(this.objType == 1) {
         this.praisesType = 10;
      }
      if(this.objType == 2) {
         this.praisesType = 20;
      }
      if(this.objType == 3) {
         this.praisesType = 30;
      }
      //在中文输入法状态下输入光标不在文字最后，同时会被遮挡两个文字大小的长度
      // let vm=document.querySelector('.hideControl input')
      // vm.addEventListener('compositionstart',(e)=>{
      // vm.style.padding='0 63px 0 0'
      // vm.size=100
      //以上两种方式都未解决
      // })
    },
  	methods: {
      loadReplyMore(item){
        item.showNum=item.showNum+3;
        //item.showAll=true;
      },
      loadMore() {
        this.pageIndex +=1;
        this.loadData(true);
      },
      // lookYourself() {// 只看作者
      // this.pageIndex =1;
      // this.isAuthor = !this.isAuthor;
      // if(this.isAuthor){
      //   this.author = this.authorId;
      // } else{
      //    this.author = '';
      // }
      //   this.loadData();
      // },
      loadAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
      // console.log(list,ids)
        if(ids.length==0){
          return;
        }
        const noReapetIds=[...new Set(ids)]
        apiUser.getByIds(ids).then(res=>{
          if(res.status==200){
            list.forEach((item,index)=>{
              res.result.some(author=>{
                if(author.aid==item.sysCreateAid){
                  item.avatar=author.avatar;
                  item.orgInfo=author.orgInfo;
                  item.sex=author.sex;
                  item.sign=author.sign
                  return true;
                }else{
                  return false;
                }
              })
            });
          }else{
            console.log('加载用户头像信息:'+res.error);
            //this.$message.error(res.message);
          }
        });
      },
      // cancelTeacher() {
      //   this.inputValue =  this.inputValue.substr(0,  this.inputValue.length -1);
      //   this.visible = false;
      // },
      confirmTeacher() {
         this.toUserDig.chooseUserId = this.toUserId;
         this.toUsers.forEach(item=>{
           if(item.aid == this.toUserId) {
              this.toUserDig.chooseUserName=item.name;
              this.inputValue+=item.name;
           }
         })
       this.visible = false;
      },
      loadData(append){
        let params={
          pageIndex:this.pageIndex,
          pageSize:this.pageSize,
          type:this.objType,
          id:this.objId,
          author: this.author,
        }
        let $this=this;
        apiComment.pageQuery(params).then(res=>{
            if(res.status==200){
              let ids=[];
              let allList=[];
              res.result.list.forEach(item=>{
                item.showNum=3;
                item.answers=item.replys;
                item.showAll=false;
                item.avatar='';
                item.orgInfo='';
                item.sign='';
                item.isAll=false;
                //item.sex=null;
                allList.push(item);
                ids.push(item.sysCreateAid);
                if(item.replyList && item.replyList!=''){
                    item.replyList.forEach(reply=>{
                      reply.answers=reply.replys;
                      reply.avatar='';
                      reply.orgInfo='';
                      reply.sex=null;
                      reply.sign='';
                      reply.isAll=false;
                      allList.push(reply);
                      ids.push(reply.sysCreateAid);
                    })
                }
              });
              this.loadAuthorInfo(allList,ids);
              this.total=res.result.count;
              if(append){
                res.result.list.forEach(item=>{
                  $this.list.push(item);
                });
              }else{
                $this.list=res.result.list;
              }
              if($this.list.length == this.total) {
                this.moreState = 3;
              }
              this.$emit('writeTotal',this.total);
            }else{
              this.$message.error(res.message);
            }
        });
      },
      showList(flag){
        this.listShow=flag;
      },
      submit(){
        if(this.inputValue.trim()!=''){
          let cdata={
            objType:this.objType,
            objId:this.objId,
            parentId:'-1',
            content:this.inputValue.trim(),
            clevel:1,
            toAid:'',
            toAname:'',
          }
          if(this.toUserDig.chooseUserId!=='' && this.toUserDig.chooseUserName!=''){
            cdata.toAid=this.toUserDig.chooseUserId;
            cdata.toAname=this.toUserDig.chooseUserName;

          }

          apiComment.add(cdata).then(res=>{
            if(res.status==200){
                // this.list.unshift(res.result);
                // this.sex =
                res.result.sex=null;
                res.result.isAll=false;
                this.list.unshift(res.result);
                this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
                this.$message.success('发布成功');

                let event = {
                  key: "PublishComment",//后台的事件key  发布文章且审核通过
                  title: "发表评论",//事件的标题
                  parameters:"",//用户自定义参数 name:value,name:value
                  content: "每发表一个评论",//事件的内容
                  objId: res.result.id,//关联的id
                  objType: '80',//关联的类型，这里关联的类型应该是评论，不是课程
                  objInfo: "评论",
                  aid: this.userInfo.aid, //当前登录人的id
                  aname: this.userInfo.name,//当前人的姓名
                  status: 1 //状态，直接写1
                }
                this.$store.dispatch("userTrigger", event);

                this.total++;
                this.$emit('success',res.result);
                this.inputValue='';
                this.toUserDig.chooseUserId='';
                this.toUserDig.chooseUserName='';
            }else{
                this.$message.error(res.message);
            }
          });

        }

      },
      showButtons(id){
        if(!this.readonly){
          this.btnsShowRowId=id;
        }
      },
      hideButtons(){
        this.btnsShowRowId='';
      },
      //展示全部
      displayAll(item) {
        let content = '';
        content = item.content.replace(/(\n){2,}/,'<br>');
        item.content = content;
        if(!item.isAll && item.content && item.content.length > 170) {
            return item.content.slice(0, 170) + "...";
        }
        return item.content;
      },
      changeIsAll(item) {
        item.isAll=!item.isAll;
      },
      showReply(item){
          this.replyInfo.objType=this.objType;
          this.replyInfo.objId=this.objId;
          this.replyInfo.parentId=item.id;
          this.replyInfo.replyAid=item.sysCreateAid;
          this.replyInfo.replyName=item.sysCreateBy;
          this.replyShow=true;
      },
      cancelReply(){
        this.replyInfo.parentId='';
      },
      submitReply(comment){
        this.replyInfo.content = this.replyInfo.content.trim();
        if(this.replyInfo.content==''){
          return;
        }
        this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
        if(this.replyInfo.content==''){
          return;
        }
        this.replyInfo.commentId=comment.id;
        if(comment.replyList==''){
          comment.replyList=[];
        }
        apiComment.reply(this.replyInfo).then(res=>{
           if(res.status==200){
              res.result.sex = null;
              res.result.isAll=false;
              this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
              comment.replyList.push(res.result);
              this.replyInfo.parentId='';
              this.replyInfo.content='';
              this.$message.success("发布成功");
              let event = {
                key: "ReplyComment",//后台的事件key  发布文章且审核通过
                title: "回复评论",//事件的标题
                parameters:"",//用户自定义参数 name:value,name:value
                content: "每回一个评论",//事件的内容
                objId: this.replyInfo.commentId,//关联的id
                objType: "81",//关联的类型
                objInfo: "回复评论",
                aid: this.userInfo.aid, //当前登录人的id
                aname: this.userInfo.name,//当前人的姓名
                status: 1 //状态，直接写1
              }
              this.$store.dispatch("userTrigger", event);
           }else{
              this.$message.error(res.message);
           }
        });
      },
      delCommnet(com,idx){
        if(com.replyList!='' && com.replyList.length>0){
          this.$message.error('有回复的评论不能删除');
          return;
        }
        this.$confirm('您确定要删除所选评论吗?', '删除提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    apiComment.del(com.id,this.userInfo.aid).then(res=>{
                          if(res.status==200){
                             this.list.splice(idx,1);
                             this.total--;
                             this.$message.success("删除成功");
                             this.$emit('delSuccess');
                          }else{
                             this.$message.error(res.message);
                          }
                    });
                });


      },
      delReply(com,re,idx){
        // if(com.replyList!='' && com.replyList.length>0){
        //   this.$message.error('有回复的评论不能删除');
        // }
        let params={
          id:re.id,
          user:this.userInfo.aid,
          pid:re.parentId
        }
        this.$confirm('您确定要删除所选评论吗?', '删除提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    apiComment.delReply(params).then(res=>{
                       if(res.status==200){
                          com.replyList.splice(idx,1);
                          this.$message.success("删除成功");
                       }else{
                          this.$message.error(res.message);
                       }
                });
        })
      },
      delDlgReply(re,idx){ //弹出窗口中的删除操作
        let params={
          id:re.id,
          user:this.userInfo.aid,
          pid:re.parentId
        }
        let $this=this;
        this.$confirm('您确定要删除所选评论吗?', '删除提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    apiComment.delReply(params).then(res=>{
                       if(res.status==200){
                          $this.replyDiaglog.list.splice(idx,1);
                          $this.$message.success("删除成功");
                       }else{
                          $this.$message.error(res.message);
                       }
                }).catch(()=>{

                })
        })
      },
      showDlgReply(item){
        this.replyInfo.objType=this.objType;
        this.replyInfo.objId=this.objId;
        this.replyInfo.parentId=item.id;
        this.replyInfo.replyAid=item.sysCreateAid;
        this.replyInfo.replyName=item.sysCreateBy;
        this.replyShow=true;
      },
      submitDlgReply(){
          this.replyInfo.content = this.replyInfo.content.trim();
          if(this.replyInfo.content==''){
            return;
          }
          this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
          if(this.replyInfo.content==''){
            return;
          }
          this.replyInfo.commentId=this.replyDiaglog.commentId;

          apiComment.reply(this.replyInfo).then(res=>{
             if(res.status==200){
                res.result.sex = null;
                res.result.isAll=false;
                this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
                this.replyDiaglog.list.push(res.result);
                this.replyInfo.parentId='';
                this.replyInfo.content='';
                this.$message.success("发布成功");
             }else{
                this.$message.error(res.message);
             }
          });
      },
      showMoreReply(comment){
        this.replyDiaglog.pages=1;
        this.replyDiaglog.count=0;
        this.replyDiaglog.pageIndex=1;
        this.replyDiaglog.list=[];
        this.replyDiaglog.show=true;
        this.replyDiaglog.commentId=comment.id;
        this.loadAllReplyData(false);
      },
      loadMoreReply(){
        this.replyDiaglog.pageIndex++;
        this.loadAllReplyData(true);
      },
      loadAllReplyData(append){
        let params={
          pageIndex:this.replyDiaglog.pageIndex,
          pageSize:this.replyDiaglog.pageSize,
          type:this.objType,
          commentId:this.replyDiaglog.commentId
        }
        let $this=this;
        apiComment.replyList(params).then(rs=>{
          if(rs.status==200){
            $this.replyDiaglog.count=rs.result.count;
            $this.replyDiaglog.pages=rs.result.totalPages;
            let ids=[];
            if(append){
              rs.result.list.forEach(item=>{
                item.avatar='';
                ids.push(item.sysCreateAid);
                $this.replyDiaglog.list.push(item);
              })
            }else{
              rs.result.list.forEach(item=>{
                item.avatar='';
                ids.push(item.sysCreateAid);
              })
              $this.replyDiaglog.list=rs.result.list;
            }
            this.loadAuthorInfo(rs.result.list,ids);
          }else{
            this.$message.error(rs.message);
          }
        })
      },
      showToUser(){
          this.toUserDig.show=true;
          this.toUserDig.chooseUserId='';
          this.toUserDig.chooseUserName='';
      },
      findUserKeyupEnter(){
        this.findUser();
      },
      findUser(){
          this.toUserDig.list=[];
          var name=this.toUserDig.name;
          if(name==''){
            return;
          }
          apiUser.findByName(name).then(rs=>{
             if(rs.status==200){
               this.toUserDig.list=rs.result;
             }else{
               this.$message.error('查询用户失败');
             }
          })

      },
      confirmUser(u){
        this.toUserDig.chooseUserId=u.aid;
        this.toUserDig.chooseUserName=u.name;
        this.toUserDig.show=false;
        this.toUserDig.name='';
      }
  	}
  }
</script>

<style lang="scss" scoped>
.signtext{

}

.publish-button{
  // line-height: 30px;
  padding-top: 7px;
  margin-top: 22px;
}
.anzhu{
  font-size: 14px;
  color: #999;
}
::v-deep .el-input--medium .el-input__inner {
  height: 48px;
}

 ::v-deep .at-min{
    .el-popper[x-placement^=bottom] {
      // left: 0 !important;
      // bottom: 0 !important;
      margin-left: 30px !important;
    }
    .el-popover{

    }
}
.tag-block{
   top:0;
   left: 0;
    position: absolute;
    background-color: #fff;
    border-color: #fff;

    height: 1px;
}
.pag-text{
  border: 1px solid #292828;
  padding: 10px 20px;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
}
.reference-tag{
  display: block;
  // width: 100%;
  .el-radio-button__inner{
       border: 1px solid #fff !important;
  }

}
  .svg-btn{
    font-size: 30px;
    line-height: 30px;
    margin-right: 20px;
    cursor: pointer;
    margin-top: 5px;
  }
  .comments{
		margin-top: 20px;
		background-color: #FFFFFF;
    padding: 0px 16px;
    .comment-time{
      display: flex;
      padding-left: 12px;
      justify-content: space-between;
        margin-top: 10px;
        color: #666666;
        font-size: 12px;
      }
		.comments-top{
			display: flex;
			justify-content: space-between;
			padding:10px;
			// border-bottom: 1px solid #f4f4f4;
			font-weight: 500;
			font-size: 1.1em;
      .comments-top-left{
        .btn{
          // width: 68px;
          // height: 32px;
          // background: #3C7EFF;
          border-radius: 6px;
          font-size: 12px;
          padding: 10px;
          margin-left: 24px;
         ::v-deep .el-radio__inner{
            border-radius: 0 !important;
          }
        }
      }
      .comments-top-center{

      }
      .comments-top-right{
          color: #6b6b6b;
          cursor: pointer;
      }
		}
    .comments-input{
      padding: 20px 15px 50px 15px;
    }
		.comments-items{
       padding: 5px 15px;
       .zan-wu{
         text-align: center;
         font-size: 18px;
         color: #6666;
       }
		}
	}
  .comment{
  	margin-top: 10px;
  	background-color: #FFFFFF;
    // border-bottom: 1px solid #dddddd;
  	.comment-top{
  		display: flex;
  		justify-content: space-between;
  		padding-bottom:10px;
  		font-weight: 500;
      line-height: 30px;
  		font-size: 1.1em;
      .comment-author{
        display: flex;
        align-items: center;
      	height: 30px;
        line-height: 30px;
      }
  	}
  	.comment-body{
  		padding-left: 40px;
      .comment-content{
          padding-bottom: 0px;
          padding-top:5px;
          padding-left: 8px;
          white-space: pre-wrap;
          word-break:break-all;
          letter-spacing:1px;
          span {
            color: #409eff;
            cursor: pointer;
            margin-left: 5px;
          }
      }
      .comment-btns{
        // padding: 5px 10px 10px 0px;
        height: 35px;
        line-height: 35px;
        a{
          margin-right:15px;
          &:hover{
            .is_comment{
              background: url('../../assets/images/case/Frame(9).png');
              background-size: 100%;
            }
            .is_remove{
              background: url('../../assets/images/case/Frame(15).png');
              background-size: 100%;
            }
          }
          .is_comment{
            width: 16px;
            height: 16px;
            background: url('../../assets/images/case/Frame.png');
            background-size: 100%;
          }
          .is_remove{
            width: 16px;
            height: 16px;
            background: url('../../assets/images/case/Frame(8).png');
            background-size: 100%;
          }
          span{
            margin-left: 6px;
            color: #8590A6;
            font-size: 14px;
          }
        }
      }
  	}
    .comment-replys{
      padding-left: 40px;
    }
  }
.comment-last{
  border-bottom: none;
}
::v-deep .hideControl{
  .el-input__count{
  }
  .el-textarea__inner{
    padding-right: 60px;
    padding-top: 20px;
  }
}
</style>
