<template>
  <div class="discuss-detail">
    <div class="discuss-question">
      <div class="title">{{ detail.title }}</div>
      <div class="text" v-html="detail.contents"></div>
      <div class="user">
        <img class="user-avatar" :src="avatar" />
        <div class="user-content">
          <div class="name">{{ user.nickname }}</div>
          <div class="time">{{ detail.created_time }}</div>
        </div>
        <div class="tools">
          <div class="right-txt" @click="toggleLike" v-if="false">
            <i class="el-icon-thumb"></i>
            {{ $t('DiscussModule.DiscussDetail.like') }}({{ detail.tag_count }})
          </div>
          <div class="right-txt" @click="commentVisible = !commentVisible" v-if="false">
            <i class="el-icon-chat-round"></i>
            {{ $t('DiscussModule.DiscussDetail.discuss') }}({{ detail.comments ? detail.comments.length : 0 }})
          </div>
          <div class="right-txt" @click="handleRemove" v-if="detail.mine">
            <i class="el-icon-delete"></i>
            {{ $t('DiscussModule.DiscussDetail.delete') }}
          </div>
        </div>
      </div>
      <comment-list :detail="detail" :list="detail.comments" @update="updateList" v-if="commentVisible"></comment-list>
    </div>
    <div class="discuss-answer">
      <div class="discuss-answer-hd">{{ detail.answer_count }} {{ $t('DiscussModule.DiscussList.answers') }}</div>
      <!-- 回答列表 -->
      <template v-for="item in detail.answers">
        <answer-item :detail="detail" :data="item" :key="item.id" @update="updateList"></answer-item>
      </template>
      <template v-if="!answersLength">
        <div class="no-data">{{ $t('DiscussModule.DiscussDetail.noAnswer') }}</div>
      </template>
    </div>
    <div class="discuss-publish-fixed" :style="style">
      <div class="discuss-publish">
        <el-input type="textarea" class="discuss-publish-textarea" resize="none" v-model="publishText"></el-input>
        <el-button type="primary" @click="handlePublis">{{ $t('DiscussModule.DiscussDetail.sendAnswer') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import commentList from '../components/commentList.vue'
import answerItem from '../components/answerItem.vue'
import * as api from '../api/index.js'
import defaultAvatar from '../assets/images/person-default.jpg'

export default {
  components: { answerItem, commentList },
  name: 'DiscussDetail',
  props: {
    paramId: { type: Object, require: false }
  },
  data() {
    return {
      publishText: '',
      commentVisible: false,
      detail: {},
      width: 0
    }
  },
  computed: {
    user() {
      return this.detail.questioner || {}
    },
    avatar() {
      return this.user.avatar || defaultAvatar
    },
    answersLength() {
      return this.detail.answers ? this.detail.answers.length : false
    },
    style() {
      return { width: this.width + 'px' }
    }
  },
  created() {
    this.updateList()
  },
  mounted() {
    const resizeObserver = new window.ResizeObserver(entries => {
      for (const entry of entries) {
        this.width = entry.contentRect.width
      }
    })
    resizeObserver.observe(document.querySelector('.discuss-detail'))
  },
  methods: {
    // 点赞
    toggleLike() {
      const params = {
        question_id: this.detail.id,
        semester_id: this.detail.semester_id
      }
      if (this.detail.tag && this.detail.tag.id) {
        // 取消点赞
        api.unlike(this.detail.tag.id).then(json => {
          this.updateList()
        })
      } else {
        // 点赞
        api.like(params).then(res => {
          this.updateList()
        })
      }
    },
    // 更新列表
    updateList() {
      api.getDiscussDetail(this.paramId.id).then(data => {
        this.detail = data
      })
    },
    // 删除问题
    handleRemove() {
      api.deleteDiscuss(this.paramId.id).then(json => {
        this.$message({ type: 'success', message: this.$t('DiscussModule.DiscussDetail.deleteSuccess') })
        /* 返回上一级 菜单 */
        setTimeout(() => {
          this.$router.go(-1)
        }, 1000)
      })
    },
    // 发布回答
    handlePublis() {
      if (!this.publishText) {
        return this.$message.error('请输入内容')
      }
      const params = {
        question_id: this.detail.id,
        semester_id: this.detail.semester_id,
        contents: this.publishText
      }
      api.answerQues(params).then(res => {
        this.updateList()
        this.publishText = ''
      })
    }
  }
}
</script>

<style lang="scss">
.discuss-detail {
  padding-bottom: 100px;
  .user {
    display: flex;
    align-items: center;
    padding: 10px 0;
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }
    .user-content {
      flex: 1;
      .user-name {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
      }
      .user-publishtime {
        font-size: 12px;
        color: #999;
      }
    }
  }
  .tools {
    display: flex;
    padding-top: 10px;
    .right-txt {
      color: #a27c1b;
      cursor: pointer;
    }
    .right-txt + .right-txt {
      margin-left: 24px;
    }
  }
}
.discuss-question {
  padding: 20px;
  background-color: #fff;
  .title {
    margin-top: 12px;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
    color: #121212;
  }
}
.discuss-answer {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  .no-data {
    padding: 1rem 0;
    font-size: 0.24rem;
    color: #c9c9c9;
    text-align: center;
  }
}
.discuss-answer-hd {
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  border-bottom: 1px solid #f6f6f6;
}
.discuss-publish-fixed {
  position: fixed;
  bottom: 0;
  padding: 20px;
  background: #fff;
  z-index: 2;
  box-sizing: border-box;
  box-shadow: 0 -1px 8px rgb(18 18 18 / 10%);
}
.discuss-publish {
  display: flex;
}
.discuss-publish-textarea {
  width: 100%;
  outline: none;
  margin-right: 20px;
  flex: 1;
}
</style>
