<template>
  <div class="app-container">
    <el-tabs type="border-card"v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待处理" name="first">
        <pending item="1" typename="" v-if="isFirst"></pending>
      </el-tab-pane>
      <el-tab-pane label="与我相关" name="second">
        <mine item="2" typename="" v-if="isSecond"></mine>
      </el-tab-pane>
      <el-tab-pane label="总数据" name="third">
        <all item="3" typename="" v-if="isThird"></all>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import All from '@/views/production/apply/all/index.vue'
  import Mine from '@/views/production/apply/mine/index.vue'
  import Pending from '@/views/production/apply/pending/index.vue'

export default {
  name: "Apply",
  components: { All, Mine, Pending },
  data() {
    return {
      activeName: 'first',
      isFirst: true,
      isSecond: false,
      isThird: false,
    }
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'first') {
        this.isFirst = true
        this.isSecond = false
        this.isThird = false
      } else if (tab.name === 'second') {
        this.isFirst = false
        this.isSecond = true
        this.isThird = false
      }else if (tab.name === 'third') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = true
      }else if (tab.name === 'fourth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
      }else if (tab.name === 'fifth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
      }else if (tab.name === 'sixth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
      }
    },
  }
};
</script>
