<template>
  <div class="detail_box">
    <p class="now_page_title">
      技术支持 / 问答中心 / 问答列表 /
      <span>详情</span>
    </p>
    <div class="detail_content">
      <div class="question">
        <p>{{ question.title }}</p>
        <p>
          <span class="left">
            <span>{{ question.asker }}</span
            >发布于 <span>{{ question.time }}</span>
          </span>
          <span class="right">
            <img src="../../../assets/imgs/jszc_ic_huida.png" alt="" />
            <span>{{ question.info_count }}</span>
            <img src="../../../assets/imgs/jszc_ic_liulan.png" alt="" />
            <span>{{ question.watcher }}</span>
          </span>
        </p>
        <div class="ques_content" v-html="question.content"></div>
      </div>
      <div class="answer">
        <p>{{question.info_count}}条回答</p>
        <div class="answer_list">
            <div class="answer_box" v-for="(item,index) in answer" :key="'answer'+index+200">
                <div class="picture">
                    <img src="../../../assets/imgs/img_head.png" alt="" style="width:100%">
                </div>
                <div class="text" :style="index == answer.length-1||item.children?{border:'0'}:''">
                    <p>
                        <span class="left">{{item.username}}</span> 
                        <span class="right"> 
                            <span v-if="index==0||index==1||index==2">{{index==0?'沙发':index==1?'板凳':'地板'}}</span> 
                            <span v-else>{{index}}楼</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="'回复'+back_person"
                          @blur="clear_index"
                          :ref="'input'+index"
                          v-model="back_info">
                          <div slot="prefix" style="height:48px;line-height:48px;">
                            <img src="../../../assets/imgs/img_head.png" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;"></div>
                          <div slot="suffix" class="back_solt">回复</div>
                      </el-input>
                    </div>
                    <div class="back_fllow answer_box" v-for="(it,idx) in item.children" :key="'ans_child'+idx+5000" v-if="idx<=4||answer_child_index===index">
                        <div class="picture">
                            <img src="../../../assets/imgs/img_head.png" alt="" style="width:100%">
                        </div>
                        <div class="text" :style="idx == item.children.length-1?{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"></div>
                            <div @click="showinput(index,idx)" class="back"><img src="../../../assets/imgs/jszc_btn_huifu.png" alt=""> 回复</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="'回复'+back_person"
                              @blur="clear_index"
                              :ref="'input'+index+idx"
                              v-model="back_info">
                              <div slot="prefix" style="height:48px;line-height:48px;">
                                <img src="../../../assets/imgs/img_head.png" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;"></div>
                              <div slot="suffix" class="back_solt">回复</div>
                          </el-input>
                        </div>
                    </div>
                    <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>
            </div>
        </div>
      </div>

      <div class="ans_self">
        <p><img src="../../../assets/imgs/img_head.png" alt=""> <span>用户</span> </p>
        <wang-e-bd class="editbox" v-model="editstr" :menu="menu" :full="false"></wang-e-bd>
        <div class="pubilc"><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: {
        title: "为什么感知服务提示无法注册",
        asker: "林有有",
        time: "2020-10-11 18:23:52",
        info_count: 12,
        watcher: "1,024",
        content: "<h1>hahahahha</h1><p>13123123123123</p>",
      },
      answer_count:[],
      answer_index:'',
      answer_child_index:'',
      back_person:'lll',
      back_info:'',
      menu:[
          'bold',
          'foreColor',
          'code',
          'link',
          'image',
          'video'
      ],
      editstr:'',
      answer: [
        {
          id: 4,
          username: "普通neo",
          created: "2020-10-21T15:30:13+08:00",
          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
          answered_user: "",
          children: [
            {
              id: 5,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 6,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 7,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 5,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 6,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 7,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
          ],
        },
        {
          id: 4,
          username: "普通neo",
          created: "2020-10-21T15:30:13+08:00",
          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
          answered_user: "",
          children: [
            {
              id: 5,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 6,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 7,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 5,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 6,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
            {
              id: 7,
              username: "普通neo",
              created: "2020-10-21T15:34:20+08:00",
              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
              answered_user: "我是超级管理员",
              children: null,
            },
          ],
        },
        {
          id: 4,
          username: "普通neo",
          created: "2020-10-21T15:30:13+08:00",
          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
          answered_user: "",
          children: null,
        },
      ],
    };
  },
  watch: {},
  computed: {},
  created() {
     
  },
  mounted() {},
  methods: {
      deal_time(time){
        return  time.split('+')[0].replace("T"," ")
        
      },
      showinput(...arg){
        console.log(arg);
        this.answer_count=[]
        this.answer_index=''
        if(!arg[1]&&arg[1]!==0){
          this.answer_index = arg[0]
          setTimeout(()=>{
            var temp = 'input'+arg[0]
            this.$refs[temp][0].$refs.input.focus()
          },200)
        }else{
          this.answer_count=arg
          setTimeout(()=>{
            this.$refs['input'+arg[0]+arg[1]][0].$refs.input.focus();
          },200)
          
        }
      },
      clear_index(){
        this.answer_count=[]
        this.answer_index=''
      }
  },
};
</script>

<style scoped>
.detail_box {
  /* min-height: calc(100% - 15px); */
}
.now_page_title {
  margin: 13px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.detail_content {
  width: 100%;
  /* min-height: calc(100% - 35px); */
}
.question,
.answer {
  width: 856px;
  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{
    padding: 16px 0;
    color: #242c43;
}
.text .back{
    float: right;
    color: #58617a;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 16px;
}
.text .back img{
    vertical-align: -3px;
    margin-right: 4px;
}
.back_fllow{
    background-color: #fbfbfc;
    width: 100%;
    padding: 16px;
}
.ans_self{
    width: 100%;
    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;
}
.under_count span{
  color: #515fe7;
  cursor: pointer;
}
</style>
<style>
  .back_input .el-input__inner{
    height: 48px;
    line-height: 48px;
    padding-left: 50px;
    padding-right: 80px;
  }
</style>
