<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;">
              <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 v-if="detailData.id" :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="answer-reply-box">
                <div class="answer" v-for="(item, index) of answerList" :key="item.id" :style="index === answerList.length - 1 ? 'border-bottom:none;' : ''">
                  <div class="answer-top">
                      <div><author :avatar="item.avatar" :name="item.sysCreateBy" :sex="item.sex"></author></div>
                      <div>
                        <span v-if="detailData.isResolve&&item.isBest" style="color: #ffb30f">最佳答案</span>
                        <el-button type="primary" v-if="!detailData.isResolve && detailData.sysCreateAid == userInfo.aid" class="zuijia" @click="editAnsweBest(item)">设为最佳答案</el-button>
                      </div>
                  </div>
                  <div class="answer-body">
                        <div @mouseover="showButtons(item.id)" @mouseout="hideButtons()"><!--在这一层上加事件-->
                            <div class="answer-text">{{ displayAll(item) }}
                                <span v-if="item.content.length>170" @click="changeIsAll(item)">{{item.isAll?'收起':'全文'}}</span>
                            </div>
                            <div class="answer-time">
                              <div>回答于 <time-show :time="item.sysCreateTime"></time-show></div>
                              <div style="margin-right: 10px;"><interactBar :type="5"  :comments="false" :favorites="false" :data="item" :shares="false" :views="false"></interactBar></div>
                            </div>
                            <div class="answer-boot">
                              <div class="answer-boot-btns">
                                  <div v-show="btnsShowRowId==item.id">
                                    <a @click="showRowInput(item,{})"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
                                    <a v-if="item.sysCreateAid == userInfo.aid" @click="editAnswer(item)"> <i class="el-icon-edit" style="margin-right:10px;font-size: 15px;color: #8590A6; ">编辑</i></a>
                                    <a v-if="item.sysCreateAid == userInfo.aid" @click="delAnswer(item)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
                                    <!-- <a v-if="item.answers && item.answers.length==5" @click="showMoreReply(item)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部回复</span></a> -->
                                  </div>
                                  <!-- <i class="el-icon-chat-line-round" @click="showRowInput(item,{})" 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> -->
                              </div>
                            </div>
                            <!---->
                            <div v-show="curParentId==item.id" class="answer-reply">
                              <el-input type="textarea" v-model="replyContent" show-word-limit maxlength="800" placeholder="回复内容"></el-input>
                              <el-button type="primary" @click="replyContentMethod(item,{})">发布回复</el-button>
                            </div>
                        </div>
                        <!--一级评论，二级数据-->
                        <div v-if="item.answers && item.answers.length!=0">
                          <div class="comment" v-for="(con,i) in item.answers" :key="i" :class="i===item.answers.length-1 ? 'comment-last' : ''">
                            <div class="comment-top">
                                <div class="comment-author">
                                  <author :avatar="con.avatar" :name="con.sysCreateBy" :sex="con.sex"></author>
                                  <span class="comment-author-text">回复</span>
                                  <span style="margin-left: 10px; font-size:14px">{{con.replayName}}</span>
                                </div>
                                <div class="comment-time">
                                    <time-show :time="con.sysCreateTime"></time-show>
                                </div>
                            </div>
                            <div class="comment-body" >
                                    <div class="comment-info" @mouseover="showButtons(con.id)" @mouseout="hideButtons()">
                                          <div class="comment-content">
                                              {{ displayAll(con) }}
                                              <span v-if="con.content.length>170" @click="changeIsAll(con)">
                                                {{con.isAll?'收起':'全文'}}
                                              </span>
                                          </div>
                                          <div class="comment-btns">
                                            <div v-show="btnsShowRowId==con.id">
                                              <a @click="showRowInput(con,item)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
                                              <a v-if="con.sysCreateAid == userInfo.aid" @click="delAnswer(con)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
                                            </div>
                                            <!-- <i class="el-icon-chat-line-round" @click="showRowInput(con,item)" 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="comment-reply" v-show="curParentId==con.id">
                                            <el-input type="textarea"  v-model="replyContent" placeholder="回复内容" show-word-limit maxlength="100"></el-input>
                                            <el-button type="primary" @click="replyContentMethod(con,item)">发布回复</el-button>
                                          </div>
                                    </div>
                                    <!--三级数据-->
                                    <div v-if="con.answers && con.answers.length>0">
                                        <div class="comment" v-for="(row,rowIdx) in con.answers" :key="rowIdx" :class="rowIdx===con.answers.length-1 ? 'comment-last' : ''">
                                             <div class="comment-top">
                                                <div class="comment-author">
                                                    <author :avatar="row.avatar" :name="row.sysCreateBy" :sex="row.sex"></author>
                                                    <span class="comment-author-text">回复</span>
                                                    <span style="margin-left: 10px; font-size:14px">{{row.replayName}}</span>
                                                </div>
                                                <div class="comment-time">
                                                    <time-show :time="row.sysCreateTime"></time-show>
                                                </div>
                                             </div>
                                             <div class="comment-body">
                                                <div class="comment-info" @mouseover="showButtons(row.id)" @mouseout="hideButtons()">
                                                      <div class="comment-content">
                                                           {{ displayAll(row) }}
                                                           <span v-if="row.content.length>170" @click="changeIsAll(row)">
                                                             {{row.isAll?'收起':'全文'}}
                                                           </span>
                                                      </div>
                                                      <div class="comment-btns">
                                                        <div v-show="btnsShowRowId==row.id">
                                                          <a @click="showRowInput(row,con)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
                                                          <a v-if="row.sysCreateAid == userInfo.aid" @click="delAnswer(row)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
                                                        </div>
                                                        <!-- <i class="el-icon-thumb" style="margin-right:10px;"></i> -->
                                                        <!-- <i class="el-icon-chat-line-round" @click="showRowInput(row,con)" 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>
                                                <div class="comment-reply" v-show="curParentId==row.id">
                                                  <el-input type="textarea" v-model="replyContent" show-word-limit maxlength="100" placeholder="回复内容"></el-input>
                                                  <el-button type="primary" @click="replyContentMethod(row,con)">发布回复</el-button>
                                                </div>
                                             </div>


                                        </div>
                                    </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: 245px;margin-left: 5px;">
            <el-row>
          <div class="qa-ranking" >
             <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>
                  <!-- <el-radio-group v-model="anking" size="mini" style="float: right">
                    <el-radio-button label="年"></el-radio-button>
                    <el-radio-button label="月"></el-radio-button>
                    <el-radio-button label="日"></el-radio-button>
                  </el-radio-group> -->
                </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-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.name" placement="top-start"> -->
                    <el-col :span="18" class="one-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
                    <!-- </el-tooltip> -->
                    <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
                  </el-row>
                  <!-- <el-row class="ranking-title" v-for="(item, index) in ankingList" :key="index">
                    <el-col :span="4" class="center">
                      <img v-if="index === 0" :src="`${webBaseUrl}/images/first.png`" />
                      <img v-if="index === 1" :src="`${webBaseUrl}/images/second.png`" />
                      <img v-if="index === 2" :src="`${webBaseUrl}/images/third.png`" />
                      <span v-if="index != 2 && index != 0 && index != 1">{{ index + 1 }}</span>
                    </el-col>
                    <el-col style="color: #333333;font-size: 14px;" :span="10">{{ item.sysCreateUname }}</el-col>
                    <el-col style="text-align: right;color: #333333;font-size: 14px;" :span="10">{{ item.answers }}</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" top="14vh" :show-close="false" :modal="false">
        <agreement></agreement>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="qaFormCheckedShow = false">取 消</el-button> -->
          <el-button style="margin-right:10px" 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
      replyContent: "" ,//回复的内容
      readonly:false,//是否只读，用于预览
      btnsShowRowId:'',//显示的button的条目id
      replyDiaglog:{
        show:false,
        pageIndex:1,
        pageSize:8,
        pages:1,
        count:0,
        commentId:'',
        list:[]
      }
    };
  },
  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:242.5px";
      } 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){ //显示行输框
      if(this.curParentId){
        this.curParentId='';
        this.curParent={};
      }else{
        this.curParentId=row.id;
        this.curParent=parent;
      }
    },
    //获取问题详细信息
    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);
          }
        }
      });
    },
    //获取回答列表
    getAnswerList(flag) {
      // 隐藏loadMore
      if (flag) {
        this.answerList = [];
      }
      this.moreState = 2;
      if(this.pageIndex == 1) {
        // 重置数据
        this.answerList = [];
      }
      let that = this;
      apiQa.page({
          qid: this.$route.query.id,
          pageSize: 10,
          pageIndex: this.pageIndex
        }).then(res => {
          if (res.status == 200) {
            let allList = [];
            let ids = [];
            let level3ParentIds=[];
            if (res.result.list.length != 0) {
              res.result.list.forEach(item => {
                item.avatar = "";
                item.sex = null;
                item.isAll=false;//字数过大时，显示隐藏控制
                allList.push(item);
                ids.push(item.sysCreateAid);
                if(item.answers && item.answers.length != 0) {
                  item.answers.forEach(answers => {
                    answers.avatar = "";
                    answers.sex = null;
                    answers.isAll = false;
                    allList.push(answers);
                    level3ParentIds.push(answers.id);
                    ids.push(answers.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;
                item.isAll=false;
                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");
    },
    showButtons(id){
      if(!this.readonly){
        this.btnsShowRowId=id;
      }
    },
    hideButtons(){
      this.btnsShowRowId='';
    },
    //展示全部
    displayAll(item) {
      if(!item.isAll && item.content.length > 170) {
          return item.content.slice(0, 170) + "...";
      }
      return item.content;
    },
    changeIsAll(item) {
      item.isAll=!item.isAll;
    },
    openAnswer() {
      this.answerShow = true;
    },
    replyContentMethod(data,parent) {
      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;
      }else if(data.clevel>2){
        replyData.commentId=data.commentId;
        replyData.clevel=3;
      }
      apiQa.saveComment(replyData).then(res => {
          if(res.status == 200) {
            res.result.avatar = "";
            res.result.sex = null;
            res.result.isAll = false;
            this.$message.success("回复成功");
            this.getUserInfoList([res.result], [res.result.sysCreateAid]);
            this.curParentId='';
            this.curParent={};
            this.replyContent='';
            //添加到页面中
            if(data.clevel<3){
              if(data.answers){
                data.answers.push(res.result);
              }else{
                data.answers=[];
                data.answers.push(res.result);
              }
            }else{
              parent.answers.push(res.result);
            }

          } else {
            this.$message.error("回复失败");
          }
        });
    },
    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,
        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);
      //   }
      // })
    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .checked-show{
  .el-dialog__header{
    padding:0;
  }
}
::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;
  border-bottom: 1px solid #dddddd;
  // padding: 5px 20px 20px 20px;
  .answer-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;
    }
    .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;
    }
  }
  .answer-body{
      padding-left: 40px;
      .answer-text{
         margin: 20px 0 15px;
         line-height: 24px;
         white-space: pre-wrap;
         word-break: break-all;
         span {
           color: #409eff;
           cursor: pointer;
           margin-left: 5px;
         }
     }
     .answer-time{
       font-size: 14px;
       color: #8590a6;
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
     .answer-boot{
         height: 35px;
         line-height: 35px;
         display: flex;
         justify-content: space-between;
         .answer-boot-btns{
            a{
                margin-right:15px;
                span{
                  margin-left: 6px;
                  color: #8590A6;
                  font-size: 14px;
                }
            }
         }

     }
     .answer-reply {
       display: flex;
       margin-bottom: 10px;
       .el-button {
         margin-left: 10px;
       }
     }
  }
  // .bottom {
  //   text-align: right;
  // }
}
.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-author-text{
          margin-left: 10px;
          color: #8590A6;
          font-size:14px;
        }
      }
      .comment-time{
        color: #666666;
        font-size: 12px;
      }
  	}
  	.comment-body{
  		padding-left: 40px;
      .comment-content{
          padding-bottom: 0px;
          word-break:break-all;
          span{
            cursor: pointer;
            color: #409EFF
          }
      }
      .comment-btns{
        // padding: 5px 10px 10px 0px;
        height: 35px;
        line-height: 35px;
        a{
          margin-right:15px;
          span{
            margin-left: 6px;
            color: #8590A6;
            font-size: 14px;
          }
        }
      }
      .comment-reply {
        display: flex;
        margin-bottom: 10px;
        .el-button {
          margin-left: 10px;
        }
      }
  	}
    .comment-replys{
      padding-left: 40px;
    }
  }
.comment-last{
  border-bottom: none;
}
.answer-reply-box {
  margin-top: 10px;
  background-color: #fff;
  padding: 5px 20px 10px 20px;
}
// ::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>
