<template>
  <div>
    <el-tabs :lazy="true" v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="PLC_1_HMI" name="1"><PLC_1 v-if="isFirst" ref="fresh1"/></el-tab-pane>
      <el-tab-pane label="PLC_2_HMI" name="2"><PLC_2 v-if="isSecond" ref="fresh2"/></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import PLC_1 from '@/views/SystemMaintenance/VirtualHmi/PLC_1.vue'
import PLC_2 from '@/views/SystemMaintenance/VirtualHmi/PLC_2.vue'
export default {
  components: {
    'PLC_1': PLC_1,
    'PLC_2': PLC_2
  },
  data() {
    return {
      isFirst: true,
      isSecond: false,
      activeName: '1',
      permissionControl1: false,
      permissionControl: false
    }
  },
  methods: {
    handleClick() {
      switch (this.activeName) {
        case '1': {
          this.isFirst = true
          this.isSecond = false
          break
        }
        case '2': {
          this.isFirst = false
          this.isSecond = true
          break
        }
      }
    }
  }
}
</script>

<style scoped>
</style>
