<template>
  <div class="content-max-width">
    <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 v-if="currentList.length">
        <template v-for="(item, index) in currentList">
          <li :key="index" v-if="tabsIndex === 0 || tabsIndex === item.activeIndex">
            <listItem :data="item" />
          </li>
        </template>
      </ul>
      <noData v-else />
    </div>
  </div>
</template>
<script>
import screenTabs from '@/components/tabs/screenTabs.vue'
import noData from '@/components/noData.vue'
import listItem from './components/listItem.vue'
import datalist from '@/assets/data.js'
export default {
  components: { screenTabs, listItem, noData },
  data() {
    return {
      tabsIndex: 1,
      datalist,
      screenTabsData: {
        name: '筛选：',
        options: ['全部', '正在进行', '未开始', '已结束'],
      },
    }
  },
  computed: {
    currentList() {
      return this.datalist.filter((item) => {
        return this.tabsIndex === 0 || this.tabsIndex === item.activeIndex
      })
    },
  },
  methods: {
    HandleTabChange(index) {
      this.tabsIndex = index
    },
  },
}
</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;
}
.new-tits {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #444444;
  line-height: 33px;
  margin-bottom: 16px;
  margin-top: 36px;
}
</style>
