<template>
<div>
  <div class="con-title">{{ $t('pages.learn.discussion.title') }}</div>
  <div class="con-box">
    <div class='tab-select'>
      <template v-for='(item, index) in tabs'>
        <div v-bind:key='index' :class='["item", (item.isShow ? "on" : "")]' @click='tabSelect' :data-index='index'>{{item.title}}</div>
      </template>
    </div>
    <div class="discuss-scroll">
      <template v-for='(item, index) in discussList'>
        <div v-bind:key='index' class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-cid='item.cid' :data-index='index'>
          <div class='user'>
            <template v-if="item.user.url">
              <img class='img' :src='item.user.url' />
            </template>
            <template v-else>
              <img class='img' src='../../assets/images/person-default.jpg' />
            </template>
            <div class='right'>
              <div class='name'>{{item.user.name}}</div>
              <div class='time'>{{item.user.time}}</div>
            </div>
          </div>
          <div class='title'>{{item.title}}</div>
          <div :class='["text"]' v-html="item.text"></div><div :class='["ellipsis", (item.isShow ? "on" : "")]'>....</div>
          <div class='result'>{{item.askCnt}} {{ $t('pages.learn.discussion.answers') }}<div style='display: inline-block; width: 20px;'></div>{{item.TouCnt}} {{ $t('pages.learn.discussion.votes') }}</div>
          <!-- <div class='course-name'>{{item.courseName}}</div> -->
        </div>
      </template>
      <template v-if='!discussList.length'>
        <div class='no-data'>暂无相关讨论</div>
      </template>
    </div>
  </div>
</div>
</template>

<script>
import cAction from '@action'

export default {
  components: { },
  data () {
    return {
      tabs: [{
        title: this.$t('pages.learn.discussion.tap1'),
        isShow: true,
        path: '/my'
      }, {
        title: this.$t('pages.learn.discussion.tap2'),
        isShow: false,
        path: '/involved'
      }],
      discussList: [
        // {
        //   user: {
        //     url: '',
        //     name: '用户名000',
        //     time: '2018-2-12 15:28:47'
        //   },
        //   title: '这是一个一句话问题这是一个一句话问题这是一个一句话问题标题这是一个一句话问题',
        //   text: '<p>王家有三兄弟甲、乙、丙，丙幼年时送给胡某作养子，丙结婚时，胡某为其盖了新房，后因失火致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己</p><p>发送到；发是否第三方sffdfdsfds</p>',
        //   askCnt: 20,
        //   TouCnt: 100,
        //   courseName: '在线学习课程',
        //   isShow: false
        // }
      ],
      param: {
        limit: 10, // 默认每页显示10条
        offset: 0 // 偏移量（未考虑传输时，产生新问题情况）
      }
    }
  },
  mounted () {
    this.loadAjax()
    window.addEventListener('resize', this.resizeRoot.bind(this), false)
  },
  destroyed () {
    window.removeEventListener('resize', this.resizeRoot.bind(this), false)
  },
  updated () {
    this.resizeRoot()
  },
  methods: {
    resizeRoot () {
      const elems = document.querySelectorAll('.ellipsis')
      let fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line
      elems.forEach((_, i) => {
        _.previousSibling.style.height = 'auto'
        const height = _.previousSibling.offsetHeight
        const realHeight = fs * 0.18 * 1.5 * 2
        if (height > realHeight) {
          this.discussList[i].isShow = true
          _.previousSibling.style.height = realHeight + 'px'
        } else {
          this.discussList[i].isShow = false
        }
      })
    },
    loadAjax () {
      let pathUrl = ''
      for (let i = 0; i < this.tabs.length; i++) {
        if (this.tabs[i].isShow) {
          pathUrl = this.tabs[i].path
        }
      }
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Discuss.getDiscussList(pathUrl, this.param).then(json => {
        this.discussList = json
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    /**
     * 切换 - tab
     */
    tabSelect (e) {
      const index = e.currentTarget.dataset.index
      const json = this.tabs
      for (let i = 0; i < json.length; i++) {
        json[i].isShow = false
      }
      json[index].isShow = true
      this.tabs = json
      this.param.offset = 0
      this.loadAjax()
    },
    /**
     * 跳转到对应 问题详情页
     */
    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}` })
    }
  }
}
</script>

<style lang="scss" scoped>

.tab-select { width: 100%; border-bottom: 1px solid #c9c9c9; overflow: hidden; background: #fff; }
.tab-select .item { float: left; padding: 0 0.3rem; font-size: 0.2rem; line-height: 2; color: #191919; text-align: center; box-sizing: border-box; cursor: pointer; }
.tab-select .item.on { border-bottom: 0.04rem solid #b49441; color: #b49441; }

// .discuss-scroll { }
.discuss-scroll .item-list:first-child { margin-top: 0.42rem; }
.discuss-scroll .item-list { position: relative; padding: 0.3rem 0.26rem; margin-bottom: 0.2rem; background: #fff; box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1); cursor: pointer; }
.discuss-scroll .item-list .user { position: relative; overflow: hidden; }
.discuss-scroll .item-list .user .img { float: left; width: 0.6rem; height: 0.6rem; background: #e5e5e5; border-radius: 50%; }
.discuss-scroll .item-list .user .right { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.discuss-scroll .item-list .user .right .name { font-size: 0.18rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; }
.discuss-scroll .item-list .user .right .time { margin-top: 0.05rem; font-size: 0.16rem; color: #a0a0a0; }
.discuss-scroll .item-list .title { margin: 0.15rem 0; font-size: 0.22rem; color: #313131; font-weight: 700; line-height: 1.5; text-align: justify; }
.discuss-scroll .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; }
.discuss-scroll .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; }
.discuss-scroll .item-list .ellipsis.on { display: block; }
.discuss-scroll .item-list .result { margin-top: 0.15rem; font-size: 0.16rem; color: #313131; }
.discuss-scroll .item-list .course-name { position: absolute; right: 0.32rem; bottom: 0.28rem; font-size: 0.16rem; color: #b49441; }
.discuss-scroll .no-data { font-size: 0.24rem; color: #112c42; line-height: 1rem; text-align: center; }
</style>
