<template>
  <div style="">
    <Remark :fixed="false">
      <ul>
        <li>假如我回复了难道不该显示回复内容吗？</li>
      </ul>
    </Remark>
     
    <!-- <div style="padding: 10px 22px 10px 23px;">
      <el-select v-model="dataList.type" style="margin-right: 10px" placeholder="类型">
      <el-option label="全部" :value="null"></el-option>
      <el-option label="文章" :value="2"></el-option>
      <el-option label="案例" :value="3"></el-option>
      <el-option label="问答" :value="4"></el-option>
      </el-select>
    <el-input style="width: 200px;margin-right: 10px" v-model="dataList.send" clearable placeholder="搜索人员姓名标题"></el-input>
    
    <el-button type="primary" @click="getList" icon="el-icon-search">搜索</el-button>
    <el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button>

    </div> -->
   <div style="padding: 10px 22px 10px 23px;">
      <span class="title">@我的</span>
   </div>
    <div class="article-list" v-for="(item, idx) in dataList.list" :key="idx" @click="jump(item)">
      <div class="article-info">
        <div class="hear">
                <span class="hear-left">
                   {{item.sysCreateBy}}@我
                </span>
                <span class="hear-right">
                    {{item.sysCreateTime}}
                </span>
            </div>
        <div class="article-info-title">
           
            
          <div  class="one-line-ellipsis tit-left">
            
             <span class="article-type">【{{ filterObjType(item.objType) }}】</span>
            <!-- <span v-if="item.isread" style="padding: 3px;border: 1px dotted #1EA0FA;color: #1EA0FA;">已读</span>
            <span v-else style="padding: 3px;border: 1px dotted #ff0000;color: #ff0000;">未读</span> -->
            {{ item.title }}
          </div>
           <div class="bj-post">
             <img src="../../../public/images/replyimg.png" alt="">
              <el-button class="bianji" type="text" style="color: #999999;font-size: 12px;" :disabled="item.disabled" @click.stop="replay(item)">回复</el-button>
            </div>
        </div>

        <div class="article-info-tools">
          <div class="article-info-tools-auth">
           <div class="two-line-ellipsis">
             <!-- <span style="margin-left:5px; font-size: 16px; color: #666666; line-height:25px ">
                {{ item.content }}
             </span> -->
           </div>
            <!-- <el-button type="primary" v-if="!item.isread" size="mini">标记已读</el-button> -->
          </div>
          <div style="margin-top:10px; position: relative;">
              <div>
              <!-- <span style="font-size: 14px; color: #999; ">{{item.sysCreateTime}}</span> -->
            </div>
           
          </div>
           
          <div class="article-info-tools-btns">
            <!-- <interactBar type="qa" :data="curQa" :answers="false" :comments="false" :shares="false" :views="false"></interactBar> -->
            <!-- <el-link icon="el-icon-star-on" class="article-info-tools-btn">收藏12</el-link>
            <el-link icon="el-icon-thumb" class="article-info-tools-btn" >点赞20</el-link > -->
          </div>
        </div>
        <div v-if="item.replys && item.replys.length>0" style="padding-left: 40px;">
          <div  v-for="(re,reIdx) in item.replys" :key="re.id">
            <!-- <span>回复：{{ re.content }}</span> -->
            <!--应该有删除的-->
            <!-- <span style="margin-left: 10px;"><el-button type="text" icon="el-icon-delete" size="mini" @click="deleteMyReply(item,re,reIdx)">删除</el-button></span> -->
          </div>

        </div>
      </div>
    </div>
    <el-dialog :title="replyName" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
      <div style="height: 200px;padding-right: 30px;">
        <el-form label-width="80px">
          <el-form-item label="回复内容:">
            <el-input v-model="replayContent.content" :autosize="{ minRows: 9, maxRows: 9 }"  maxlength="800" show-word-limit type="textarea" placeholder="请输入回复内容(限800字以内)"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shareShow = false">取 消</el-button>
        <el-button type="primary" @click="enSure">确认</el-button>
      </span>
    </el-dialog>
    <div style="text-align: center; margin-top:57px;" v-if="dataList.list.length>0">
      <el-pagination
      background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="dataList.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="dataList.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataList.count"
      ></el-pagination>
    </div>
    <div v-else>
      <div v-if="dataList.list.length == 0">
        <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
        <div v-else class="zan-wu">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import apiComment from '@/api/modules/comments.js'
