<template>
  <scroll-view
    v-if="mediaInfo"
    scroll-y="true"
    @scrolltolower="getListData"
    class="expert-say-detail-box scroll-box">
    <div class="title">{{mediaInfo.title}}</div>
    <div class="count-box clearfix">
      <!-- 收藏 -->
      <div class="count-item collect fr" :class="{'active': mediaInfo.isCollect}" @click.stop="collect">
        <div class="text">{{mediaInfo.collectNum}}人</div>
      </div>
      <!-- 浏览 -->
      <div class="count-item watch fr">
        <div class="text">{{mediaInfo.playNum || 0}}人</div>
      </div>
    </div>
    <!-- 视频或者音频 -->
    <div class="media-box" :class="{'audio' : mediaInfo.contentType == 'audio'}">
      <mp-video
        v-if="mediaInfo.contentType == 'video'"
        :mediaInfo="mediaInfo"
        ></mp-video>
      <mp-audio
        v-if="mediaInfo.contentType == 'audio'"
        :mediaInfo="mediaInfo"></mp-audio>
    </div>
    <div class="count-box clearfix">
      <!-- 来源 -->
      <div class="count-item source fl">
        <!-- <div class="text">内容来源xxxxxxxx</div> -->
      </div>
    </div>
    <div class="detail-text" v-if="mediaInfo.contentType == 'video'">{{mediaInfo.videoText}}</div>
    <div class="detail-text" v-if="mediaInfo.contentType == 'audio'">{{mediaInfo.audioText}}</div>
    <!-- 头像 姓名 职位标签-->
    <div class="header-box clearfix">
      <div class="img fl">
        <img :src="baseUrl+mediaInfo.doctor.headUrl" mode="widthFix">
      </div>
      <div class="info">
        <div class="name">
          <span>{{mediaInfo.doctor.name}}</span>
          <span class="vip" v-if="mediaInfo.isVip"></span>
        </div>
        <div class="label">
          <span>{{mediaInfo.doctor.hospital}}</span>
          <span>{{mediaInfo.doctor.dept}}</span>
        </div>
      </div>
    </div>
    <div class="detail-text">{{mediaInfo.doctor.description}}</div>

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

<script>
import { baseUrl } from '@/utils/http'
import { articleDetail, articleCollect, getComment } from '@/utils/api'

import mpVideo from '@/components/mpVideo'
import mpAudio from '@/components/mpAudio'
import tabBox from '@/components/tabBox'

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

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

  methods: {
    // 初始化页面状态
    reset () {
      this.mediaInfo = null
      this.commentList = []
      this.isCommen = true
      this.page = 1
      this.nomore = false
    },
    // 获取详情数据
    async getDetail () {
      wx.showLoading({
        title: '加载中'
      })
      this.mediaInfo = await articleDetail(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.mediaInfo

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

    // 切换 tabBox
    change (isCommen) {
      this.isCommen = isCommen
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/less/common.less';
.expert-say-detail-box{
  padding-top: @spacing;
  .scroll-box();
  .title{
    padding: 0 @spacing 5px;
    font-size: 16px;
    font-weight: 500;
  }
  .count-box{
    margin: 0 @spacing 8px;
    .count-box();
  }
  .media-box{
    margin-bottom: 5px;
    &.audio{
      margin: 0 @spacing 5px;
    }
  }
  .detail-text{
    margin: 4px @spacing 25px;
    font-size: 12px;
    color: #999999;
  }
  .header-box{
    margin: 0 @spacing 5px;
    .header-box();
  }
}
</style>
