<template>
  <div style="width: 100%">
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="公司模板" name="scene">
          <SceneManagerVue />
        </el-tab-pane>
        <el-tab-pane label="场景标签" name="label">
          <LabelManagerVue />
        </el-tab-pane>
        <el-tab-pane label="车间模板" name="workspace">
          <WorkspaceManagerVue />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import type { TabsPaneContext } from 'element-plus';
  import LabelManagerVue from './LabelManager.vue';
  import WorkspaceManagerVue from './WorkspaceManager.vue';
  import SceneManagerVue from './SceneManager.vue';

  const activeName = ref('scene');
  export type LabelType = 'scene' | 'label' | 'workspace';
  const currentLabel = ref<LabelType>('scene');

  const handleClick = (tab: TabsPaneContext) => {
    console.log(tab.paneName);
    if (tab.paneName === 'scene') {
      currentLabel.value = 'scene';
    } else {
      if (tab.paneName === 'label') {
        currentLabel.value = 'label';
      } else {
        currentLabel.value = 'workspace';
      }
    }
  };
</script>

<style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }

  .el-tabs__item:hover {
    /* color: rgb(53, 120, 220); */
    background-color: rgb(53, 120, 220);
  }

  .el-tabs__item.is-active {
    /* color: rgb(221, 239, 255); */
    background-color: rgb(221, 239, 255);
    border: 3px solid #4693f1 !important;
  }
</style>
