<template>
  <div>
    <banner-tab :data="bannerTabData" @changeTab="changeTab"></banner-tab>
    <div class="cont-mian center97">
      <div class="module" v-if="activeIndex == 0">
        <news :data="newsData"></news>
      </div>
      <div class="module" v-if="activeIndex === 1">
        <list :data="listData[1]"></list>
        <div class="no-data" v-if="!listData[1].length">暂无数据</div>
      </div>
      <div class="module" v-if="activeIndex === 2">
        <list :data="listData[2]"></list>
        <div class="no-data" v-if="!listData[2].length">暂无数据</div>
      </div>
      <div class="module" v-if="activeIndex === 3">
        <list :data="listData[3]"></list>
        <div class="no-data" v-if="!listData[3].length">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import news from '@/components/news/news.vue'
import bannerTab from '@/components/news/tab/bannerTab.vue'
import list from '@/components/news/newsList.vue'
import cAction from '@action'
export default {
  components: {
    bannerTab,
    news,
    list
  },
  data() {
    return {
      listData: {
        1: [],
        2: [],
        3: []
      },
      bannerTabData: {
        menu: ['项目介绍', '宣传片', '教授采访', '学生风采'],
        imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/24c97bb61b77949b415adcb06c7e43b1.png'
      },
      newsData: [],
      activeIndex: 0,
      tabMenu: ['宣讲会实录', '项目介绍'],
      childActiveIndex: 0,
      requestParam: {
        page: 1,
        per_page: 100,
        type: 52,
        project_id: 1011
      }
    }
  },
  methods: {
    changeTab(index) {
      const key = {
        1: 52,
        2: 53,
        3: 54
      }
      if (index) {
        this.requestParam.type = key[index]
        this.requestList(index)
      }
      this.activeIndex = index
    },
    changeChildTab(index) {
      this.childActiveIndex = index
    },
    getData() {
      const requestType = [
        {
          name: '宣讲会实录',
          image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
        },
        {
          name: '项目介绍',
          image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.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(() => {})
    },
    requestList(n) {
      cAction.reportAction
        .getNews(this.requestParam)
        .then(json => {
          if (Array.isArray(json)) {
            json.length && (this.listData[n] = json)
          }
        })
        .catch(e => {
          this.$message.error(e.message)
        })
        .finally(() => {})
    }
  },
  mounted() {
    this.getData()
    // this.request(50)
  }
}
</script>
<style lang="scss" scoped>
.no-data {
  width: 100%;
  text-align: center;
  color: #999;
  font-size: 26px;
}
.cont-mian {
  .module {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 60px;
    display: flex;
    .left-txt {
      // width: 670px;
    }
    img {
      margin-left: auto;
      // display: block;
      width: 235px;
      height: 300px;
    }
    &.wid {
      width: 100%;
    }
  }
}
.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>
