<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="1" name="first">
        <lock-eu item="1" typename="" v-if="isFirst" page-number="1"></lock-eu>
      </el-tab-pane>
      <el-tab-pane label="2" name="second">
        <lock-eu item="2" typename="" v-if="isSecond" page-number="2"></lock-eu>
      </el-tab-pane>
      <el-tab-pane label="3" name="third">
        <lock-eu item="3" typename="" v-if="isThird" page-number="3"></lock-eu>
      </el-tab-pane>
      <el-tab-pane label="4" name="fourth">
        <lock-eu item="4" typename="" v-if="isFourth" page-number="4"></lock-eu>
      </el-tab-pane>
      <el-tab-pane label="5" name="fifth">
        <lock-eu item="5" typename="" v-if="isFifth" page-number="5"></lock-eu>
      </el-tab-pane>
      <el-tab-pane label="6" name="sixth">
        <lock-eu item="6" typename="" v-if="isSixth" page-number="6"></lock-eu>
      </el-tab-pane>
      <el-tab-pane label="7" name="seventh">
        <lock-eu item="7" typename="" v-if="isSeventh" page-number="7"></lock-eu>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import LockEu from "@/views/apply/lock/lock-eu";
import LockAeu from "@/views/apply/lock/lock-aeu";
import LockPgu from "@/views/apply/lock/lock-pgu";
import LockSctu from "@/views/apply/lock/lock-sctu";
import LockSub from "@/views/apply/lock/lock-sub";

export default {
  name: "lock-dashboard",
  components: {LockSub, LockSctu, LockPgu, LockAeu, LockEu},
  data() {
    return {
      // 默认第一个Tab
      activeName: 'first',
      isFirst: true,
      isSecond: false,
      isThird: false,
      isFourth: false,
      isFifth: false,
      isSixth: false,
      isSeventh: false,
    }
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'first') {
        this.isFirst = true
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = false
      } else if (tab.name === 'second') {
        this.isFirst = false
        this.isSecond = true
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = false
      } else if (tab.name === 'third') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = true
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = false
      } else if (tab.name === 'fourth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = true
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = false
      } else if (tab.name === 'fifth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = true
        this.isSixth = false
        this.isSeventh = false
      } else if (tab.name === 'sixth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = true
        this.isSeventh = false
      } else if (tab.name === 'seventh') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = true
      }
    }
  }
}
</script>

<style scoped>

</style>
