<template>
  <div id="answer-detail">
    <portal-header current="qa" :goSearch="4"></portal-header>
    <div class="portal-content xcontent" >
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
        <el-breadcrumb-item :to="{ path: '/qa' }">问答列表</el-breadcrumb-item>
        <el-breadcrumb-item>问答详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="xrow" style="display: flex;justify-content: space-between;">
         <div style="flex: 1;" class="xcol content-div">
              <el-row>
          <el-card :body-style="{ padding: '0px' }" class="detail">
            <div class="title" >
              <span class="qa-basic" :class="detailData.isResolve ? 'qa-solve' : 'qa-unSolve'">
                {{ detailData.isResolve === true ? '【已解决】' : detailData.isResolve === false ? '【待解决】' : '' }}
              </span>
              {{ detailData.title }}
            </div>
            <div class="label" style="display: flex;margin: 9px 0 14px 0;justify-content: space-between;align-items: center;font-size: 12px;">
              <!-- <img :src="detailData.avatar || '/temp/index/male.jpg'" /> -->
              <author width="24px" height="24px" :avatar="detailData.avatar" :name="detailData.name" :sex="detailData.sex"></author>
              <!-- <author :avatar="detailData.avatar" :info="detailData.orgInfo" :name="detailData.name"></author> -->
              <time-show :time="detailData.sysCreateTime"></time-show>
            </div>
            <div class="content">
              <div style="word-break:break-all;">{{ detailData.content }}</div>
              <div v-if="detailData.images" style="margin: 10px 0px;"><el-image :src="fileUrl + detailData.images" fit="scaleDown" /></div>
            </div>

            <div class="btn-div">
               <div class="write-btn" @click="answerShow=true">
                <el-button type="text" icon="el-icon-edit">写回答</el-button>
               </div>
              <span class="answer-total">共计{{detailData.answers}}条回答</span>
              <interactBar :type="4" :comments="false" :data="detailData" :views="false"></interactBar>
            </div>
          </el-card>
          <div  v-if="answerShow">
            <el-card :body-style="{ padding: '0px' }" style="padding: 20px;">
              <div>
              <el-input  type="textarea"  rows="5" placeholder="写下您的答案(800字以内)，可以@提问者哦～" minlength="1" maxlength="800" v-model="content"></el-input>
              </div>
              <div style="padding-top: 10px;">
                <el-button type="primary" :disabled="!checked" class="dian-btn" @click="publishAnswer">发布</el-button>
                <!-- <el-checkbox style="margin-left:20px" v-model="checked"></el-checkbox><span style="margin-left:10px" @click="qaFormCheckedShow = true">我已阅读并遵守平台内容发布要求</span>  -->
                 <el-checkbox style="margin-left:20px" v-model="checked"></el-checkbox><span style="font-size:14px;color:#787878;margin-left:10px">我已阅读并遵守<span style="color:#588afc;cursor: pointer;" @click="qaFormCheckedShow = true">平台内容发布要求</span></span>
              </div>

            </el-card>

          </div>
          <el-card class="box-card" v-if="answerList.length ==0&&!answerShow" :body-style="{ padding: '0px' }">
          <div>
            <div style="height:50px;margin-top: 50px;">
               <img style="width:50px" src="../../../assets/images/icon/anser.png" alt="" srcset="">
            </div>
            <div style="font-size:14px;padding-bottom: 50px;">
              暂时还没有回答，开始
            <el-link type="primary" @click="openAnswer">写第一个回答</el-link>
            </div>
          </div>

          </el-card>
          <div v-if="answerList.length > 0">
            <div :span="24">
              <!-- <el-card :body-style="{ padding: '0px' }" class="answer publishAnswer">
                <el-input placeholder="写回答...（1-1000个字）" minlength="1" maxlength="255" v-model="content"></el-input>
                <el-button type="primary" class="dian-btn" @click="publishAnswer">发布</el-button>
              </el-card> -->
              <el-card :body-style="{ padding: '0px' }" class="data">
                <div class="answer data-item" v-for="(item, index) of answerList" :key="item.id" :style="index === answerList.length - 1 ? 'border-bottom:none;' : ''">
                  <div class="top">
                    <!-- <author :avatar="item.avatar" :name="item.name" :info="item.orgInfo"></author> -->
                    <author :avatar="item.avatar" :name="item.sysCreateBy" :sex="item.sex"></author>
                    <span v-if="detailData.isResolve&&item.isBest" style="color: #ffb30f">最佳答案</span>
                  </div>
                  <div class="text">{{ displayAll(item.content,index) }}
                  <span v-if="item.content.length>170" @click="changeIsAll(index)">{{controlListNew[index].hidden?'收起':'全文'}}</span></div>
                  <span class="editTime">
                    <div>发布于 <time-show :time="item.sysCreateTime"></time-show></div>
                    <interactBar :type="5"  :comments="false" :favorites="false" :data="item" :shares="false" :views="false"></interactBar>
                  </span>
                  <div class="tip">
                    <!-- 这个组件的点赞失效了，应该我传入的参没有组件需要的id值有关，评论是因为没有对应的字段 -->
                    <i class="el-icon-chat-line-round" @click="openInput(index,1)" style="margin-right:10px;"></i>
                    <i class="el-icon-edit" style="margin-right:10px;" v-if="item.sysCreateAid == userInfo.aid" @click="editAnswer(item)"></i>
                    <i class="el-icon-delete" v-if="detailData.sysCreateAid == userInfo.aid||item.sysCreateAid == userInfo.aid" @click="delAnswer(item)"></i>
                    <el-button type="primary" v-if="!detailData.isResolve && detailData.sysCreateAid == userInfo.aid" class="zuijia" @click="editAnsweBest(item)">设为最佳答案</el-button>
                  </div>
                  <div v-show="controlListNew[index].hideInput" class="reply-box">
                    <el-input type="textarea" v-model="replyContent" placeholder="回复内容"></el-input>
                    <el-button type="primary" @click="replyContentMethod(item,index)">回复</el-button>
                  </div>
                  <div v-if="item.answers&&item.answers.length!=0">
                    <div class="answer-reply" v-for="(con,i) in item.answers" :key="i">
                      <div class="answer-reply-first">
                        <author :avatar="con.avatar" :name="con.sysCreateBy" :sex="con.sex"></author>
                        <span class="answer-reply-text">回复</span>
                        <span style="font-size: 14px;color: rgb(102, 102, 102);">{{con.replayName}}</span>
                      </div>
                      <div class="answer-reply-content">
                        {{ displayAll(con.content,index,i) }}
                        <span v-if="con.content.length>170" @click="changeIsAll(index,i)" style="cursor: pointer;color: #409EFF">
                          {{controlListNew[index].childHide[i].hidden?'收起':'全文'}}
                        </span>
                      </div>
                      <span class="editTime"><span>发布于 <time-show :time="con.sysCreateTime"></time-show></span></span>
                      <div class="tip">
                        <!-- <i class="el-icon-thumb" style="margin-right:10px;"></i> -->
                        <i class="el-icon-chat-line-round" @click="openInput(i,2,index)" style="margin-right:10px;"></i>
                        <i class="el-icon-edit" style="margin-right:10px;" v-if="con.sysCreateAid == userInfo.aid" @click="editAnswer(con)"></i>
                        <i class="el-icon-delete" v-if="detailData.sysCreateAid == userInfo.aid||con.sysCreateAid == userInfo.aid" @click="delAnswer(con)"></i>
                      </div>
                      <div class="reply-box" v-show="controlListNew[index].childHide[i].hideInput">
                        <el-input type="textarea" v-model="replyContent" placeholder="回复内容"></el-input>
                        <el-button type="primary" @click="replyContentMethod(con,index,i)">回复</el-button>
                      </div>
                      <!--三级数据-->
                      <div style="padding-left: 40px;" v-if="con.answers && con.answers.length>0">
                          <div v-for="(row,rowIdx) in con.answers">
                               <div class="answer-reply-first">
                                 <author :avatar="row.avatar" :name="row.sysCreateBy" :sex="row.sex"></author>
                                 <span class="answer-reply-text">回复</span>
                                 <span style="font-size: 14px;color: rgb(102, 102, 102);">{{row.replayName}}</span>
                               </div>
                               <div class="answer-reply-content">
                                 {{ displayAll(row.content,index,rowIdx) }}
                                 <span v-if="row.content.length>170" @click="changeIsAll(index,rowIdx)" style="cursor: pointer;color: #409EFF">
                                   {{controlListNew[index].childHide[rowIdx].hidden?'收起':'全文'}}
                                 </span>
                               </div>
                               <span class="editTime"><span>发布于 <time-show :time="row.sysCreateTime"></time-show></span></span>
                               <div class="tip">
                                 <!-- <i class="el-icon-thumb" style="margin-right:10px;"></i> -->
                                 <i class="el-icon-chat-line-round" @click="openInput(rowIdx,2,index)" style="margin-right:10px;"></i>
                                 <i class="el-icon-edit" style="margin-right:10px;" v-if="row.sysCreateAid == userInfo.aid" @click="editAnswer(row)"></i>
                                 <i class="el-icon-delete" v-if="detailData.sysCreateAid == userInfo.aid||row.sysCreateAid == userInfo.aid" @click="delAnswer(row)"></i>
                               </div>
                               <div class="reply-box" v-show="controlListNew[index].childHide[rowIdx].hideInput">
                                 <el-input type="textarea" v-model="replyContent" placeholder="回复内容"></el-input>
                                 <el-button type="primary" @click="replyContentMethod(row,index,rowIdx)">回复</el-button>
                               </div>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
              <div class="pagination-div">
                <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="moreState == 3">没有更多数据了</span>
              </div>
            </div>
          </div>
        </el-row>
         </div>
         <div style="width: 410px;">
            <!-- <el-row> -->
          <div class="qa-ranking" >
            <div class="portal-model-btn" @click="$refs.addQuestion.askQuestionDialog = true">
                    <svg-icon style="margin-right: 0;font-size: 24px;" icon-class="question-mark"></svg-icon>
                    提问题
                  </div>
                    <div class="portal-right-box list-bg">
                        <p class="portal-title-one" style="padding-bottom:12px">贡献榜</p>
                        <ul>
                          <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px">
                            <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">0{{index+1}}.</span>
                            <span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">0{{index+1}}.</span>
                            <span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">0{{index+1}}.</span>
                            <span class="portal-right-text" v-if="index>2" style="margin-right:94px">0{{index+1}}.</span>
                            <span class="portal-title-desc">{{ item.sysCreateUname }}</span>
                          </li>
                        </ul>
                    </div>
                <!-- </div> -->
             <!-- <div style="margin-bottom:15px;padding: 0">
              <el-button style="height: 100%;height: 37px;border-radius: 0; width: 100%;" @click="$refs.addQuestion.askQuestionDialog = true" type="primary">提问题</el-button>
            </div>
            <div :span="24" style="padding:0">
              <el-card class="ranking-card">
                <div slot="header" >
                  <span style="font-size: 14px;font-weight: 600;color: #333333;">贡献排行榜</span>
                </div>
                <div style="padding-bottom:10px">
                  <el-row class="ranking-title  bacolor" v-for="(item, index) in ankingList" :key="index" >
                    <el-col :span="6" style="height:34px;" >
                      <img style="margin-top: 5px;" v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
                      <img style="margin-top: 5px;" v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
                      <img style="margin-top: 5px;" v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
                      <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
                    </el-col>
                    <el-col :span="18" class="one-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
                  </el-row>
                </div>
              </el-card>
            </div> -->
          </div>
        <!-- </el-row> -->
         </div>
      </div>
      <addQuestion ref="addQuestion" @sure="toDetail"></addQuestion>
      <editQuestion ref="editQuestion" @enSure="enSure" :editData="editData"></editQuestion>
      <el-dialog class="checked-show" :visible.sync="qaFormCheckedShow" width="800px" :show-close="false" :modal="false">
        <agreement></agreement>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="qaFormCheckedShow = false">取 消</el-button> -->
          <el-button type="primary" @click="qaFormCheckedShow = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <portal-footer></portal-footer>
    <portalFloatTools></portalFloatTools>
  </div>
