<template>
  <div class="detail_box">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/technical_support">
          技术支持
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/technical_support/answer_center">
          问答中心
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/technical_support/answer_center/list">
          问答列表
        </el-breadcrumb-item>
        <el-breadcrumb-item> 详情 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="detail_content">
      <div class="question" v-if="question.title">
        <p>{{ question.title }}</p>
        <p>
          <span class="left">
            <span>{{ question.user_name }}</span
            >发布于 <span>{{ deal_time(question.updated) }}</span>
          </span>
          <span class="right">
            <img src="../../../assets/imgs/jszc_ic_huida.png" alt="" />
            <span>{{ question.answer_num }}</span>
            <img src="../../../assets/imgs/jszc_ic_liulan.png" alt="" />
            <span>{{ question.view }}</span>
          </span>
        </p>
        <div class="ques_content w-e-text w-e-text-container" v-html="question.content"></div>
      </div>
      <div class="answer">
        <p>{{answer_total}}条回答</p>
        <div class="answer_list">
            <div class="answer_box" v-for="(item,index) in answer" :key="'answer'+index+200">
                <div class="picture">
                    <img :src="item.user_picture_path || head_pic" alt="" style="width:100%">
                </div>
                <div class="text" :style="index == answer.length-1?{border:'0'}:''">
                    <p>
                        <span class="left">{{item.username}}</span> 
                        <span class="right"> 
                            <span v-if="index==0||index==1">{{index==0?'沙发':'板凳'}}</span> 
                            <span v-else>{{index + 1}}楼</span> | <span>{{deal_time(item.created)}}</span> 
                        </span> 
                    </p>
                    <div v-html="item.content" class="hf_content"></div>
                    <div @click="showinput(index)" class="back" :style="item.children?{marginBottom:'10px'}:''"><img src="../../../assets/imgs/jszc_btn_huifu.png" alt=""> 回复</div>
                    <div class="back_input" v-if="answer_index === index">
                      <el-input
                          :placeholder="'回复'+item.username"
                          @blur="clear_index"
                          :ref="'input'+index"
                          v-model="back_info">
                          <div slot="prefix" style="height:48px;line-height:48px;">
                            <img :src="user_info.picture_path || head_pic" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;border-radius:50%;"></div>
                          <div slot="suffix" class="back_solt" @click="answer_question(item.id,item.user_id)">回复</div>
                      </el-input>
                    </div>
                    <template v-for="(it,idx) in item.children">
                      <div class="back_fllow answer_box" :key="'ans_child'+idx+5000" v-if="idx<=4||answer_child_index===index">
                        <div :style="idx == item.children.length-1&&item.children.length<=5?{border:'0',overflow:'hidden',}:{borderBottom:'2px solid #f4f7fc',overflow:'hidden',}" >
                          <div class="picture_fllow">
                              <img :src="it.user_picture_path || head_pic" alt="" style="width:100%">
                          </div>
                          <div class="text_fllow" style="border:0;">
                              <p>
                                  <span class="left">{{it.username}} <span><span style="color:#bcc1d0;margin:0 9px;">回复</span>{{it.answered_user}}</span> </span> 
                                  <span class="right"> 
                                      <span></span><span>{{deal_time(it.created)}}</span> 
                                  </span> 
                              </p>
                              <div v-html="it.content" class="hf_content_fllow"></div>
                              <div @click="showinput(index,idx)" class="back_fllow_in">回复</div>
                          </div>
                          <div class="back_input" style="padding:0;height:auto;margin-bottom:0;" v-if="answer_count[0]==index&&answer_count[1]==idx">
                            <el-input
                                :placeholder="'回复'+it.username"
                                @blur="clear_index"
                                :ref="'input'+index+idx"
                                v-model="back_info">
                                <div slot="prefix" style="height:48px;line-height:48px;">
                                  <img :src="user_info.picture_path || head_pic" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;border-radius:50%;"></div>
                                <div slot="suffix" class="back_solt" @click="answer_question(item.id,it.user_id)">回复</div>
                            </el-input>
                          </div>
                        </div>
                      </div>
                    </template>
                    <div class="under_count" v-if="item.children&&item.children.length>5&&answer_child_index!==index">
                      还有{{item.children.length-5}}条回复，<span @click="answer_child_index=index">点击查看</span> 
                    </div>
                    <div class="under_count" v-if="item.children&&item.children.length>5&&answer_child_index===index">
                      <span @click="answer_child_index=-1">点击收起</span> 
                    </div>
                </div>
            </div>
        </div>
      </div>

      <div class="ans_self">
        <p><img :src="user_info.picture_path || head_pic" alt=""> <span>{{user_info.user_name}}</span> </p>
        <wang-e-bd class="editbox" v-model="editstr" :menu="menu" :full="false"></wang-e-bd>
        <div class="pubilc" @click="answer_question1"><img src="../../../assets/imgs/jszc_ic_fabu.png" alt="">发表</div>
      </div>
    </div>
  </div>
