<template>
  <div>
    <banner-tab :data="bannerTabData" @changeTab="changeTab"></banner-tab>
    <div class="cont-mian center97">
      <div class="module" v-if="activeIndex == 0">
        <div class="left-txt" v-html="content"></div>
        <img
          src="https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png"
          alt=""
          class="exh"
        />
      </div>
      <div class="module" v-if="activeIndex == 1">
        <div>
          <div class="video-box">
            <div class="text-cont">
              为给紫荆的校友提供更好的服务，使校友之间的联络更加紧密、促进校友和紫荆的共同发展，紫荆教育特成立紫荆校友办，期望帮助校友建立广阔交流的人脉网络和校友平台。紫荆校友办是为校友提供服务的窗口和平台。校友办始终以服务校友为使命，通过组织形式多样的校友活动、搭建便捷高效的交流平台、传播校友的同学情谊以及向校友提供教育服务等渠道。
            </div>
            <div class="videos">
              <video
                width="420"
                controls
                src="https://zws-imgs-pub.ezijing.com/static/public/03b97bb9367b4bdd8f03244d317ef183.mp4"
              ></video>
            </div>
          </div>
          <div class="list-box">
            <list :data="M1listData"></list>
          </div>
        </div>
      </div>
      <div class="module" v-if="activeIndex == 2">
        <ul class="list-fc">
          <template v-for="(item, index) in M2listData">
            <li :key="index" @click="goPage(item.source)">{{ item.title }}</li>
          </template>
        </ul>
        <img
          src="https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png"
          alt=""
          class="exh"
        />
      </div>
    </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/0390956f08b4f3f080171397f2238a12.png'
      },
      activeIndex: 0,
      tabMenu: ['好书推荐', '校友手册', '校友卡申领', '终身邮箱'],
      content: '',
      requestParam: {
        page: 1,
        per_page: 100,
        type: 59,
        project_id: 1011
      },
      M1listData: [],
      M2listData: []
    }
  },
  mounted() {
    this.getData()
    this.getM1List()
    this.getM2List()
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index
    },
    changeChildTab(index) {
      // this.tabShowItem = index
    },
    getData() {
      cAction.reportAction
        .getContent('校友会')
        .then(json => {
          if (json !== null) {
            this.content = json[0].content
          }
        })
        .catch(e => {
          this.$message.error(e.message)
        })
        .finally(() => {})
    },
    getM1List() {
      this.requestParam.type = 59
      cAction.reportAction
        .getNews(this.requestParam)
        .then(json => {
          this.M1listData = json
        })
        .catch(e => {
          this.$message.error(e.message)
        })
        .finally(() => {})
    },
    getM2List() {
      this.requestParam.type = 60
      cAction.reportAction
        .getNews(this.requestParam)
        .then(json => {
          this.M2listData = json
        })
        .catch(e => {
          this.$message.error(e.message)
        })
        .finally(() => {})
    },
    goPage(url) {
      window.open(url)
    }
  }
}
</script>
<style lang="scss" scoped>
.list-box {
  // padding-top: 40px;
  margin-top: 40px;
  ::v-deep {
    ul {
      &:nth-child(1) {
        padding-top: 40px;
        border-top: 1px solid #ccc !important;
      }
    }
  }
}
.cont-mian {
  .module {
    padding-top: 30px;
    padding-bottom: 60px;
    display: flex;
    .left-txt {
      width: 670px;
    }
    .exh {
      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 {
      cursor: pointer;
      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;
      }
    }
  }
}
.video-box {
  width: 100%;
  display: flex;
  // padding-top: 30px;
  .text-cont {
    width: 478px;
    font-size: 14px;
    color: #000000;
    line-height: 30px;
  }
  .videos {
    margin-left: auto;
  }
}
.list-fc {
  li {
    cursor: pointer;
    width: 673px;
    line-height: 82px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    font-weight: bold;
    color: #222222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.child-tab {
  width: 100%;
}
</style>
