<template>
  <scroll-view
    v-if="articleList.length"
    scroll-y="true"
    @scrolltolower="getListData"
    class="teach-class-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>
    <!-- 文章列表 -->
    <article-item
      v-for="(articleInfo, key) in articleList"
      :key="key"
      isBrief="true"
      :articleInfo="articleInfo"></article-item>
  </scroll-view>
</template>

<script>

import titleMore from '@/components/titleMore'
import menuDoctor from '@/components/menuDoctor'
import articleItem from '@/components/articleItem'

import { articleTypeList, getDoctorList } from '@/utils/api'
export default {
  components: {
    titleMore,
    menuDoctor,
    articleItem
  },
  data () {
    return {
      page: 1,
      limit: 10,
      nomore: false,
      type: 'PARENTING_COURSES',
      articleList: [],
      doctorList: []
    }
  },

  mounted () {
    this.init()
  },

  methods: {
    async init () {
      wx.showLoading({
        title: '加载中'
      })
      this.doctorList = (await getDoctorList('WITHOUT_ARTICLE')).data
      wx.hideLoading()
      this.getListData()
    },
    async getListData () {
      if (this.nomore) {
        return false
      }
      wx.showLoading({
        title: '加载中'
      })
      let res = await articleTypeList(this.type, null, this.page, this.limit)

      this.articleList = this.articleList.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';
.teach-class-box{
  .scroll-box();
  padding: 0 0 @spacing;
  @{deep} .title-box{
    margin: 0 @spacing  @spacing/2;
  }
  @{deep} .doctor-list{
    margin: 0 0  @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>
