<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
              }}<el-button round plain type="primary" size="mini" v-if="item.is_teacher">教务老师</el-button>
            </div>
            <div class="time">{{ item.created_time }}</div>
          </div>
          <div class="is-top" v-if="item.is_top === 1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon icon-tabler icon-tabler-arrow-bar-to-up"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <line x1="12" y1="10" x2="12" y2="20"></line>
              <line x1="12" y1="10" x2="16" y2="14"></line>
              <line x1="12" y1="10" x2="8" y2="14"></line>
              <line x1="4" y1="4" x2="20" y2="4"></line>
            </svg>
            置顶
          </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>
    <div style="text-align:center;padding:40px;" v-if="!noMore">
      <el-button :loading="loading" @click="load">{{ loading ? '加载中' : '加载更多' }}</el-button>
    </div>
    <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',
  props: {
    params: {
      type: Object,
      required: false,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      noMore: false,
      discussList: []
    }
  },
  computed: {
    disabled() {
      return this.loading || this.noMore
    }
  },
  mounted() {
    this.loadAjax()
  },
  methods: {
    load() {
      this.params.dataJson.offset += this.params.dataJson.limit
      // this.loadAjax()
    },
    loadAjax() {
      this.loading = true
      api[this.params.request](this.params)
        .then(json => {
          if (json.length < this.params.dataJson.limit) {
            this.noMore = true
          }
          this.discussList = this.discussList.concat(json)
        })
        .catch(e => {
          this.$message.error(e.message)
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 跳转到对应 问题详情页
     */
    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 {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  .is-top {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    svg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
      margin-right: 5px;
    }
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    background-color: #e5e5e5;
    border-radius: 12px;
  }
}
.item-list .user .img {
  width: 0.6rem;
  height: 0.6rem;
  background: #e5e5e5;
  border-radius: 50%;
}
.item-list .user .right {
  flex: 1;
  margin-left: 0.12rem;
}
.item-list .user .right .name {
  display: flex;
  align-items: center;
  font-size: 0.18rem;
  color: #313131;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  .el-button {
    margin-left: 10px;
  }
}
.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>
