<template>
  <div id="article">
    <van-tabs v-model="active" @click="tabChange">
      <van-tab title="特级导师"> </van-tab>
      <van-tab title="一级导师"> </van-tab>
      <van-tab title="二级导师"> </van-tab>
    </van-tabs>
    <div class="line"></div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getTeacherList">
      <!-- 3图文章内容的容器 1图添加class one-->
      <div v-for="(item, index) in TeacherList" class="teacher_item" :key="index">
        <img :src="item.teacherPhoto" alt="" />
        <div>
          <p class="name">
            {{ item.teacherName }}<span>{{ item.teacherIntroduction }}</span>
          </p>
          <p class="des">导师级别：{{ item.level }}</p>
          <p class="des">有效期至：{{ Moment(item.invalidTime).format('YYYY-MM-DD') }}</p>
          <p class="des">所在机构：{{ item.belongOrgan }}</p>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'Teacher',
  data() {
    return {
      id: '',
      active: 0,
      level: ['特级导师', '一级导师', '二级导师'],
      page: 1,
      loading: false,
      finished: false,
      TeacherList: [], //导师列表
    }
  },
  mounted() {
    // this.getTeacherList()
  },
  methods: {
    // 获取导师列表
    getTeacherList() {
      let that = this
      this.yxAxios
        .post(`${this.yanxueUrl}/StudyTeacher/List`, { level: this.level[this.active], pageIndex: this.page, pageSize: 10 })
        .then((res) => {
          if (res.data.status == 1) {
            let all = res.data.data.data
            this.page++
            this.TeacherList.push(...all)
            this.loading = false
            if (this.TeacherList.length >= res.data.data.count) {
              this.finished = true
            }
          } else {
            this.$toast.fail(res.data.message)
          }
        })
    },
    tabChange() {
      this.page = 1
      this.TeacherList = []
      this.getTeacherList()
      return true
    },
  },
}
</script>
<style lang="scss" scoped>
#article {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-left: 30px;
  box-sizing: border-box;
  .line {
    width: 704px;
    height: 2px;
    background: #f3f3f3;
    margin: 20px auto;
  }
  .teacher_item {
    width: 702px;
    padding: 12px;
    background: #fafafa;
    border-radius: 14px;
    box-sizing: border-box;
    margin: 14px 0;
    img {
      width: 156px;
      height: 220px;
      margin-right: 22px;
      vertical-align: top;
      border-radius: 8px;
    }
    div {
      display: inline-block;
      padding-top: 10px;
    }
    .name {
      font-size: 30px;
      color: #333;
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      span {
        font-size: 26px;
        color: #666;
        margin-left: 16px;
      }
    }
    .des {
      font-size: 26px;
      color: #666;
      margin-top: 12px;
      line-height: 36px;
    }
  }
}
</style>
<style lang="scss">
// 长辈版
.elder {
  #article .teacher_item .name,#article .teacher_item .name span,#article .teacher_item .des{
    font-size: 36px;
  }
  
}
</style>