<template>
  <div class="doctor-detail-box">
    <scroll-view
      scroll-y="true"
      @scrolltolower="getListData"
      class="scroll-box">
      <!-- 头像 姓名 职位标签-->
      <div class="header-box clearfix">
        <div class="img fl">
          <img :src="baseUrl + doctorData.headUrl" mode="widthFix">
        </div>
        <div class="info">
          <div class="name">
            <span>{{doctorData.name}}</span>
          </div>
          <div class="label">
            <span>{{doctorData.hospital}}</span>
            <span>{{doctorData.dept}}</span>
          </div>
        </div>
      </div>
      <div class="doctor-detail">{{doctorData.description}}</div>
      <div class="doctor-title">课程列表</div>
      <div
        v-for="(item, key) in videoList"
        :key="key">
        <article-item
          v-if="item.contentType == 'text'"
          :articleInfo="item"></article-item>

        <media-item
          v-else
          isHideInfo="true"
          :mediaInfo="item"></media-item>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/http'
import { doctorDetail, doctorArticle } from '@/utils/api'

import mediaItem from '@/components/mediaItem'
import articleItem from '@/components/articleItem'
export default {
  components: {
    mediaItem,
    articleItem
  },
  data () {
    return {
      id: '',
      baseUrl: baseUrl,
      page: 1,
      limit: 10,
      nomore: false,
      doctorData: {},
      videoList: []
    }
  },

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

  methods: {
    // 初始化页面状态
    reset () {
      this.nomore = false
      this.videoList = []
    },
    // 获取详情数据
    async getDetail () {
      wx.showLoading({
        title: '加载中'
      })
      this.doctorData = await doctorDetail(this.id)
      wx.hideLoading()
      this.getListData()
    },
    // 获取文章分页数据
    async getListData () {
      if (this.nomore) {
        return false
      }
      wx.showLoading({
        title: '加载中'
      })
      let res = await doctorArticle(this.id, this.page, this.limit)

      this.videoList = this.videoList.concat(res.data)
      if (res.total <= this.page * this.limit) {
        this.nomore = true
      } else {
        this.page++
      }
      wx.hideLoading()
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/less/common.less';
.doctor-detail-box{
  .scroll-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  overflow: hidden;
  .header-box{
    margin: 10px @spacing 8px;
    .header-box()
  }
  .doctor-detail{
    margin: 0 @spacing 20px;
    font-size: 12px;
    color: #999999;
  }
  .doctor-title{
    margin: 0 @spacing 14px;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
  }
}
</style>
