<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">
      <discuss :params="params">
      </discuss>
      <!-- <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>
      </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'
      // }],
      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 // 偏移量（未考虑传输时，产生新问题情况）
      },
      params: {
        path: '/my',
        request: 'getDiscussList',
        dataJson: {
          limit: 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
        }
      }
      this.params.path = pathUrl
      // 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 cid = e.currentTarget.dataset.cid
      this.$router.push({ path: `/app/learn/discuss-detail/${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>