</template>

<script>
import wangEBd from '@/components/wangEBd'
export default {
  props: [],
  components: {
      wangEBd
  },
  data() {
    return {
      question: {},
      answer_count:[],
      answer_total:'',
      answer_index:'',
      answer_child_index:'',
      back_person:'lll',
      back_info:'',
      user_info:{},
      back_flag:true,
      menu:[
          'bold',
          'foreColor',
          'code',
          'link',
          'image',
          'video'
      ],
      editstr:'',
      answer: [],
      head_pic: require("@/assets/imgs/img_head.png"),
    };
  },
  watch: {},
  computed: {},
  created() {
     this.get_question()
     this.get_answer()
     this.get_user_info()
  },
  mounted() {},
  methods: {
    get_question(){
      // /apaas/support/qa/question/detail?id=${this.$route.params.id}
      this.$http
        .get(
          `/apaas/support/qa/question/detail?id=${this.$route.params.id}`
        ).then((res)=>{
          if(res.data.success){
            this.question = res.data.data
          }
        })
    },
    get_answer(){
      // /apaas/support/qa/question/detail?id=${this.$route.params.id}
      this.$http
        .get(
          `/apaas/support/qa/answer/detailList?id=${this.$route.params.id}&limit=1000&page=1`
        ).then((res)=>{
          if(res.data.success){
            this.answer = res.data.data
            this.answer_total = res.data.total
          }
        })
    },
    get_user_info(){
      this.$http
        .get(
          `/apaas/support/qa/info`
        ).then((res)=>{
          if(res.data.success){
            this.user_info = res.data.data
          }
        })
    },
    answer_question(contentid,userid){
        if(this.back_info){
  
        }else{
          this.$message.error('请填写回复')
          return
        }
        this.$http
          .post(
            `/apaas/support/qa/answer/create`,{
              "question_id":parseInt(this.$route.params.id),
              "content":this.back_info,
              "parent_id":contentid,
              "answered_user_id":userid
            }
          ).then((res)=>{
            if(res.data.success){
                this.$message.success('添加成功')
                this.get_question()
                this.get_answer()
            }else{
                this.$message.error('添加失败')
            }
          })
    },
    answer_question1(){
      setTimeout(()=>{
        if(!this.back_flag){
          return 
        }
        if(this.editstr){
  
        }else{
          this.$message.error('请填写回复')
          return
        }
        this.back_flag = false
        this.$http
          .post(
            `/apaas/support/qa/answer/create`,{
              "question_id":parseInt(this.$route.params.id),
              "content":this.editstr,
            }
          ).then((res)=>{
            this.back_flag = true
            if(res.data.success){
                this.$message.success('添加成功')
                this.editstr = ''
                this.get_question()
                this.get_answer()
            }else{
                this.$message.error('添加失败')
            }
          })
      },100)
    },
    deal_time(time){
      console.log(time);
      return  time.split('+')[0].replace("T"," ")
    },
    showinput(...arg){
      console.log(arg);
      this.answer_count=[]
      this.answer_index=''
      this.back_info = ''
      if(!arg[1]&&arg[1]!==0){
        this.answer_index = arg[0]
        this.$nextTick(()=>{
          var temp = 'input'+arg[0]
          this.$refs[temp][0].$refs.input.focus()
        })
      }else{
        this.answer_count=arg
        this.$nextTick(()=>{
          this.$refs['input'+arg[0]+arg[1]][0].$refs.input.focus();
        })
        
      }
    },
    clear_index(){
      setTimeout(()=>{
        this.answer_count=[]
        this.answer_index=''
        this.back_info = ''
      },500)
    }
  },
};
</script>

