<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-02 16:17:29
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-17 16:06:39
 * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="design-wrap">
    <div class="design-header">
      <HeadCtrl
        @setting="() => (isOpenSetting = true)"
        @open-log="handleSystemClick"
        @system-click="handleSystemClick"
      />
      <NavCtrl @design-flow="handleDesignFlow" @nav-control="handleNavClick" />
    </div>
    <div class="flex design-content">
      <!-- 侧边栏--流程操作 -->
      <design-content-layout class="design-main-container">
        <!--左侧面板内容 -->
        <template #left>
          <div class="h-full left-content">
            <!-- 流程画布 -->
            <LogicFlowView class="h-full design-logic-flow-box" ref="logicFlowRef" />
          </div>
        </template>
        <!--右侧顶部面板内容 -->
        <template #top>
          <div class="top-content">
            <!-- 输出内容 -->
            <OutputView />
          </div>
        </template>
        <!--右侧底部面板内容 -->
        <template #bottom>
          <div class="bottom-content">
            <!-- 历史结果 -->
            <ResultsView />
          </div>
        </template>
      </design-content-layout>
    </div>
  </div>
  <!-- 弹窗 -->
  <SettingList v-model:value="isOpenSetting" />
  <LogList v-model:value="isOpenLog" />
  <CommManagement v-model:value="isOpenCommManagement" />
  <ControllerManagement v-model:value="isOpenControllerManagement" />
  <CameraManagement v-model:value="isOpenCameraManagement" />
</template>

<script setup lang="ts">
import DesignContentLayout from '@/layout/designContentLayout.vue'
import HeadCtrl from './Controls/headCtrl.vue'
import NavCtrl from './Controls/navCtrl.vue'
import LogicFlowView from './Workflow/logicFlowView.vue'
import OutputView from './Workflow/outputView.vue'
import ResultsView from './Workflow/resultsView.vue'
import SettingList from './Settings/settingList.vue'
import LogList from './LogManagement/logList.vue'
import CommManagement from './CommManagement/commManagement.vue'
import ControllerManagement from './ControllerManagement/controllerManagement.vue'
import CameraManagement from './CameraManagement/cameraManagement.vue'
const isOpenSetting = ref<boolean>(false) // 打开设置
const isOpenLog = ref<boolean>(false) // 打开日志
const isOpenCommManagement = ref<boolean>(false) // 打开通信管理
const isOpenControllerManagement = ref<boolean>(false) // 打开控制器管理
const isOpenCameraManagement = ref<boolean>(false) // 打开控制器管理

// 处理 TitleBar 系统 传递的点击事件
const handleSystemClick = (command: string) => {
  // 根据命令调用对应子组件的方法
  switch (command) {
    case 'log':
      // 调用日志子组件的显示方法（假设子组件有 open 方法）
      isOpenLog.value = true
      break
    case 'communication':
      // 调用通信管理子组件的显示方法
      isOpenCommManagement.value = true
      break
    case 'controller':
      break
    case 'camera':
      break
  }
}

// 点击Nav导航栏
const handleNavClick = (command: any) => {
  console.log(command)
  if (command.type === 'comm') {
    isOpenCommManagement.value = true
  } else if (command.type === 'control') {
    console.log('111')
    isOpenControllerManagement.value = true
  } else if (command.type === 'camera') {
    isOpenCameraManagement.value = true
  }
}

// 流程图关联操作
const logicFlowRef = ref(null)
const handleDesignFlow = (record) => {
  logicFlowRef.value.initDesignFlow(record)
}
</script>
<style scoped>
.design-main-container {
  width: calc(100vw);
  height: calc(100vh - 80px);
}
</style>
