<template>
  <div>
    <div class="center97 apply-mian">
      <news :data="newsData" :defaultPage="defaultPage">
        <div class="apply-btn" slot="imgBtn">
          <div class="icon"></div>
          <div class="txt" @click="goPage">项目申请</div>
        </div>
      </news>
    </div>
  </div>
</template>
<script>
import cAction from '@action'
import news from '@/components/news/news.vue'
export default {
  components: {
    news
  },
  data() {
    return {
      newsData: [],
      tabShowItem: 0,
      defaultPage: 0
    }
  },
  mounted() {
    this.getData()
    this.$route.query.type && (this.defaultPage = parseInt(this.$route.query.type))
  },
  methods: {
    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: 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(() => {})
    },
    goPage() {
      this.$router.push({
        path: '/my'
      })
    },
    changeChildTab(index) {
      this.tabShowItem = index
    }
  }
}
</script>
<style lang="scss" scoped>
.center97{
  width: 970px;
  margin: 0 auto;
}
.apply-mian{
  padding-top: 30px;
  padding-bottom: 60px;
  display: flex;
  .apply-left{
    width: 670px;
    .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>
