<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'
export default {
  components: {
    btnTabs,
    screenTabs,
    item,
    noData,
    search,
    breadcrumb
  },
  data() {
    return {
      articleClassify: this.$store.state.classify,
      list: [],
      tabsIndex: 1,
      tabsContentList: [
        {
          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
          title: '2022年第1期“1+X金融产品数字化营销职业技能等级证书(初级)”师资培训班',
          time: '01月11日-01月13日',
          count: 100,
          activeIndex: 1,
          id: '202201'
        },
        {
          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
          title: '2022年第2期“1+X金融产品数字化营销职业技能等级证书(中级)”师资培训班',
          time: '01月18日-01月20日',
          count: 100,
          activeIndex: 1,
          id: '202202'
        },
        {
          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
          title: '2022年第3期“1+X金融产品数字化营销职业技能等级证书(中级)”师资培训班',
          time: '待定',
          count: '待定',
          activeIndex: 2,
          id: '202202'
        },
        {
          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
          title: '2021年第1期“1+X金融产品数字化营销职业技能等级证书(中级)”师资培训班',
          time: '4月23日-4月25日',
          count: 100,
          activeIndex: 3,
          id: '1'
        },
        {
          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
          title: '2021年第2期“1+X金融产品数字化营销职业技能等级证书(中级)”师资培训班',
          time: '6月27日-6月30日',
          count: 100,
          activeIndex: 3,
          id: '2'
        },
        {
          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
          title: '2021年第3期“1+X金融产品数字化营销职业技能等级证书(中级)”师资培训班',
          time: '7月5日-7月9日',
          count: 100,
          activeIndex: 3,
          id: '3'
        },
        {
          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
          title: '2021年第6期“1+X金融产品数字化营销职业技能等级证书(中级)”师资培训班',
          time: '10月30日-10月31日',
          count: 100,
          activeIndex: 3,
          id: '6'
        }
      ],
      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>
