<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="$t('程序总汇')" name="second">
        <list item="2" typename="plantproglistprocedure" v-if="isSecond"></list>
      </el-tab-pane>
      <el-tab-pane :label="$t('指南总汇')" name="third">
        <list item="3" typename="plantproglistguide" v-if="isThird"></list>
      </el-tab-pane>
      <el-tab-pane :label="$t('指导书总汇')" name="fourth">
        <list item="4" typename="plantproglistbook" v-if="isFourth"></list>
      </el-tab-pane>
      <el-tab-pane :label="$t('附件总汇')" name="fifth">
        <list item="5" typename="plantproglistannex" v-if="isFifth"></list>
      </el-tab-pane>
      <el-tab-pane :label="$t('表格总汇')" name="first">
        <list item="1" typename="plantproglistform" v-if="isFirst"></list>
      </el-tab-pane>
      <el-tab-pane :label="$t('培训材料')" name="sixth">
        <list item="6" typename="plantproglistmaterials" v-if="isSixth"></list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import List from '@/views/components/PlantProgList/index.vue'

export default {
  name: "Plantproglist",
  components: {
    List
  },
  data() {
    return {
      // 默认第一个Tab
      activeName: 'second',
      isFirst: false,
      isSecond: true,
      isThird: false,
      isFourth: false,
      isFifth: false,
      isSixth: 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
        this.isSixth = false
      } else if (tab.name === 'second') {
        this.isFirst = false
        this.isSecond = true
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
      }else if (tab.name === 'third') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = true
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
      }else if (tab.name === 'fourth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = true
        this.isFifth = false
        this.isSixth = false
      }else if (tab.name === 'fifth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = true
        this.isSixth = false
      }else if (tab.name === 'sixth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = true
      }
    }
  }
};
</script>