<style scoped>
.apass_breadcrumb > .el-breadcrumb {
  padding: 12px 0 11px;
}
.detail_content {
  width: 100%;
  /* min-height: calc(100% - 35px); */
}
.question,
.answer {
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
  border-radius: 12px;
  padding: 24px 16px;
  margin-bottom: 20px;
}
.question p {
  font-size: 14px;
  color: #a9aec0;
  padding: 0 10px;
  overflow: hidden;
}
.question p:nth-of-type(1) {
  font-size: 24px;
  color: #242c43;
  line-height: 32px;
}
.question p:nth-of-type(2) {
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f4f7fc;
}
.question p:nth-of-type(2) .left {
  float: left;
}
.question p:nth-of-type(2) .left span {
  color: #58617a;
  margin: 0 8px;
}
.question p:nth-of-type(2) .left span:nth-of-type(1) {
  margin-left: 0;
}
.question p:nth-of-type(2) .right {
  float: right;
}
.question p:nth-of-type(2) .right span {
  color: #242c43;
  margin-right: 31px;
}
.question p:nth-of-type(2) .right img {
  vertical-align: -2px;
}
.ques_content {
  padding: 18px 8px 0 8px;
}
.answer{
    padding: 25px 16px 25px 25px;
}
.answer p:nth-of-type(1){
    font-size: 20px;
	color: #242c43;
}
.answer_list{
    margin-top: 9px;
}
.answer_box{
    width: 100%;
    overflow: hidden;
    padding-top: 16px;
}
.answer_box .picture{
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.answer_box .text{
    float: right;
    width: calc(100% - 55px);
    border-bottom: 2px solid #f4f7fc;
    overflow: hidden;
}
/* .answer_list .answer_box:nth-last-of-type(1) .text{
    border:0;
} */
.answer_box .text p{
    font-size: 14px;
	color: #e3e5ef;
    overflow: hidden;
}
.answer_box .text p .left{
    float: left;
    color: #58617a;
}
.answer_box .text p .right{
    float: right;
}
.answer_box .text p .right span{
    color: #a9aec0;
}
.answer_box .text p .right span:nth-of-type(1){
    margin-right: 17px;
}
.answer_box .text p .right span:nth-of-type(2){
    margin-left: 17px;
}
.hf_content{
  width: 750px;
  overflow: auto;
  padding: 16px 0 0;
  color: #242c43;
  margin-bottom: 16px;
}

.hf_content::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
.hf_content::-webkit-scrollbar-thumb {
  border-radius: 8px;
  box-shadow: 0 8px 0 #a5adb7 inset;
  border: 4px solid rgba(0, 0, 0, 0);
  /* background-color: #a5adb7; */
}

.hf_content::-webkit-scrollbar-track {
  border-radius: 8px;
  box-shadow: 0 8px 0 #f4f4f4 inset;
  border: 4px solid rgba(0, 0, 0, 0);
  /* background-color: #f4f4f4; */
}
.text .back{
    float: right;
    color: #0f2683;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 16px;
    margin-right: 10px;
}
.text .back img{
    vertical-align: -3px;
    margin-right: 4px;
}
.back_fllow{
    background-color: #fbfbfc;
    width: 100%;
    padding: 16px 16px 0;
}
.back_fllow:nth-last-child(1) {
  margin-bottom: 16px;
}
.ans_self{
    width: 856px;
    padding: 24px;
    height: 354px;
    background-color: #ffffff;
	box-shadow: 0px 3px 6px 0px 
		rgba(15, 19, 65, 0.04);
	border-radius: 12px;
    margin-bottom: 20px;
}
.ans_self p img{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    vertical-align: -6px;
    margin-right: 5px;
}
.ans_self p{
    color: #58617a;
}
.editbox{
    margin-top: 15px;
    height: calc(100% - 65px);
}
.pubilc{
    float: right;
    width: 88px;
	height: 40px;
	background-color: #515fe7;
	border-radius: 8px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
	color: #e6ebfe;
    margin-top: -14px;
    cursor: pointer;
}
.pubilc img{
    margin-right: 8px;
}
.back_input{
  width: 100%;
  height: 80px;
	background-color: #fbfbfc;
  padding: 16px;
  float: left;
  margin-bottom: 24px;
}
.back_solt{
  width: 60px;
	height: 32px;
  line-height: 32px;
  text-align: center;
	background-color: #515fe7;
	border-radius: 4px;
  font-size: 14px;
	color: #e6ebfe;
  margin-top: 7px;
  margin-right: 7px;
  cursor: pointer;
}
.under_count{
  height: 46px;
  line-height: 46px;
  color: #58617a;
  font-size: 14px;
  background-color: #fbfbfc;
  padding-left: 24px;
  margin-top: -16px;
}
.under_count span{
  color: #515fe7;
  cursor: pointer;
}
.picture_fllow {
  float: left;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
}
.text_fllow {
  float: right;
  width: calc(100% - 30px);
  border-bottom: 2px solid #f4f7fc;
  overflow: hidden;
}
.hf_content_fllow {
  width: 690px;
  overflow: auto;
  padding: 10px 0 0;
  color: #242c43;
  margin-bottom: 14px;
}
.back_fllow_in {
  float: right;
  color: #0f2683;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 14px;
  margin-right: 10px;
}
</style>
<style>
  .back_input .el-input__inner{
    height: 48px;
    line-height: 48px;
    padding-left: 50px;
    padding-right: 80px;
  }
</style>
