<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('乙烯产量及OAE')" :lazy="true" name="first">
        <yx  v-if="isFirst"/>
      </el-tab-pane>
      <el-tab-pane :label="$t('芳烃产量及OAE')" :lazy="true" name="second">
        <qzft  v-if="isSecond"/>
      </el-tab-pane>
      <el-tab-pane :label="$t('产能利用率/工厂损失')" :lazy="true" name="third">
        <cnlyl item="3" v-if="isThird"></cnlyl>
      </el-tab-pane>
      <el-tab-pane :label="$t('能源消耗')" :lazy="true" name="fourth">
        <nyxh item="4" v-if="isFourth"></nyxh>
      </el-tab-pane>
      <el-tab-pane :label="$t('COD排放')" :lazy="true" name="fifth">
        <COD item="5" v-if="isFifth"></COD>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import COD from '@/views/components/Production/monthplanCOD.vue'
import NYXH from '@/views/components/Production/monthplanNYXH.vue'
import CNLYL from '@/views/components/Production/monthplanCNLYL.vue'
import QZFT from '@/views/components/Production/monthplanQZFT.vue'
import YX from '@/views/components/Production/monthplanYX.vue'

export default {
  name: "Monthplan",
  components: {
    COD: COD,
    nyxh: NYXH,
    cnlyl: CNLYL,
    qzft: QZFT,
    yx: YX
  },
  data() {
    return {
      // 默认第一个Tab
      activeName: 'first',
      isFirst: true,
      isSecond: false,
      isThird: false,
      isFourth: false,
      isFifth: false,
    }
  },
  created() {
    const type = this.$route.query.type
    this.isFirst = true
    this.isSecond = true
    this.isThird = true
    this.isFourth = true
    this.isFifth = true
    if (type != null){
      this.activeName = type
    }

  },
  methods: {
    handleClick(tab) {
      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>

<style>
  .tab-Chart {
    width: 100%;
    height: 400px;
  }
</style>
