<template>
  <div class="course-box">
    <news :data="newsData"></news>
  </div>
</template>
<script>
import cAction from '@action'
import news from '@/components/news/news.vue'
export default {
  components: {
    news
  },
  data() {
    return {
      newsData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const requestType = [
        {
          name: '先导课',
          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
        },
        {
          name: '核心课',
          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
        },
        {
          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) {
      cAction.reportAction.getContent(item.name).then(json => {
        this.newsData.push({
          id: index,
          title: item.name,
          content: json === null ? '' : json[0].content,
          image: item.image
        })
        this.newsData = this.newsData.sort((a, b) => a.id - b.id)
      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.course-box {
  padding: 32px 0 60px;
  display: flex;
  .cont-left {
    .m1 {
      padding: 40px 20px;
      width: 308px;
      background: #ffeef1;
      .title {
        font-size: 23px;
        font-weight: bold;
        color: #bf0927;
        line-height: 32px;
      }
      .p {
        font-size: 14px;
        color: #000000;
        line-height: 20px;
        margin-top: 20px;
      }
    }
    .m2 {
      width: 308px;
      height: 292px;
      background: url(@/assets/img/recruitInfo/setcou-m1-bg.png);
      background-size: 100% 100%;
      margin-top: 10px;
      .title {
        font-size: 23px;
        font-weight: bold;
        color: #ffffff;
        line-height: 32px;
        padding-top: 40px;
        margin-left: 20px;
      }
      .p {
        padding: 20px 20px 0;
        font-weight: bold;
        color: #ffffff;
        line-height: 32px;
      }
    }
  }
  .cont-center {
    margin-left: 30px;
    .title {
      width: 100%;
      text-align: center;
      font-size: 23px;
      font-weight: bold;
      color: #bf0927;
      line-height: 32px;
    }
    .cen-mian {
      display: flex;
      padding-top: 30px;
      .item {
        border-left: 1px solid #ccc;
        padding-left: 20px;
        margin-bottom: 20px;
        max-width: 180px;
        &.marle {
          margin-left: 30px;
        }
        .title {
          text-align: left;
          font-size: 14px;
          font-weight: bold;
          color: #222222;
          line-height: 20px;
          margin-bottom: 5px;
        }
        p {
          font-size: 14px;
          color: #222222;
          line-height: 16px;
          margin: 7px 0;
          &.weight {
            font-weight: bold;
            margin-top: 10px;
          }
        }
      }
    }
  }
  .cont-right {
    margin-left: auto;
    .title {
      font-size: 23px;
      font-weight: bold;
      color: #bf0927;
      line-height: 32px;
    }
    p {
      width: 210px;
      font-size: 14px;
      color: #222222;
      line-height: 32px;
      margin-top: 10px;
    }
  }
}
</style>
