<template>
  <div class="mod-config">
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="近3个月临到期" name="expiresThreeMonths" />
      <el-tab-pane label="近半年临到期" name="expiresSixMonths" />
      <el-tab-pane label="全部" name="allVip" />
      <el-tab-pane label="年" name="yearVip" />
      <el-tab-pane label="月" name="monthVip" />
    </el-tabs>
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>

<script>
import expiresThreeMonths from './expiresThreeMonths'
import expiresSixMonths from './expiresSixMonths'
import allVip from './allVip'
import yearVip from './yearVip'
import monthVip from './monthVip'

export default {
  components: {
    expiresThreeMonths,
    expiresSixMonths,
    allVip,
    yearVip,
    monthVip
  },
  data() {
    return {
      activeTab: 'expiresThreeMonths'
    }
  },
  computed: {
    currentComponent() {
      return this.activeTab
    }
  }
}
</script>

<style scoped>
.el-form .el-form-item {
  margin-bottom: 10px !important;
}
</style>
