<template>
  <div class="app-container" style="background-color: #F9F9F9;">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name" lazy>
        <component :is=item.content v-if="item.flag"></component>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import realTimeManage from './realTimeManage/realTimeManage.vue';
import personManage from './personManage/personManage.vue';
import hoistManage from './hoistManage/hoistManage.vue';
export default {
  name: "manage",
  components: {
    realTimeManage,
    personManage,
    hoistManage
  },
  data() {
    return {
      activeName: 'realTimeManage',
      currentTab: 'realTimeManage', // 默认显示的标签页组件
      tabs: [
        { name: 'realTimeManage', label: '实时监控', content: 'realTimeManage', flag: true },
        { name: 'personManage', label: '人员管控', content: 'personManage', flag: false },
        { name: 'hoistManage', label: '吊装管控', content: 'hoistManage', flag: false },
      ],
    };
  },
  created() {
  },
  methods: {
    handleClick(tab, event) {
      const arr = this.tabs
      for (var i = 0; i < arr.length; i++) {
        if (tab.name === arr[i].name) {
          arr[i].flag = true
        } else {
          arr[i].flag = false
        }
      }
      this.tabs = arr
    }
  }
};
</script>

<style></style>