<template>
  <div>
    <template v-for='(item, index) in discussList'>
      <div v-bind:key='index' class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.semester_id' :data-cid='item.relate_id' :data-index='index'>
        <div class='user'>
          <template v-if="item.questioner.avatar">
            <img class='img' :src='item.questioner.avatar' />
          </template>
          <template v-else>
            <img class='img' src='../assets/images/person-default.jpg' />
          </template>
          <div class='right'>
            <div class='name'>{{item.questioner.nickname}}</div>
            <div class='time'>{{item.created_time}}</div>
          </div>
        </div>
        <div class='title'>{{item.title}}</div>
        <div :class='["text"]' v-html="item.contents"></div>
        <!-- <div :class='["text"]' v-html="item.contents"></div><div class='["ellipsis no", (item.isShow ? "on" : "")]'>....</div> -->
        <div class='result'>{{item.answer_count}} {{ $t('DiscussModule.DiscussList.answers') }}<div style='display: inline-block; width: 20px;'></div>{{item.tag_total_count}} {{ $t('DiscussModule.DiscussList.votes') }}</div>
        <!-- <div class='course-name'>{{item.courseName}}</div> -->
      </div>
    </template>
    <template v-if='!discussList.length'>
      <div class='no-data'>{{ $t('DiscussModule.DiscussList.noData') }}</div>
    </template>
  </div>
</template>

<script>
/**
 * 调用：通过组件传值监听watch来请求渲染
 *
params: {
  path: '/my', 地址参数
  request: 'getDiscussList', 请求方法
  dataJson: {  参数
    limit: 10,
    offset: 0
  }
}
*/

import * as api from '../api/index'

export default {
  name: 'Discuss',
  components: { },
  data () {
    return {
      discussList: [
      ]
    }
  },
  props: {
    params: {
      type: Object,
      required: false,
      default () {
        return {}
      }
    }
  },
  mounted () {
    this.loadAjax()
  },
  methods: {
    loadAjax () {
      // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      api[this.params.request](this.params)
        .then(json => {
          this.discussList = json
        })
        .catch(e => { this.$message.error(e.message) }).finally(() => { /* loading.close() */ })
    },
    /**
     * 跳转到对应 问题详情页
     */
    goDiscussDetail (e) {
      const qid = e.currentTarget.dataset.id
      const sid = e.currentTarget.dataset.sid
      const cid = e.currentTarget.dataset.cid
      this.$router.push({ path: `/app/learn/discuss-detail/${sid}/${cid}/${qid}` })
    }
  },
  watch: {
    params: {
      handler () {
        this.loadAjax()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.item-list:first-child { margin-top: 0.42rem; }
.item-list {border-radius: 5px; position: relative; padding: 0.3rem 0.26rem; margin-bottom: 0.3rem; background: #fff; box-shadow: 0 0 10px rgba(204, 204, 204, 0.4); cursor: pointer; }
.item-list .user { position: relative; overflow: hidden; }
.item-list .user .img { float: left; width: 0.6rem; height: 0.6rem; background: #e5e5e5; border-radius: 50%; }
.item-list .user .right { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.item-list .user .right .name { font-size: 0.18rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; }
.item-list .user .right .time { margin-top: 0.05rem; font-size: 0.16rem; color: #a0a0a0; }
.item-list .title { margin: 0.15rem 0; font-size: 0.22rem; color: #313131; font-weight: 700; line-height: 1.5; text-align: justify; }
.item-list .text { font-size: 0.18rem; color: #535353; line-height: 1.5; text-align: justify; /* display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; */ word-break:break-all; overflow: hidden; }
.item-list .ellipsis { display: none; position: absolute; right: 0.24rem; bottom: 0.68rem; padding: 0 0.15rem 0 0.05rem; color: #535353; background: #fff; font-size: 0.18rem; }
.item-list .ellipsis.on { display: block; }
.item-list .result { margin-top: 0.15rem; font-size: 0.16rem; color: #313131; }
.item-list .course-name { position: absolute; right: 0.32rem; bottom: 0.28rem; font-size: 0.16rem; color: #b49441; }
.no-data { font-size: 0.24rem; color: #112c42; line-height: 1rem; text-align: center; }
</style>
