<template>
  <div class="app-container" style="padding: 0 0 0 0">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="CBPC" name="first" >
        <pm item="1" v-if="isFirst"></pm>
      </el-tab-pane>
      <el-tab-pane label="CTAB" name="second">
        <pm item="2" v-if="isSecond"></pm>
      </el-tab-pane>
      <el-tab-pane label="CTMB" name="third">
        <pm item="3" v-if="isThird"></pm>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import PM from '@/views/components/Reliability/preventivemaintenance.vue'

  export default {
    name: "Preventivemaintenance",
    components: {
      pm: PM,
    },
    data() {
      return {
        // 默认第一个Tab
        activeName: 'first',
        isFirst: true,
        isSecond: false,
        isThird: false,
        isFourth: false,
        isFifth: false
      }
    },
    methods: {
      handleClick(tab) {
        console.log(tab.name)
        if (tab.name === 'first') {
          this.isFirst = true
          this.isSecond = false
          this.isThird = false
          this.isFourth = false
          this.isFifth = false
        } else if (tab.name === 'second') {
          this.isFirst = false
          this.isSecond = true
          this.isThird = false
          this.isFourth = false
          this.isFifth = false
        }else if (tab.name === 'third') {
          this.isFirst = false
          this.isSecond = false
          this.isThird = true
          this.isFourth = false
          this.isFifth = false
        }else if (tab.name === 'fourth') {
          this.isFirst = false
          this.isSecond = false
          this.isThird = false
          this.isFourth = true
          this.isFifth = false
        }else if (tab.name === 'fifth') {
          this.isFirst = false
          this.isSecond = false
          this.isThird = false
          this.isFourth = false
          this.isFifth = true
        }
      }
    }
  }
</script>
