<template>
  <div>
    <div class='discuss-detail-scroll'>
      <div class='ques'>
        <div class='title'>{{detail.title}}</div>
        <div class='text' v-html="detail.contents"></div>
        <div class='user'>
          <div class='name'>{{user.nickname}}</div>
          <div class='time'>{{detail.created_time}}</div>
          <template v-if='detail.mine'><div class='right-txt' @click='deleteDiscuss'>{{ $t('DiscussModule.DiscussDetail.delete') }}</div></template>
          <div class='right-txt' @click='replyComposeParam({question_id: detail.id})'>{{ $t('DiscussModule.DiscussDetail.reply') }}</div>
          <div class='right-txt' @click='commentVisible = !commentVisible'>{{ $t('DiscussModule.DiscussDetail.discuss') }}({{detail.comments ? detail.comments.length : 0}})</div>
          <div class='right-txt' @click='btnlike({tagId: detail.tag ? detail.tag.id : null})'>
            {{ $t('DiscussModule.DiscussDetail.like') }}({{detail.tag_count}})</div>
        </div>
        <div v-show='commentVisible'>
          <template v-for="item in detail.comments">
            <reply-item :data="item" :key="item.id" :dataId="detail.id" @reply="replyComposeParam" @updateList="updateList"></reply-item>
          </template>
        </div>
      </div>
      <div class='result'>{{detail.answer_count}} {{ $t('DiscussModule.DiscussList.answers') }}<div style='display: inline-block; width: 0.2rem;'></div>{{detail.tag_total_count || 0}} {{ $t('DiscussModule.DiscussList.votes') }}</div>
      <!-- 回答列表 -->
      <template v-for="item in detail.answers">
        <answer-item :data="item" :key="item.id" @btnlike="btnlike" @updateList="updateList" @reply="replyComposeParam"></answer-item>
      </template>
      <template v-if='!answersLength'>
        <div class='no-data'>{{ $t('DiscussModule.DiscussDetail.noAnswer') }}</div>
      </template>
      <div style='width: 750rpx; height: 200rpx;'></div>
    </div>
    <div style="width: 100%; height: 1.7rem;"></div>
    <div class='input-publish'>
      <textarea id="editor" v-model="replyText" ref="focusTextarea"></textarea>
      <el-button type="primary" @click="publishContent">{{ $t('DiscussModule.DiscussDetail.send') }}</el-button><em class="send">({{inputStatus.placeholder}})</em>
    </div>
  </div>
</template>

<script>
import replyItem from '../components/replyDetailItem.vue'
import AnswerItem from '../components/answerItem.vue'
import * as api from '../api/index.js'
export default {
  components: { AnswerItem, replyItem },
  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 {
      replyText: '',
      commentVisible: false,
      detail: {},
      /* 回复内容状态 */
      call: {},
      /* 存储状态值 的对象, 记录上次用户操作 */
      disQus: {
        isShowComment: false
      },
      inputStatus: {
        canFocus: false,
        placeholder: `${this.$t('DiscussModule.DiscussDetail.answering')} ...`,
        input: ''
      },
      answer: true,
      replyParam: {}
    }
  },
  created() {
    this.updateList()
  },
  computed: {
    user() {
      return this.detail.questioner || {}
    },
    answersLength() {
      return this.detail.answers ? this.detail.answers.length : false
    }
  },
  methods: {
    // 点赞
    btnlike (e) {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      if (e.tagId) {
        api.unlike(e.tagId).then(json => {
          this.updateList()
        }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
      } else {
        const param = {}
        if (this.detail.id) { param.question_id = this.detail.id }
        if (e.ansId) { param.answer_id = e.ansId }
        if (this.detail.semester_id) { param.semester_id = this.detail.semester_id }
        api.like(param).then(json => {
          this.updateList()
        }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
      }
    },
    // 删除问题
    deleteDiscuss () {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      api.deleteDiscuss(this.paramId.id).then(json => {
        this.$message({ type: 'success', message: this.$t('DiscussModule.DiscussDetail.deleteSuccess') })
        /* 返回上一级 菜单 */
        setTimeout(() => {
          this.$router.go(-1)
        }, 1000)
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    // 更新列表
    updateList () {
      api.getDiscussDetail(this.paramId.id).then(data => {
        this.detail = data
      })
    },
    /**
     * 点击 键盘发送按钮时
     */
    publishContent () {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      this.replyParam.comments = this.replyParam.to ? `${this.$t('DiscussModule.DiscussDetail.reply')}${this.replyParam.to}:${this.replyText}` : this.replyText
      if (this.answer) {
        this.replyComposeParam({
          answer: true,
          contents: this.replyText,
          question_id: this.detail.id
        }, true)
        api.answerQues(this.replyParam).then(json => {
          this.updateList()
          this.replyText = ''
        }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
      } else {
        api.callbackComment(this.replyParam).then(json => {
          this.updateList()
          this.replyText = ''
        }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
      }
      this.$refs.focusTextarea.focus()
    },
    // 通过点击不同的回复按钮  拼成所要提交不同的参数
    replyComposeParam (obj, answer) {
      this.$refs.focusTextarea.focus()
      this.inputStatus.placeholder = obj.to !== undefined ? `${this.$t('DiscussModule.DiscussDetail.reply')}${obj.to}:` : `${this.$t('DiscussModule.DiscussDetail.reply')}:`
      this.answer = answer || false
      const commonParam = {
        questionId: this.detail.id,
        semester_id: this.detail.semester_id
      }
      this.replyParam = Object.assign(commonParam, obj)
    }
  }
}
</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: 295px; right: 30px; 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>