import apiQa from '@/api/modules/qa.js'
export default {
  name: 'articleItems',
  data() {
    return {
      isSearh:false,
      type:0,
      dataList: {
        pageIndex:1,
        type:'',
        pageSize:10,
        count:0,
        list:[],
        send:'',
      },
      replyName:'',
      shareShow: false,
      replyItem:{},//记录当前要回复的哪一条
      replayContent: {

      },
    };
  },
  mounted() {
    this.getData()
  },
  components: {},
  methods: {
    getList() {
     this.dataList.pageIndex = 1;
     this.isSearh = true;
     this.getData();
    },
      jump(item) {
      // let routeData = this.$router.resolve({ path:'/article/detail?id='+item.objId}); // , query: {  id: 1 }
      // window.open(routeData.href, '_blank');
        // this.$router.push({path:'/article/detail',query:{id:item.objId}})
     if(item.objType == 2){
					this.$router.push({path:'/article/detail',query:{id:item.objId}})
				}else if(item.objType == 1){
				
				}else if(item.objType == 4){
				this.$router.push({ path: '/qa/answer', query: { id: item.objId } });
				} else if(item.objType == 3){
				this.$router.push({ path: '/case/detail', query: { id: item.objId } });
				}
    },


    getData(){
      this.dataList.list=[]
      let {pageIndex,pageSize,type,send}=this.dataList;
      let query={pageIndex,pageSize,type,send};
      // if(this.dataList.type){
      //   query.type=this.dataList.type
      // }
      //  this.dataList.type = 4;
      // if(this.dataList.send){
      //   query.send=this.dataList.send
      // }
      apiComment.pagelist(query).then(res=>{
        if(res.status==200){
          if(res.result.list.length!=0){
            this.dataList.count=res.result.count;
            this.dataList.list=res.result.list;
            this.loadReplys();
          } else {
            this.dataList.count=0;
            this.dataList.list=[];
          }
        }else{
          this.$message.error("数据搜索失败")
        }
      }).catch(err=>{
        this.$message.error("数据搜索失败")
      })
    },
    reset(){
     this.dataList.pageIndex = 1;
     this.dataList.send = '',
     this.dataList.type = '',
     this.type = 0;
     this.getData();
     this.isSearh = false;
    },
    loadReplys(){ //加载回复的内容
      let idArray=[];
      this.dataList.list.forEach(item=>{
         idArray.push(item.id);
      });
      let params={
        num:1,
        ids:idArray.join(),
        type:2
      }

      apiComment.userReplyList(params).then(rs=>{
        if(rs.status==200){
          this.dataList.list.forEach(comm=>{
            comm.replys=[];
            rs.result.forEach(re=>{
              if(comm.id==re.parentId){
                 comm.replys.push(re);
              }
            })
          })
        }
      });
    },
    handleSizeChange(val){
      this.dataList.pageSize=val;
      this.getData();

    },
    handleCurrentChange(val){
      this.dataList.pageIndex=val;
      this.getData();

    },
    filterObjType(objType){
      switch(objType){
        case 1:{
          return '课程'
        }
        case 2:{
          return '文章'
        }
        case 3:{
          return '案例'
        }
        case 4:{
          return '问答'
        }
        default:{
          return '问答'
        }
      }
    },

    replay(item) {
      this.replyItem=item;
      this.replyName = '回复给' + item.sysCreateBy;
      this.replayContent={...item};
      this.replayContent.parentId=item.id;
      this.replayContent.objType=this.dataList.type;
      this.replayContent.content='';
      this.shareShow = true;
    },
    enSure() {
      let {id:commentId,parentId,content,objType,objId}=this.replayContent
      let replayInfo={
        commentId:this.replayContent.id,
        parentId:this.replayContent.parentId,
        content:this.replayContent.content,
        objType:this.replayContent.objType,
        objId:this.replayContent.objId,
        replyAid:this.replayContent.sysCreateAid,
        toAid:this.replayContent.sysCreateAid,
        toAname:this.replayContent.sysCreateBy,
        parentRead:true
      }
     if(this.dataList.type == 2 || this.dataList.type == 3) {
      apiComment.reply(replayInfo).then(res=>{
        if(res.status==200){
          this.$message.success("回复成功");
          this.shareShow = false;
          if(!this.replyItem.replys){
            this.replyItem.replys=[];
          }
           this.replyItem.replys.push(res.result);
        }else{
          this.$message.error("回复失败:"+res.message);
        }
      }).catch(err=>{
        this.$message.error("回复失败");
      })
     } else {
             //默认是一级评论，2级数据
      let replyData={
        replayAid: this.replayContent.sysCreateAid,
        replayName: this.replayContent.sysCreateBy,
        content: this.replayContent.content,
        parentId: this.replayContent.id,
        commentId: "",
        clevel: 2
      }
      if(this.replayContent.clevel==2){ //当前是一级评论
        replyData.commentId=this.replayContent.id;
        replyData.clevel=3;
      }

        apiQa.saveComment(replyData).then(res=>{
        if(res.status==200){
          this.$message.success("回复成功");
          this.shareShow = false;
          //this.getData();
          if(!this.replyItem.replys){
            this.replyItem.replys=[];
          }
           this.replyItem.replys.push(res.result);
        }else{
          this.$message.error("回复失败:"+res.message);
        }
        })
     }
 
    },
    deleteMyReply(item,reply,reIdx) {
      this.$confirm('您确定要删除自己的回复吗？?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          let delParam={
            id:reply.id,
            pid:reply.parentId
          }
          apiComment.delReply(delParam).then(rs=>{
             if(rs.status==200){
                this.$message({type: 'success',message: '删除成功!'});
                item.replys.splice(reIdx,1);
             }
          })

      })
    }
  },
  computed: {}
};
</script>

