<template>
  <div class="gl-page-content-full">
    <div class="content">
      <div class="tabs">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane
            v-for="tab in tabConfigs"
            :key="tab.name"
            :label="$t(tab.label)"
            :name="tab.name"
          />
        </el-tabs>
      </div>
      <div class="tab-content">
        <keep-alive>
          <component :is="currentComponent" />
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import SimulationLoop from './components/simulationLoop.vue';
import SummaryDashboard from './components/summaryDashboard.vue';
import dataStatistics from './components/dataStatistics.vue';
import workLoad from '@/views/task/workLoad/index.vue';
import workerLoad from '@/views/task/workerLoad/index.vue';

// 看板tab
const tabConfigs = [
  {
    name: 'dataStatistics',
    label: '菜单.数据统计看板',
    component: dataStatistics,
  },
  {
    name: 'workLoad',
    label: '菜单.工作负载看板',
    component: workLoad,
  },
  {
    name: 'workerLoad',
    label: '菜单.人力负载看板',
    component: workerLoad,
  },
  {
    name: 'simulationLoop',
    label: '菜单.仿真闭环看板',
    component: SimulationLoop,
  },
  {
    name: 'summary',
    label: '菜单.仿真汇总看板',
    component: SummaryDashboard,
  },
];

const currentComponent = computed(() => {
  const tab = tabConfigs.find((item) => item.name === activeTab.value);
  return tab?.component;
});
const activeTab = ref('dataStatistics');
</script>

<style lang="scss" scoped>
.gl-page-content-full {
  .content {
    height: 100%;
    .tabs {
      height: 55px;
    }
    .tab-content {
      height: calc(100% - 55px);
      overflow-y: auto;
    }
  }
}
</style>
