<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-15 11:26:14
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-21 16:16:41
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\views\Design\Controls\flowCtrl.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- //TODO0715 流程导航 -->
  <div class="flex items-center justify-between flowCtrl-wrap">
    <div class="flex items-center flowCtrl-tabs-box">
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        class="ds-tabs"
        closable
        @tab-remove="removeTab"
      >
        <el-tab-pane
          v-for="item in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <template #label>
            <div class="flex items-center ds-tabs-label text-[18px]">
              <el-icon><Setting /></el-icon>
              <el-divider direction="vertical"></el-divider>
              <span class="ds-dot"></span>
              <span class="text-[16px] px-[12px]">{{ item.title }}</span>
              <el-icon class="mr-[12px]"><VideoPlay /></el-icon>
              <el-icon><ChromeFilled /></el-icon>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
      <div class="px-[16px] text-[16px] cursor-pointer flowCtrl-tab-add" @click="addTab">
        <el-icon><Plus /></el-icon>
      </div>
    </div>
    <div class="flow-controls-group">
      <el-dropdown trigger="click" placement="bottom-start">
        <div class="flex items-center text-[24px] flow-controls-group-icons">
          <el-icon><Menu /></el-icon>
          <el-icon class="mx-[16px]"><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu class="flow-controls-menu">
            <el-dropdown-item v-for="item in editableTabs" :key="item?.type" class="node-item">
              <div class="flex items-center node-content">
                <el-icon><Plus /></el-icon>
                <span>{{ item.title }}</span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TabPaneName } from 'element-plus'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: '流程1',
    name: '1',
    content: ''
  }
])

const addTab = (targetName: string) => {
  const newTabName = `${++tabIndex}`
  editableTabs.value.push({
    title: 'New Tab',
    name: newTabName,
    content: 'New Tab content'
  })
  editableTabsValue.value = newTabName
}
const removeTab = (targetName: TabPaneName) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }
  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}
</script>
<style lang="scss">
@import url('./flowCtrl.scss');
</style>
