<template>
  <div>
    <banner-tab
      :data="bannerTabData"
      @changeTab="changeTab"
    ></banner-tab>
    <div class="pre-mian center97">
      <div class="list-box">
        <list :data="listData[0]" v-if="activeIndex == 0"></list>
        <list :data="listData[1]" v-if="activeIndex == 1"></list>
      </div>
      <img src="https://zws-imgs-pub.ezijing.com/static/public/d92feb882caacd44d18f05c996494f14.png" alt="">
    </div>
  </div>
</template>
<script>
import cAction from '@action'
import bannerTab from '@/components/news/tab/bannerTab.vue'
import list from '@/components/news/newsList.vue'
export default {
  components: {
    bannerTab,
    list
  },
  data() {
    return {
      bannerTabData: {
        menu: ['教授观点', '学生风采'],
        imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/b61c3355f53391b163a388d18d18aa62.png'
      },
      activeIndex: 0,
      requestParam: {
        page: 1,
        per_page: 100,
        type: 58,
        project_id: 1007
      },
      listData: {
        0: [],
        1: []
      }
    }
  },
  mounted() {
    this.request(0)
  },
  methods: {
    changeTab(index) {
      const key = {
        0: 58,
        1: 54
      }
      this.requestParam.type = key[index]
      this.request(index)
      this.activeIndex = index
    },
    request() {
      cAction.reportAction.getNews(this.requestParam).then(json => {
        if (Array.isArray(json)) {
          json.length && (this.listData[n] = json)
          console.log(this.listData)
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
    }
  },
}
</script>
<style lang="scss" scoped>
.list-box{
  width: 700px;
}
.pre-mian{
  padding: 30px 0 60px;
  display: flex;
  img{
    width: 235px;
    height: 300px;
    margin-left: auto;
  }
}
.cont-mian{
  .module{
    padding-top: 30px;
    padding-bottom: 60px;
    display: flex;
    .left-txt{
      width: 670px;
    }
    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;
      }
    }
  }
}
</style>