</template>

<script>
import agreement from "@/components/Portal/agreement.vue";
import { mapGetters } from "vuex";
import portalHeader from "@/components/PortalHeader.vue";
import addQuestion from "@/components/Qa/addQuestion.vue";
import portalFooter from "@/components/PortalFooter.vue";
import interactBar from "@/components/Portal/interactBar.vue";
import editQuestion from "@/components/Qa/editQuestion.vue";
import timeShow from "@/components/Portal/datetimeShow.vue";
import author from "@/components/Portal/authorInfo.vue";
import portalFloatTools from "@/components/PortalFloatTools.vue";
import apiQa from "@/api/modules/qa.js";
import apiUser from "@/api/system/user.js";
import apiPraise from "@/api/modules/praises.js";
import apiFavorites from "@/api/modules/favorites.js";
import apiMessage from "@/api/system/message.js";
export default {
  name: "answer",
  components: {
    portalHeader,
    portalFooter,
    interactBar,
    addQuestion,
    editQuestion,
    timeShow,
    author,
    portalFloatTools,
    agreement
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  data() {
    return {
      qaFormCheckedShow: false,
      checked: false,
      // sex:null,
      moreState: 1,
      pageIndex: 1,
      qid: "",
      fileUrl: process.env.VUE_APP_FILE_BASE_URL,
      detailData: {}, //单条问答数据详情，不包括答案列表
      content: "", //发布回答内容,
      // curQa:{id:'',shares:20,collects:30,praises:10,browses:236},
      // answer: "",
      updateDialog: false, //控制弹窗
      answerList: [], //回复列表
      editData: {}, //用于保存的单条数据
      editDataIndex: "", //单条数据的位置
      controlList: [],
      answerShow: false, //控制回答输入框是否显示
      anking: 2, //排行榜
      ankingList: [],
      controlListNew: [], //用来控制回复输入框的显示与否
      curParent:{},//当前输入的上级的对象，用于往answers中追加回复的内容
      curParentId:'',//当前回复的内容的id
      curEditId:'',//当前编辑的id
      replyContent: "" //回复的内容
    };
  },
  watch: {
    content(newVal, oldVal) {
      if (!oldVal && newVal === "@") {
        this.content += this.detailData.name;
      }
    }
  },
  mounted() {
    let $this = this;
    this.qid = this.$route.query.id;
    this.getQuestionDetail();
    this.loadAnswer();
    this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
    window.addEventListener("scroll", this.handleScroll);
    this.getAnkingData();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      let innerHeight = document.querySelector("#answer-detail").clientHeight;
      let outerHeight = document.documentElement.clientHeight;
      let scrollTop = document.documentElement.scrollTop;
      if (outerHeight + scrollTop + 350 >= innerHeight) {
        if (this.moreState == 1) {
          this.loadMore();
        }
      }
      if (scrollTop > 400) {
        document.querySelector(".qa-ranking").style.cssText =
          "position: fixed;top: 0;width:410px";
      } else {
        document.querySelector(".qa-ranking").style.cssText =
          "position: static";
      }
    },
    toDetail(flag, form) {
      if (flag) {
        location.href = "answer?id=" + form.id;
      }
    },
    loadMore() {
      this.pageIndex += 1;
      this.getAnswerList(false);
    },
    getAnkingData() {
      apiQa.queryList(5).then(res => {
        if (res.status == 200) {
          this.ankingList = res.result;
        }
      });
    },
    loadAnswer() {
      this.pageIndex = 1;
      this.getAnswerList(true);
    },
    messageSave(type) {
      let content;
      if(type == "set") {
        content = this.userInfo.name + "设置了我的回答为" + "-" + this.detailData.title + "为最佳答案";
      }
      if(type == "send") {
        content = this.userInfo.name + "回答了我的问答" + "-" + this.detailData.title;
      }
      let message = {
        refId: this.detailData.id,
        title: "系统消息",
        sendName: this.userInfo.name,
        acceptName: this.detailData.sysCreateBy,
        acceptId: this.detailData.sysCreateAid,
        content,
        refType: 4,
        sendType: 1
      };
      apiMessage.save(message).then(res => {
        if (res.status == 200) {
        }
      });
    },
    enSure() {
      this.editData = {};
      this.loadAnswer();
    },
    showRowInput(row,parent){ //显示行输框
        this.curParentId=row.id;
        this.curParent=parent;
    },
    openInput(index, type, fa) {
      this.replyContent = "";
      if (type == 1) {
        this.controlListNew.forEach((item, i) => {
          if (i == index) {
            item.hideInput = !item.hideInput;
            if (item.childHide) {
              item.childHide.forEach(content => {
                content.hideInput = false;
              });
            }
          } else {
            item.hideInput = false;
            if (item.childHide) {
              item.childHide.forEach(content => {
                content.hideInput = false;
              });
            }
          }
        });
      }
      if (type == 2) {
        this.controlListNew.forEach((item, c) => {
          item.hideInput = false;
          if (fa === c && item.childHide) {
            item.childHide.forEach((content, i) => {
              if (index == i) {
                content.hideInput = !content.hideInput;
              } else {
                content.hideInput = false;
              }
            });
          }
        });
      }
    },
    //获取问题详细信息
    getQuestionDetail() {
      if (!this.qid) return;
      apiQa.detail(this.qid, true).then(res => {
        if (res.status == 200) {
          res.result.avatar = "";
          res.result.name = "";
          res.result.orgInfo = "";
          res.result.sex = null;
          this.detailData = res.result;
          if (JSON.stringify(this.detailData) != "{}") {
            this.getQaUserData(this.detailData);
          }
        }else{
          this.$message.error(res.message);
        }
      });
    },
    //获取回答列表
    getAnswerList(flag) {
      // 隐藏loadMore
      if (flag) {
        this.answerList = [];
      }
      let that = this;
      that.moreState = 2;
      if(this.pageIndex == 1) {
        // 重置数据
        this.answerList = [];
      }
      apiQa.page({
          qid: this.$route.query.id,
          pageSize: 10,
          pageIndex: this.pageIndex
        }).then(res => {
          if (res.status == 200) {
            this.controlList = [];
            this.controlListNew = [];
            let allList = [];
            let ids = [];
            let level3ParentIds=[];
            if (res.result.list.length != 0) {
              res.result.list.forEach(item => {
                item.avatar = "";
                item.orgInfo = "";
                item.sex = null;
                item.hidden=false;//字数过大时，显示隐藏控制
                allList.push(item);
                ids.push(item.sysCreateAid);
                let obj = {};
                if (item.content.length > 170) {
                  obj.hidden = false;
                } else {
                  obj.hidden = true;
                }
                obj.isAll = false;
                this.controlList.push(obj);

                let newObj = {};
                newObj.hideInput = false;
                newObj.hidePart = false;
                newObj.hidden = false;
                if (item.answers && item.answers.length != 0) {
                  newObj.childHide = [];
                  item.answers.forEach(answers => {
                    answers.avatar = "";
                    answers.orgInfo = "";
                    answers.sex = null;
                    allList.push(answers);
                    level3ParentIds.push(answers.id);
                    ids.push(answers.sysCreateAid);
                    let childObj = {};
                    childObj.hideInput = false;
                    childObj.hidePart = false;
                    childObj.hidden = false;
                    newObj.childHide.push(childObj);
                  });
                }
                this.controlListNew.push(newObj);
              });
              // const ids = res.result.list.map(item => item.sysCreateAid);
              this.getUserInfoList(allList, ids);
              this.answerList.push(...res.result.list);
              this.loadLevel3Data(level3ParentIds);
            }
            if(res.result.totalPages>this.pageIndex){
              that.moreState = 1;
            }else{
              that.moreState = 3;
            }

          } else {
            that.moreState = 3;
            //加载错误
            this.$message.error('加载数据失败');
          }
        });
    },
    //加载第三级的数据
    loadLevel3Data(commentIdArray){
      let $this=this;
      if(commentIdArray && commentIdArray.length>0){
        apiQa.replayClevel3(commentIdArray).then(rs=>{
           if(rs.status==200){
              //先处理头像
              let aids=[];
              rs.result.forEach(item=>{
                item.avatar = "";
                item.sex=null;
                aids.push(item.sysCreateAid);
              });
              $this.getUserInfoList(rs.result,aids);
              $this.answerList.forEach(one1=>{
                  if(one1.answers.length>0){
                    one1.answers.forEach(one2=>{
                       one2.answers=one2.answers? one2.answers:[];
                       rs.result.forEach(rsRow=>{
                          if(rsRow.commentId==one2.id){
                             one2.answers.push(rsRow);
                          }
                       })
                    })
                  }
              })
           }
        })
      }
    },
    //获取人物信息列表
    getUserInfoList(list, ids) {
      // const ids = idsList.map(item => item.sysCreateAid);
      if (ids.length == 0) {
        return;
      }
      const noReapetIds = [...new Set(ids)];
      apiUser.getByIds(noReapetIds).then(res => {
        if (res.status == 200) {
          list.forEach((item, index) => {
            res.result.some(author => {
              // item.sex=author.sex;
              if (author.aid == item.sysCreateAid) {
                item.avatar = author.avatar;
                item.orgInfo = author.orgInfo;
                item.sex = author.sex;
                return true;
              } else {
                return false;
              }
            });
          });
        }
      });
    },
    //获取人物信息
    getQaUserData(detailData) {
      apiUser
        .getByIds([detailData.sysCreateAid])
        .then(res => {
          if (res.status == 200) {
            this.detailData = Object.assign(detailData, res.result[0]);
          }
        })
        .catch(err => {
          this.$message({
            message: "数据请求失败",
            type: "error"
          });
        });
    },
    //发布回答
    publishAnswer() {
      let content = "";
      // if(this.content.indexOf('@'+this.detailData.name)!=-1){
      //   content=this.content.slice(this.detailData.name.length+1)
      // }
      if(this.content.length < 1 || this.content.trim() == "@" + this.detailData.name) {
        return this.$message.warning("请输入回答");
      }else {
        content = this.content;
      }
      apiQa.saveAnswer({
          qid: this.$route.query.id,
          content: content
        }).then(res => {
          if (res.status == 200) {
            this.messageSave("send");
            this.$message({message: "发布回答成功",type: "success"});
            this.answerShow = false;
            this.getQuestionDetail();
            this.loadAnswer();
            this.content = "";
          } else {
            this.$message({message: res.message,type: "error"});
          }
        }).catch(err => {
          this.$message({message: "发布失败",type: "error"});
        });
    },
    //编辑回答
    editAnswer(data) {
      let { sysCreateAid, id: answerid, content } = data;
      this.editData = { sysCreateAid, answerid, content };
      this.$refs.editQuestion.updateDialog = true;
    },
    //删除答案
    delAnswer(data) {
      this.$confirm("此操作将永久删除该答案, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
          const { id } = data;
          apiQa.delAnswer(id).then(res => {
              if (res.status == 200) {
                this.loadAnswer();
                this.getQuestionDetail();
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.message,
                  type: "error"
                });
              }
            }).catch(err => {
              this.$message({
                message: "删除失败",
                type: "error"
              });
            });
        }).catch(() => {});
    },
    //设置为最佳答案
    editAnsweBest(data) {
      const { id } = data;
      apiQa.isBest(id).then(res => {
          if (res.status == 200) {
            this.messageSave("set");
            this.loadAnswer();
            this.getQuestionDetail();
            this.$message({
              type: "success",
              message: "设置为最佳答案成功"
            });
          }
        }).catch(err => {
          this.$message({
            type: "warning",
            message: "设置为最佳答案失败"
          });
        });
    },
    enSure(data) {
      this.loadAnswer();
      this.$off("ensure");
    },
    //展示全部
    displayAll(content, index, secondIndex) {
      if (content.length > 170) {
        if (arguments.length < 3 && !this.controlListNew[index].hidden) {
          return content.slice(0, 170) + "...";
        }
        if (
          arguments.length == 3 &&
          !this.controlListNew[index].childHide[secondIndex].hidden
        ) {
          return content.slice(0, 170) + "...";
        }
      }
      return content;
    },
    changeIsAll(index, secondIndex) {
      if (arguments.length == 1) {
        this.controlListNew[index].hidden = !this.controlListNew[index].hidden;
      } else {
        this.controlListNew[index].childHide[secondIndex].hidden = !this
          .controlListNew[index].childHide[secondIndex].hidden;
      }
    },
    openAnswer() {
      this.answerShow = true;
    },
    replyContentMethod(data, index, secondIndex) {
      if (!this.replyContent) {
        return this.$message.error("回复内容不能为空");
      }
      //默认是一级评论，2级数据
      let replyData={
        replayAid: data.sysCreateAid,
        replayName: data.sysCreateBy,
        content: this.replyContent,
        parentId: data.id,
        commentId: "",
        clevel: 2
      }
      //console.log(data,'data');
      if(data.clevel==2){ //当前是一级评论
        replyData.commentId=data.id;
        replyData.clevel=3;
      }

      apiQa.saveComment(replyData).then(res => {
          if(res.status == 200) {
            res.result.avatar = "";
            res.result.orgInfo = "";
            res.result.sex = null;
            this.$message.success("回复成功");
            this.getUserInfoList([res.result], [res.result.sysCreateAid]);
            if (data.clevel == 2) {
              this.controlListNew[index].childHide[secondIndex].hideInput = false;
            } else {
              this.controlListNew[index].hideInput = false;
            }
            this.controlListNew[index].childHide =this.controlListNew[index].childHide || [];
            this.controlListNew[index].childHide.push({
                hideInput: false,
                hidePart: false,
                hidden: false
            });
            this.answerList[index].answers =this.answerList[index].answers || [];
            this.answerList[index].answers.push(res.result);
          } else {
            this.$message.error("回复失败");
          }
        });
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .checked-show{
  .el-dialog__header{
    padding:0;
  }
  .el-dialog__footer{
    border-top: 1px solid #F5F5F6;
    background-color: #F5F5F6;
  }
}
::v-deep .el-card__body {
  padding: 0;
}
::v-deep .bacolor:nth-child(odd) {
  background-color: #fff;
  padding: 0 5px;
}
::v-deep .bacolor:nth-child(even) {
  background-color: #f6f6f6;
  padding: 0 5px;
}
.write-btn {
  width: 80px;
  // height: 50px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #3e7fff;
  color: #3e7fff;
  margin-right: 10px;
}

.ranking-title {
  line-height: 34px;
  font-size: 15px;
  color: #333333;
  .center-titlt {
    font-size: 15px;
    color: #333333;
  }
  .center {
    text-align: right;
  }
  img {
    margin-top: 5px;
  }
}
.detail {
  background-color: #fff;
  padding: 5px 20px 10px 20px;
  .title {
    margin-top: 20px;
    font-size: 22px;
    line-height: 30px;
    word-break: break-all;
    .resolve {
      // padding: 3px;
      color: #08a890;
      margin-left: -10px;
    }
    .unResolve {
      // padding:3px;
      color: #588afc;
      margin-left: -10px;
    }
  }
  .label {
    font-size: 15px;
    color: #999999;
  }
  .content {
    line-height: 21px;
    margin: 14px 0 16px 0;
    font-size: 15px;
    color: #666666;
  }
  .btn-div {
    display: flex;
    align-items: center;
    margin-bottom: 9px;
    .answer-total {
      font-size: 14px;
      margin: 0 10px;
    }
    ::v-deep .interact-bar-btns {
      justify-content: flex-start !important;
    }
  }
  .dian-btn {
    margin-top: 50px;
    width: 60%;
  }
}
.answer {
  margin-top: 14px;
  background-color: #fff;
  // padding: 5px 20px 20px 20px;
  .top {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      margin-right: 10px;
      width: 30px;
      border: 1px solid #eee;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
  .submit-div {
    margin: 15px 0;
  }
  .bottom {
    text-align: right;
  }
}
.data {
  margin-top: 10px;
  background-color: #fff;
  padding: 5px 20px 10px 20px;
  .text {
    margin: 21px 0;
    line-height: 24px;
    white-space: pre-wrap;
    word-break: break-all;

    span {
      color: #409eff;
      cursor: pointer;
      margin-left: 5px;
    }
  }
  ::v-deep .tip {
    color: #999999;
    margin: 15px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    i {
      color: #a3b1cc;
      // margin-left: 10px;
      cursor: pointer;
    }
    .zuijia {
      width: 106px;
      height: 42px;
      color: #3e7fff;
      font-size: 14px;
      margin-left: auto;
      background: rgba(38, 128, 235, 0.2);
      //
      border: 0;
      padding: 0;
      line-height: 42px;
      text-align: center;
    }
    .interact-bar-btn {
      margin: 0;
      margin-right: 10px;
      min-width: 0 !important;
      span {
        display: none;
      }
    }
  }
  .data-item {
    border-bottom: 1px solid #dddddd;
    .reply-box {
      display: flex;
      margin-bottom: 10px;
      .el-button {
        margin-left: 10px;
      }
    }
    &:last-of-type {
      border: 0;
    }
    .editTime {
      font-size: 14px;
      color: #8590a6;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .answer-reply {
      margin-left: 40px;
      // margin-bottom: 20px;
      padding: 10px 0;
      border-bottom: 1px solid #dddddd;
      &:last-of-type {
        border: 0;
      }
      .answer-reply-first {
        display: flex;
        align-items: center;
        .answer-reply-text {
          margin: 0 10px;
          color: #8590a6;
          font-size: 14px;
          font-weight: 500;
        }
      }
      .answer-reply-content {
        line-height: 1.5;
        margin: 21px 0;
      }
    }
  }
}
::v-deep .publishAnswer {
  padding: 24px 20px;
  .el-card__body {
    // display: flex;
    // justify-content: space-between;
    align-items: center;
    .el-input__inner {
      height: 48px;
    }
    .el-button {
      margin-left: 20px;
      // height: 48px;
      // width: 78px;
      color: #e8f3fa;
      font-size: 16px;
    }
  }
}
.box-card {
  text-align: center;
  font-size: 18px;
  color: #6666;
  // line-height: 84px;
  margin-bottom: -24px;
  height: 190px;
  line-height: 40px;
  .el-link {
    line-height: 1;
  }
}
</style>
