<template>
  <div class="content-max-width">
    <breadcrumb class="content-max-width crumb" :data="crumbData"/>
    <btn-tabs class="btn-tabs-box" @tabsChange="tabsChange" :data="btnTabsData"></btn-tabs>
    <template v-if="!tabsIndex">
      <screen-tabs class="screen-tabs-box" :data="screenTabsData"></screen-tabs>
      <div class="train-mian">
        <ul>
          <template v-for="(item, index) in list">
            <li :key="index">
              <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-else>
      <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'
export default {
  components: {
    btnTabs,
    screenTabs,
    item,
    noData,
    search,
    breadcrumb
  },
  data() {
    return {
      articleClassify: this.$store.state.classify,
      list: [],
      tabsIndex: 0,
      value3: '',
      btnTabsData: {
        options: ['会议报名', '核心专家']
      },
      screenTabsData: {
        name: '筛选：',
        options: ['全部', '正在进行', '未开始', '已结束']
      },
      pages: {},
      crumbData: [
        {
          path: '/',
          name: '首页'
        },
        {
          name: '师资培训'
        }
      ]
    }
  },
  mounted() {
    this.newsList()
  },
  methods: {
    tabsChange(i) {
      this.tabsIndex = i
    },
    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.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;
}
.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;
  }
}
</style>
