<template>
  <div class="content-max-width">
    <!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
    <template>
      <div class="new-tits">师资培训报名</div>
      <screen-tabs
        class="screen-tabs-box"
        :activeIndex.sync="tabsIndex"
        :data="screenTabsData"
        @tabChange="HandleTabChange"
      ></screen-tabs>
      <div class="train-mian">
        <ul>
          <template v-for="(item, index) in tabsContentList">
            <li :key="index" v-if="tabsIndex === 0 || tabsIndex === item.activeIndex">
              <item :data="item"></item>
            </li>
          </template>
        </ul>
        <div class="calendar">
          <inlineCalendar mode="during"></inlineCalendar>
          <div class="btn-box">
            <div class="btn">确定</div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination :page-size="pages.page_size" layout="prev, pager, next, jumper" :total="pages.total">
        </el-pagination>
      </div>
    </template>
    <template v-if="false">
      <search />
      <noData />
    </template>
  </div>
</template>
<script>
import action from '@action'
import btnTabs from '@/components/tabs/btnTabs'
import screenTabs from '@/components/tabs/screenTabs'
import noData from '@/components/tabs/noData'
import item from './components/item'
import search from './components/search'
import breadcrumb from '@/components/breadcrumb'
import datalist from './data.js'
export default {
  components: {
    btnTabs,
    screenTabs,
    item,
    noData,
    search,
    breadcrumb
  },
  data() {
    return {
      articleClassify: this.$store.state.classify,
      list: [],
      tabsIndex: 1,
      tabsContentList: datalist,
      value3: '',
      btnTabsData: {
        options: ['会议报名', '核心专家']
      },
      screenTabsData: {
        name: '筛选：',
        options: ['全部', '正在进行', '未开始', '已结束']
      },
      pages: {},
      crumbData: [{ path: '/', name: '首页' }, { name: '师资培训' }]
    }
  },
  mounted() {
    // this.newsList()
  },
  methods: {
    HandleTabChange(index) {
      console.log(index)
      this.tabsIndex = index
    },
    newsList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)' //
      })
      if (!Object.keys(this.$store.state.classify).length) {
        setTimeout(() => {
          this.articleClassify = this.$store.state.classify
          this.newsList()
        }, 2000)
      } else {
        const findId = this.articleClassify[0].children.find(item => {
          return item.display_name === '会议报名'
        })
        action.articleAction.getArticle({ category_id: findId.id }).then(res => {
          this.list = res.data.list
          this.pages = res.data.pages
          loading.close()
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.crumb {
  padding-top: 24px;
}
.pagination {
  padding: 24px 0;
  display: flex;
  justify-content: center;
}
.content-max-width {
  width: 1112px;
  margin: 0 auto;
}
.btn-tabs-box {
  padding: 24px 0;
  justify-content: left;
}
.train-mian {
  display: flex;
  ul {
    width: 700px;
  }
  .calendar {
    width: 336px;
    height: 385px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
    margin-left: auto;
    .btn-box {
      width: 100%;
      border-top: 1px solid #eee;
      overflow: hidden;
      .btn {
        margin-top: 10px;
        width: 62px;
        height: 36px;
        background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
        border-radius: 4px;
        text-align: center;
        line-height: 36px;
        color: #fff;
        font-size: 14px;
        float: right;
        margin-right: 24px;
        cursor: pointer;
      }
    }
  }
}
::v-deep {
  .m-row {
    &::before {
      background-color: #fff !important;
    }
  }
  .m-week-header {
    background: #fff;
  }
  .m-calendar {
    .m-toolbar {
      height: 58px;
      background: #fff;
      border-bottom: 1px solid #eee;
      margin-bottom: 10px;
    }
  }
  .m-during {
    background: #c01540 !important;
  }
  .m-prev-btn {
    width: 11px !important;
    height: 18px !important;
    background-image: url(https://zws-imgs-pub.ezijing.com/static/public/8cc2155bd9f98ae7e50d64bf4bad9e6a.png) !important;
    background-size: 100% 100% !important;
  }
  .m-next-btn {
    width: 11px !important;
    height: 18px !important;
    background-image: url(https://zws-imgs-pub.ezijing.com/static/public/ef4abd96b29419b0eb182c291f802488.png) !important;
    background-size: 100% 100% !important;
  }
}
.new-tits {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #444444;
  line-height: 33px;
  margin-bottom: 16px;
  margin-top: 36px;
}
</style>
