<template>
  <div class="left-nav">
    <div class="nav-section">
      <el-menu :default-active="$route.path" router>
        <h3>工作台</h3>
        <el-menu-item index="/" :route="{ name: 'home' }">
          <template #title>
            <!-- <el-icon></el-icon> -->
            <span>工作台概览</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/workspace/config" :route="{ name: 'config' }">
          <template #title>
            <!-- <el-icon></el-icon> -->
            <span>配置</span>
          </template>
        </el-menu-item>

        <h3>文本抽取</h3>
        <el-menu-item v-for="queue in queues" :key="queue.id" :index="'queue' + '_' + queue.id"
          @click="queueClicked(queue)">
          <template #title>
            <span>{{ queue.name }}</span>
            <el-tag v-if="queue.type == 'input'" effect="light" round>START</el-tag>
          </template>
        </el-menu-item>

        <h3>知识图谱</h3>
        <el-menu-item @click="handleMenuClick('graph')">
          <span>全部图谱</span>
        </el-menu-item>
        <el-menu-item @click="handleMenuClick('graph-std-schemas')">
          <span>图谱标准</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { User } from '@element-plus/icons-vue'
import type { WorkQueue, Worker } from '../libs/dataset.ts'

const router = useRouter();

const emit = defineEmits(['selectQueue', 'selectWorker', 'selectMenu']);
// 模拟数据
const queues = [
  {
    id: 0,
    name: "全部工作",
    taskCount: 1,
    tasks: [],
    type: ""
  },
  // {
  //   id: 6,
  //   name: "WORD文档抽取",
  //   taskCount: 1,
  //   tasks: [],
  //   type: "input"
  // },
  // {
  //   id: 1,
  //   name: "PDF文档抽取",
  //   taskCount: 1,
  //   tasks: [],
  //   type: "input"
  // },
  // {
  //   id: 2,
  //   name: "文本校对",
  //   taskCount: 1,
  //   tasks: []
  // },
  // {
  //   id: 3,
  //   name: "文本切片队列",
  //   taskCount: 1,
  //   tasks: []
  // },
  // {
  //   id: 4,
  //   name: "知识抽取",
  //   taskCount: 1,
  //   tasks: []
  // },
  // {
  //   id: 5,
  //   name: "知识图谱构建",
  //   taskCount: 1,
  //   tasks: []
  // },
]



const workers = ref<Worker[]>(Array.from({ length: 2 }, (_, i) => ({
  id: i + 1,
  name: `后台服务 ${i + 1}`,
  status: Math.random() > 0.5 ? '忙碌' : '空闲'
})))

const selectedQueue = ref(null)
const selectedWorker = ref<Worker | null>(null)

const queueClicked = (queue: any) => {
  selectedQueue.value = queue;
  selectedWorker.value = null;
  emit('selectQueue', { id: queue.id });
}

const handleMenuClick = (menu: string) => {
  // console.log("handleMenuClick called with menu:", menu); // 调试输出
  emit('selectMenu', { name: menu });
}
const selectWorker = (worker: Worker) => {
  selectedWorker.value = worker
  selectedQueue.value = null
}

</script>

<style scoped lang="less">
h3 {
  font-weight: bold;
}

.left-nav {
  // width: 280px;
  // height: 100vh;

  // border-right: 0px solid #e4e7ed;
  // padding: 20px;
  // overflow: auto;
  // overflow-y: auto;
  // background-color: #e4e7ed;
  // background-color: #d5e9fe;
  .nav-section {
    margin-bottom: 30px;

    h3 {
      margin-bottom: 15px;
      color: #666;
    }
  }
}

.el-menu-vertical-demo {
  height: 100%;
}
</style>