<template>
  <scroll-view
    scroll-y="true"
    @scrolltolower="getListData"
    @scroll="getScrollTop"
    class="expert-say-box scroll-box">
    <!-- 优质医生 -->
    <title-more
      url="/pages/doctorList/main"
      title="优质医生"
      moreText="更多"></title-more>

    <div class="title-bg">
      <img src="../../assets/images/title_bg.png" mode="heightFix">
      <span class="text">天然博士宝宝营养关爱行动</span>
    </div>

    <menu-doctor
      v-if="doctorList.length"
      :doctorList="doctorList"></menu-doctor>

    <!-- 分类 -->
    <div id="scroll-sign"></div>
    <menu-type
      v-if="menuType.length"
      :isFixed="isFixed"
      :menuType="menuType"
      @changeType="changeType"></menu-type>
    <!-- 视频列表 -->
    <media-item
      v-for="(mediaInfo, key) in videoList"
      :key="key"
      :mediaInfo="mediaInfo"></media-item>
  </scroll-view>
</template>

<script>

import titleMore from '@/components/titleMore'
import menuDoctor from '@/components/menuDoctor'
import menuType from '@/components/menuType'
import mediaItem from '@/components/mediaItem'

import { tagList, getDoctorList, articleTypeList } from '@/utils/api'
export default {
  components: {
    titleMore,
    menuDoctor,
    menuType,
    mediaItem
  },
  data () {
    return {
      typeId: '',
      scrollTop: 0,
      type: 'EXPERTS_SAY',
      doctorList: [],
      menuType: [],
      page: 1,
      limit: 10,
      nomore: false,
      videoList: [],
      // 是否固定分类位置
      isFixed: false
    }
  },

  mounted () {
    // 初始化数据
    this.init()
  },

  methods: {
    // 初始化
    async init () {
      wx.showLoading({
        title: '加载中'
      })

      this.doctorList = (await getDoctorList('WITHOUT_ARTICLE')).data
      this.menuType = await tagList(this.type)
      this.changeType('')
      wx.hideLoading()
    },
    // 切换标签
    changeType (typeId) {
      this.typeId = typeId
      this.page = 1
      this.nomore = false
      this.videoList = []
      this.getListData()
    },
    // 获取分页数据
    async getListData () {
      if (this.nomore) {
        return false
      }
      wx.showLoading({
        title: '加载中'
      })
      let res = await articleTypeList(this.type, this.typeId, 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()
    },
    // 滚动触发函数 比较标记点位置
    getScrollTop () {
      wx.createSelectorQuery().select('#scroll-sign').boundingClientRect(res => {
        this.isFixed = res.top <= 0
      }).exec()
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/less/common.less';
.expert-say-box{
  .scroll-box();
  @{deep} .title-box{
    margin: 0 @spacing  @spacing/2;
  }
  .title-bg{
    position: relative;
    margin: 0 @spacing @spacing/2;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: @themeColor;
    img{
      position: absolute;
      left: 0;
      top: 0;
      width: auto;
      height: 100%;
    }
    .text{
      position: absolute;
      left: 0;
      top: 0;
      padding: 0 12px;
    }
  }
}
</style>
