<template>
  <div>
    <banner-tab
      :data="bannerTabData"
      @changeTab="changeTab"
    ></banner-tab>
    <div class="cont-mian center97">
      <set-course v-show="activeIndex == 0"></set-course>
      <div class="module" v-show="activeIndex == 1">
        <div class="left-txt">
          <news :data="newsData" @changeIndex="changeIndex">
            <div slot="list">
            </div>
          </news>
          <div class="tea-mian">
            <div class="list-box">
              <teaching-list v-show="teachingListIndex == 0" :data="this.allList[55]" :type="1"></teaching-list>
              <teaching-list v-show="teachingListIndex == 1" :data="this.allList[56]" :type="1"></teaching-list>
              <teaching-list v-show="teachingListIndex == 2" :data="this.allList[57]" :type="1"></teaching-list>
            </div>
            <img src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cAction from '@action'
import bannerTab from '@/components/news/tab/bannerTab.vue'
import news from '@/components/news/news.vue'
import teachingList from '@/components/news/teachingList.vue'
import setCourse from './components/setCourse.vue'
export default {
  components: {
    bannerTab,
    news,
    setCourse,
    teachingList
  },
  data() {
    return {
      bannerTabData: {
        menu: ['课程设置', '师资力量'],
        imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/03036d9b2460f3b182c929e4b3af0eb2.png'
      },
      activeIndex: 0,
      teachingListIndex: 0,
      requestParam: {
        page: 1,
        per_page: 100,
        type: 55,
        project_id: 1007
      },
      allList: {
        55: [],
        56: [],
        57: []
      },
      newsData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    changeIndex(index) {
      this.teachingListIndex = index
    },
    getData() {
      const requestType = [
        {
          type: 55,
          name: 'Kelley商学院金融硕士学术导师',
          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
        },
        {
          type: 56,
          name: '学界导师',
          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
        },
        {
          type: 57,
          name: '业界导师',
          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
        }
      ]
      requestType.map((item, index) => {
        this.request(item, index)
      })
    },
    request(item, index) {
      this.requestParam.type = item.type
      cAction.reportAction.getNews(this.requestParam).then(json => {
        this.newsData.push({
          typeId: item.type,
          type: 'list',
          id: index,
          title: item.name,
          content: '',
          image: item.image
        })
        this.teachingListSetData(item.type, json)
        // 针对 如果是多个 则进行数组排序
        if (this.newsData.length === 3) {
          this.newsData.sort((_, __) => {
            return _.typeId - __.typeId
          })
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
    },
    changeTab(index) {
      this.activeIndex = index
    },
    teachingListSetData(type, item) {
      this.allList[type] = item
    }
  },
}
</script>
<style lang="scss" scoped>
.cont-mian{
  .module{
    padding-top: 30px;
    padding-bottom: 60px;
    display: flex;
    .left-txt{
      width: 100%;
    }
    img{
      margin-left: auto;
      // display: block;
      width: 235px;
      height: 300px;
    }
  }
}
.center97{
  width: 970px;
  margin: 0 auto;
}
.top-nav{
  .center97{
    position: relative;
  }
  img{
    width: 100%;
    display: block;
  }
  .menu{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    li{
      width: 128px;
      line-height: 36px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      margin-right: 2px;
      cursor: pointer;
      background: #BF0927;
      &.active{
        background: #fff;
        color: #C70025;
      }
    }
  }
}
.tea-mian{
  display: flex;
  img{
    margin-left: auto;
    width: 235px;
    height: 300px;
  }
}
</style>
