<template>
  <div>
    <div class='discuss-detail-scroll'>
      <div class='ques'>
        <div class='title'>{{discussQues.title}}</div>
        <div class='text' v-html="discussQues.text"></div>
        <div class='user'>
          <div class='name'>{{user.name}}</div>
          <div class='time'>{{user.time}}</div>
          <template v-if='discussQues.mine'><div class='right-txt' @click='deleteDiscuss'>{{ $t('pages.learn.discussDetail.delete') }}</div></template>
          <div class='right-txt' @click='callbackComment' :data-sid='discussQues.sid' :data-qid='discussQues.qid' :data-quesid='discussQues.qid'>{{ $t('pages.learn.discussDetail.reply') }}</div>
          <div class='right-txt' @click='openOrcloseDis' data-key='disQus'>{{ $t('pages.learn.discussDetail.discuss') }}({{discussQues.comCnt}})</div>
          <!-- <div class='right-txt' @click='btnlike' :data-quesid='discussQues.qid' :data-sid='discussQues.sid' :data-tagid='discussQues.tag_id'>
            {{ $t('pages.learn.discussDetail.like') }}({{discussQues.likeCnt}})</div> -->
        </div>
        <div v-show='disQus.isShowComment'>
          <answer :dataJson="discussQues" @updateList="getData"></answer>
        </div>
      </div>
      <div class='result'>{{discussQues.askCnt}} {{ $t('pages.learn.discussion.answers') }}<div style='display: inline-block; width: 0.2rem;'></div>{{discussQues.TouCnt}} {{ $t('pages.learn.discussion.votes') }}</div>
      <!-- <template v-for='(item, index) in answersList'>
        <div v-bind:key="index" class='ask'>
          <div class='user-1'>
            <template v-if="item.user.url">
              <img class='img-1' :src='item.user.url' />
            </template>
            <template v-else>
              <img class='img-1' src='../assets/images/person-default.jpg' />
            </template>
            <div class='right-1'>
              <div class='name-1'>{{item.user.name}}</div>
              <div class='time-1'>{{item.user.time}}</div>
            </div>
          </div>
          <div class='text' v-html="item.text"></div>
          <div class='user'>
            <template v-if='item.mine'><div class='right-txt' @click='deleteAnswer' :data-aid='item.aid'>{{ $t('pages.learn.discussDetail.delete') }}</div></template>
            <div class='right-txt' @click='callbackComment' :data-sid='discussQues.sid' :data-qid='discussQues.qid' :data-ansid='item.aid'>{{ $t('pages.learn.discussDetail.reply') }}</div>
            <div class='right-txt' @click='openOrcloseDis' :data-key='answers' :data-index='index'>{{ $t('pages.learn.discussDetail.discuss') }}({{item.comCnt}})</div>
            <div class='right-txt' @click='btnlike' :data-sid='discussQues.sid' :data-quesid='discussQues.qid' :data-ansid='item.aid' :data-tagid='item.tag_id'>
              点赞({{item.likeCnt}})</div>
          </div>
          <template v-if='answers[index].isShowComment'>
            <template v-for='(item1, index) in item.comments'>
              <div v-bind:key='index' class='item-list' :data-id='item1.id'>
                <div class='user'>
                  <div class='name'>{{item1.user.name}}</div>
                  <div class='time'>{{item1.user.time}}</div>
                  <template v-if='item1.mine'><div class='right-txt' @click='deleteComment' :data-cid='item1.cid'>{{ $t('pages.learn.discussDetail.delete') }}</div></template>
                  <div class='right-txt' @click='callbackComment' :data-sid='discussQues.sid' :data-qid='discussQues.qid' :data-ansid='item.aid' :data-to='item.user.name'>{{ $t('pages.learn.discussDetail.reply') }}</div>
                </div>
                <div class='text' v-html="item1.text"></div>
              </div>
            </template>
          </template>
          <template v-if='(!item.comments.length || !answers[index].isShowComment)'><div style='width: 100%; height: 0.2rem;'></div></template>
        </div>
      </template> -->
      <!-- <template v-if='!answersList.length'>
        <div class='no-data'>{{ $t('pages.learn.discussDetail.noAnswer') }}</div>
      </template>
      <div style='width: 750rpx; height: 200rpx;'></div> -->
    </div>
    <div class='input-publish'>
    <textarea id="editor"></textarea>
      <!-- <div class='ask'> -->
        <!-- <image class='img' src='./icons/ask.png' mode='aspectFill'></image> -->
        <!-- <input type='text' class="txt" placeholder='{{inputStatus.placeholder}}' focus='{{inputStatus.canFocus}}' bindblur='blurInput' confirm-type='send' bindconfirm='publishContent' value='{{inputStatus.input}}' cursor-spacing='20'/> -->
      <!-- </div> -->
      <el-button type="primary" @click="publishContent">{{ $t('pages.learn.discussDetail.send') }}</el-button><em class="send">({{inputStatus.placeholder}})</em>
    </div>
  </div>
