<template>
  <scroll-view
    v-if="articleInfo"
    scroll-y="true"
    @scrolltolower="getListData"
    class="teach-class-detail-box scroll-box">
    <!-- 标题 -->
    <div class="title">{{articleInfo.title}}</div>

    <!-- 头像 姓名 职位标签-->
    <div class="header-box clearfix">
      <div class="img fl">
        <img :src="baseUrl+articleInfo.doctor.headUrl" mode="widthFix">
      </div>
      <div class="info">
        <div class="name">
          <span>{{articleInfo.doctor.name}}</span>
          <span class="vip" v-if="articleInfo.isVip"></span>
        </div>
        <div class="label">
          <span>{{articleInfo.doctor.hospital}}</span>
          <span>{{articleInfo.doctor.dept}}</span>
        </div>
      </div>
    </div>

    <!-- 文章内容 -->
    <div class="article-content">
      <div v-html="articleInfo.contentText"></div>
    </div>
    <div class="count-box clearfix">
      <!-- 收藏 -->
      <div class="count-item collect fr" :class="{'active': articleInfo.isCollect}" @click.stop="collect">
        <div class="text">{{articleInfo.collectNum}}人</div>
      </div>
      <!-- 浏览 -->
      <div class="count-item watch fr">
        <div class="text">{{articleInfo.playNum || 0}}人</div>
      </div>
      <!-- 来源 -->
      <div class="count-item source fl">
        <!-- <div class="text">内容来源xxxxxxxx</div> -->
      </div>
    </div>

    <!-- 选项卡 -->
    <tab-box
      :id="articleInfo.id"
      :articleList="articleList"
      :commentList="commentList"
      :questionList="articleInfo.questionAndAnswer"
      @change="change"
      @updataComment="updataComment"></tab-box>
  </scroll-view>
</template>

<script>
import tabBox from '@/components/tabBox'

import { baseUrl } from '@/utils/http'
import { articleDetail, articleCollect, articleRecommend, getComment } from '@/utils/api'

export default {
  components: {
    tabBox
  },
  data () {
    return {
      id: '',
      baseUrl: baseUrl,
      articleInfo: null,
      articleList: [],
      commentList: [],
      isCommen: true,
      page: 1,
      limit: 10,
      nomore: false
    }
  },

  mounted () {
    this.id = this.$root.$mp.query.id || '727921588816576512'
    this.reset()
    this.getDetail()
  },

  methods: {
    // 初始化页面状态
    reset () {
      this.articleInfo = null
      this.articleList = []
      this.commentList = []
      this.isCommen = true
      this.page = 1
      this.nomore = false
    },
    // 获取详情数据
    async getDetail () {
      wx.showLoading({
        title: '加载中'
      })
      this.articleInfo = await articleDetail(this.id)
      this.articleList = await articleRecommend(this.id)
      wx.hideLoading()

      this.getListData()
    },

    // 发布评论后更新
    updataComment () {
      this.nomore = false
      this.page = 1
      this.commentList = []
      this.getListData()
    },

    // 获取评论分页数据
    async getListData () {
      if (this.nomore || !this.isCommen) {
        return false
      }
      wx.showLoading({
        title: '加载中'
      })

      let res = await getComment(this.id, this.page, this.limit)

      this.commentList = this.commentList.concat(res.data)
      if (res.total <= this.page * this.limit) {
        this.nomore = true
      } else {
        this.page++
      }
      wx.hideLoading()
    },

    // 收藏
    async collect () {
      let {id, isCollect, collectNum} = this.articleInfo

      await articleCollect(id)
      this.articleInfo.collectNum = isCollect ? collectNum - 1 : collectNum + 1
      this.articleInfo.isCollect = !isCollect
    },

    // 切换 tabBox
    change (isCommen) {
      this.isCommen = isCommen
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.teach-class-detail-box{
  padding-top: @spacing;
  .scroll-box();
  .title{
    padding: 0 @spacing 16px;
    font-size: 16px;
    font-weight: 500;
  }
  .header-box{
    margin: 0 @spacing 20px;
    .header-box();
  }
  .article-content{
    margin: 0 @spacing 14px;
    p{
      line-height: 26px;
      text-indent: 2em;
      color: #000;
    }
  }
  .count-box{
    margin: 0 @spacing 34px;
    .count-box();
  }
}
</style>
