<template>
  <div>
    <div class="center97 apply-mian">
      <div class="apply-left">
        <news :data="newsData">
          <div class="apply-btn" slot="imgBtn">
            <div class="icon"></div>
            <div class="txt" @click="goPage">项目申请</div>
          </div>
        </news>
        <!-- <div class="tab-item" v-if="tabShowItem == 2" v-html="data.module5"></div> -->
      </div>
    </div>
  </div>
</template>
<script>
import cAction from '@action'
import news from '@/components/news/news.vue'
export default {
  components: {
    news
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      newsData: [],
      tabMenu: ['学费', '贷款']
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    goPage() {
      this.$router.push({
        path: '/my'
      })
    },
    getData() {
      const requestType = [
        {
          name: '课程费用',
          image: 'https://zws-imgs-pub.ezijing.com/static/public/8f8ca631d86de4a189b8c111ea2af08a.png'
        },
        {
          name: '学员权益',
          image: 'https://zws-imgs-pub.ezijing.com/static/public/8f8ca631d86de4a189b8c111ea2af08a.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: Array.isArray(json) ?
            json.length === 0
              ? ''
              : json[0].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>
.center97{
  width: 970px;
  margin: 0 auto;
}
.apply-mian{
  padding-top: 30px;
  padding-bottom: 60px;
  display: flex;
  .apply-left{
    width: 100%;
    .tab-item{
      width: 100%;
      margin-top: 40px;
    }
  }
  .apply-right{
    margin-left: auto;
    .img-box{
      width: 235px;
      position: relative;
      margin-left: 13px;
      img{
        position: relative;
        z-index: 9;
        display: block;
        width: 100%;
        height: 300px;
      }
      .line{
        position: absolute;
        top: 35px;
        right: 35px;
        width: 213px;
        height: 280px;
        border: 1px solid #979797;
      }
    }
  }
}
.apply-btn{
  width: 248px;
  height: 48px;
  background: rgba(76, 129, 196, 1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 55px;
  cursor: pointer;
  .icon{
    width: 31px;
    height: 31px;
    background: url(@/assets/img/recruitInfo/m1-c1-icon1.png);
    background-size: 100% 100%;
  }
  .txt{
    font-size: 18px;
    color: #fff;
    margin-left: 20px;
  }
}
</style>
