<template>
<div>
  <div class="con-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/img/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}} 回答<div style='display: inline-block; width: 20px;'></div>{{item.TouCnt}} 投票</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 '@actions'

export default {
  components: { },
  data () {
    return {
      tabs: [{
        title: '我提出的问题',
        isShow: true,
        path: '/my'
      }, {
        title: '我参与的问题',
        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 () {
      let elems = document.querySelectorAll('.ellipsis')
      let fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line
      elems.forEach((_, i) => {
        _.previousSibling.style.height = 'auto'
        let height = _.previousSibling.offsetHeight
        let 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.discussAction.getDiscussList(pathUrl, this.param).then(json => {
        this.discussList = json
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    /**
     * 切换 - tab
     */
    tabSelect (e) {
      let index = e.currentTarget.dataset.index
      let 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) {
      let qid = e.currentTarget.dataset.id
      let sid = e.currentTarget.dataset.sid
      let cid = e.currentTarget.dataset.cid
      this.$router.push({ path: `/app/my-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>