<style lang="scss" scoped>
.hear{
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  .hear-left{
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }
  .hear-right{
    margin-left: auto;
    font-size: 14px;
    font-weight: 400;
    color: #666666;

  }
}
.title{
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}
.one-line-ellipsis{
  display: -webkit-box;
  white-space:pre-wrap;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;

}
.two-line-ellipsis{
  display: -webkit-box;
  white-space:pre-wrap;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;

}
.bj-post{
  margin-left: auto;
  img{
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 10px;
  }
}
.tit-left{
  flex: 1;
}
.bianji{
  color: #8590A6;
  font-size: 14px;
}
.article-type{
   font-size: 16px;
   font-weight: 600;
   color: #333333;
}
.el-pagination {
  text-align: center;
}
.text-status1 {
  padding: 3px;
  border: 1px dotted #1ea0fa;
  color: #1ea0fa;
}
.text-status2 {
  padding: 3px;
  border: 1px dotted #00aa00;
  color: #00aa00;
}
.text-status3 {
  padding: 3px;
  border: 1px dotted #ff0000;
  color: #ff0000;
}
.article-list {
  cursor: pointer;
  // padding-bottom: 20px;
  padding-top: 15px;
  border-bottom: 1px solid #E8E8E8;
  margin: 0px 20px 0px 20px;
 
}

.article-info {
  .article-info-title {
    display: flex;
    font-size: 16px;
    font-weight: 600;
    margin-left: -7px;
    color: #333;
    line-height: 40px;
    .article-info-date {
      // height: 40px;
      line-height: 40px;
      float: right;
      font-weight: 600;

      font-size: 14px;
      i {
        margin-right: 5px;
      }
    }
  }
  .article-info-summary {
    margin-right: 60px;
    // height: 65px;
    color: #666;
  }
  .article-info-tools {
    // height: 30px;
    .article-info-tools-auth {

      // float: left;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      margin-top: 5px;
      color: #666;
      // padding-bottom: 20px;
      span {
        margin-right: 10px;
      }
      img {
        margin-right: 10px;
        width: 30px;
        border: 1px solid #eee;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .article-info-tools-btns {
      float: right;
      .article-info-tools-btn {
        margin: 0 0 0 15px;
      }
    }
  }
}
</style>