</template>

<script>
import answer from '../components/childAnswer.vue'
import * as api from '../api/index.js'
export default {
  components: { answer },
  name: 'DiscussDetail',
  props: {
    paramId: { type: Object, require: false }
    // sid: { type: String, require: false },
    // cid: { type: String, require: false },
    // id: { type: String, require: false } // 章节id
  },
  data () {
    return {
      discussQues: {},
      /* 回复内容状态 */
      call: {},
      /* 存储状态值 的对象, 记录上次用户操作 */
      disQus: {
        isShowComment: false
      },
      inputStatus: {
        canFocus: false,
        placeholder: `${this.$t('pages.learn.discussDetail.answering')} ...`,
        input: ''
      }
    }
  },
  created() {
    this.getData()
  },
  computed: {
    user() {
      return this.discussQues.user || {}
    }
  },
  methods: {
    updateList () {
      this.getData()
    },
    deleteDiscuss () {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      api.deleteDiscuss(this.id).then(json => {
        this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
        /* 返回上一级 菜单 */
        setTimeout(() => {
          // wx.navigateBack({ delta: 1 })
          this.$router.go(-1)
        }, 1000)
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    getData () {
      api.getDiscussDetail(this.paramId.id).then(data => {
        const json = this.setData(data)
        this.discussQues = json.ques
        this.call.semester_id = this.discussQues.sid
        this.disQus.isShowComment = json.ques.isShowComment
      })
      // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      // .then(json => {
      //   this.discussQues = json.ques
      //   this.call.semester_id = this.discussQues.sid
      //   this.disQus.isShowComment = json.ques.isShowComment
      //   // const answers = []
      //   // for (let i = 0; i < json.answer.length; i++) {
      //   //   answers.push({
      //   //     aid: json.answer[i].aid,
      //   //     isShowComment: json.answer[i].isShowComment
      //   //   })
      //   // }
      //   // this.answersList = json.answer
      //   // this.answers = answers
      // }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    callbackComment (e) {
      // /* 如果，输入框中，本身已经存在输入内容，那么再点击其他回复时，不给提示，直接清空 */
      this.inputStatus.input = '' // 这里如果想判断，不能使用 inputStatus.input这个 在blur时存储
      const _data = e.currentTarget.dataset
      const qid = _data.qid
      const quesid = _data.quesid
      const ansid = _data.ansid
      const to = _data.to
      const sid = _data.sid
      const json = {}
      if (qid) { json.questionId = qid }
      if (to) { json.to = to }
      if (quesid) { json.question_id = quesid }
      if (ansid) { json.answer_id = ansid }
      if (sid) { json.semester_id = sid }
      this.call = json
      if (to) {
        this.inputStatus.placeholder = this.$t('pages.learn.discussDetail.reply') + to + '：'
      } else {
        this.inputStatus.placeholder = `${this.$t('pages.learn.discussDetail.reply')}：`
      }
      this.inputStatus.canFocus = true
      $('#editor').focus()
    },
    openOrcloseDis (e) {
      const key = e.currentTarget.dataset.key
      if (key === 'disQus') {
        this.disQus.isShowComment = !this.disQus.isShowComment
      } else {
        const index = e.currentTarget.dataset.index
        this.answers[index].isShowComment = !this.answers[index].isShowComment
      }
    },
    setData (_data) {
      const json = {
        ques: {
          qid: _data.id,
          sid: _data.semester_id,
          user: {
            url: _data.questioner.avatar || '',
            name: _data.questioner.nickname,
            time: _data.created_time
          },
          title: _data.title,
          text: _data.contents,
          askCnt: _data.answer_count || 0,
          TouCnt: _data.tag_total_count || 0,
          likeCnt: _data.tag_count || 0,
          comCnt: _data.comments.length,
          mine: _data.mine,
          isShowComment: false,
          has_tag: _data.has_tag,
          tag_id: (_data.tag && _data.tag.id) || '',
          comments: _data.comments.map((_, i) => {
            return {
              cid: _.id,
              user: {
                url: _.observer.avatar || '',
                name: _.observer.nickname,
                time: _.created_time
              },
              text: _.comments,
              mine: _.mine
            }
          })
        }
      }
      return json
    }
  }
}
</script>

<style lang="scss">
// .discuss-detail-scroll { }
.discuss-detail-scroll .ques { padding: 0.3rem 0.26rem; padding-top: 0; margin-bottom: 0.2rem; background: #fff; box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1); overflow: hidden; }
/* 显示标题、描述、讨论、人等 */
.discuss-detail-scroll .user { margin-top: 0.15rem; overflow: hidden; }
.discuss-detail-scroll .user .name { float: left; font-size: 0.16rem; color: #313131; line-height: 0.2rem; }
.discuss-detail-scroll .user .time { float: left; margin-left: 0.4rem; font-size: 0.14rem; color: #a0a0a0; line-height: 0.2rem; }
.discuss-detail-scroll .user .right-txt { float: right; margin-left: 0.2rem; font-size: 0.14rem; color: #a27c1b; cursor: pointer; }
.discuss-detail-scroll .user .right-txt .img { display: inline-block; margin-top: 1px; width: 0.22rem; height: 0.2rem; }
.discuss-detail-scroll .title { margin: 0.15rem 0; font-size: 0.24rem; color: #313131; line-height: 1.5; text-align: justify; }
.discuss-detail-scroll .text { font-size: 0.18rem; color: #535353; line-height: 1.5; text-align: justify; }
/* 显示回答和投票 */
.discuss-detail-scroll .result { margin-left: 0.26rem; margin-top: 0.15rem; font-size: 0.14rem; color: #313131; }

.discuss-detail-scroll .ask { position: relative; margin-top: 0.2rem; padding: 0 0.26rem; background: #fff; overflow: hidden; }
/* 显示回答 和 讨论 */
.discuss-detail-scroll .ask .user-1 { position: relative; overflow: hidden; margin-top: 0.25rem; margin-bottom: 0.15rem; }
.discuss-detail-scroll .ask .user-1 .img-1 { float: left; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.discuss-detail-scroll .ask .user-1 .right-1 { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.discuss-detail-scroll .ask .user-1 .right-1 .name-1 { font-size: 0.14rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; }
.discuss-detail-scroll .ask .user-1 .right-1 .time-1 { margin-top: 5px; font-size: 0.14rem; color: #a0a0a0; }
.discuss-detail-scroll .item-list { position: relative; padding: 0.3rem 0; border-bottom: 1px solid #c9c9c9; }
.discuss-detail-scroll .item-list:last-child { border-bottom: none; }
.discuss-detail-scroll .item-list .user { margin-top: 0; overflow: hidden; }
.discuss-detail-scroll .item-list .user .name { float: left; font-size: 0.16rem; color: #313131; line-height: 0.2rem; }
.discuss-detail-scroll .item-list .user .time { float: left; margin-left: 0.4rem; font-size: 0.14rem; color: #a0a0a0; line-height: 0.2rem; }
.discuss-detail-scroll .item-list .user .right-txt { float: right; margin-left: 0.2rem; font-size: 0.14rem; color: #a27c1b;  }
.discuss-detail-scroll .item-list .text { margin-top: 0.15rem; font-size: 0.16rem; color: #535353; }
.discuss-detail-scroll .item-list .text.on { color: #2263d9; }
.discuss-detail-scroll .no-data { padding: 1rem 0; font-size: 0.24rem; color: #c9c9c9; text-align: center; }
.input-publish { position: fixed; z-index: 2; height: 1.5rem; left: 200px; right: 15px; bottom: 0; padding: 0.2rem; background: #fff; box-sizing: border-box; }
.input-publish #editor { width: 100%; height: 0.7rem; font-size: 18px; line-height: 1.5; outline: none; }
.input-publish .send { font-size: 14px; color: #ddd; margin-left: 10px; }
.input-publish .ask { position: relative; margin: 12px auto; width: 90%; height: 56px; border: 1px solid #dcdcdc; box-sizing: border-box; -webkit-box-sizing: border-box; }
.input-publish .ask .img { position: absolute; left: 24px; top: 13px; width: 28px; height: 0.26rem; }
.input-publish .ask .txt { position: absolute; left: 63px; top: 0; height: 54px; width: 100%; border: none; line-height: 2; font-size: 0.18rem; color: #313131; }
</style>
