<!--
  Copyright (c) 2020.
  author: song
  email: 15235360226@163.com
  -->

<template>
  <div class="pa-10 white" v-if="teachers && teachers.length > 0">
    <div :key="teacher.categoryId" class="mb-4" v-for="teacher in teachers">
      <p class="font-bold-20 title-color">{{ teacher.categoryName }}</p>
      <div class="d-flex flex-wrap mb-10" v-if="teacher.services && teacher.services.length">
        <div
          :class="(index + 1) % 4 === 0 ? 'teacher-box1' : ''"
          :key="index"
          class="teacher-box font-24 mb-3"
          v-for="(item, index) in teacher.services"
        >
          <div :class="index === 0 ? 'teacher-item-active' : ''" class="teacher-item font-24 mb-3">
            <div class="font-26 teacher-title mb-5">{{ item.name }}</div>
            <div class="font-14 teacher-txt">
              会组成按理事会章程执行，经理
              层设总经理 1 名、会组成按理事
              会章程执行，经理层设总经理 1
              名导师。
            </div>
            <div class="d-flex flex-row justify-center py-5">
              <span></span>
            </div>
            <div class="d-flex flex-row justify-center">
              <img src="~assets/teacher01.png" v-if="index === 0" />
              <img src="~assets/teacher02.png" v-else />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import { selTeacher } from 'config/api';

export default {
  name: 'Tutor',
  data() {
    return {
      title: '孵化平台-创业导师',
      showPage: 44,
      arr: [
        { name: '孵化平台', url: '/IncubationPlatform/MakerSpace' },
        { name: '创业导师', url: '' },
      ],
      teachers: [],
    };
  },

  created() {
    this.handleTeacher();
  },

  methods: {
    // 查询 导师
    async handleTeacher() {
      try {
        const res = await selTeacher();
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.teachers = data;
          for (let i = 0; i < this.teachers.length; i++) {
            const element = this.teachers[i];
            for (let j = 0; j < element.services.length; j++) {
              for (let k = 0; k < element.services.length - j; k++) {
                if (element.services[k].order > element.services[k + 1].order) {
                  let a = {};
                  a = element.services[k + 1].order;
                  element.services[k + 1].order = element.services[k].order;
                  element.services[k].order = a;
                }
              }
            }
          }
        } else {
          this.$message.error(msg);
        }
      } catch (error) {
        this.$message.error(error);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.teacher-box {
  width: 22%;
  margin-right: 4%;
}

.teacher-box1 {
  margin-right: 0;
}

.teacher-item {
  width: 100%;
  padding: 24px 12px 30px;
  background: #f8f8f8;
  color: rgba(80, 80, 80, 0.7);
  text-align: center;

  .teacher-title {
    text-align: center;
    color: rgba(80, 80, 80, 0.4);
  }

  .teacher-txt {
    text-align: justify;
    height: 105px;
    overflow: hidden;
  }

  span {
    display: inline-block;
    width: 28px;
    height: 3px;
    background: #E77816;
  }
}

.teacher-item-active {
  background: #E77816;
  color: #fff;

  .teacher-title {
    color: #fff;
  }

  span {
    background: #fff;
  }
}
</style>
