<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-03 10:36:38
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-23 14:31:46
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\views\Design\Controls\navCtrl.vue
 * @Description: 顶部操作栏
-->
<template>
  <div class="nav-controls-wrap">
    <div class="nav-controls">
      <template v-for="(item, index) in navControlsConf" :key="index">
        <el-button size="small" class="custom-btn" @click="handleClick(item)">
          <img class="nav-icon" :src="item.icon" alt="" />
          <span>{{ item.label }}</span>
        </el-button>
      </template>
    </div>
    <div class="nav-run">
      <el-button size="small" class="custom-btn">
        <img class="nav-icon" src="@/assets/images/navBar/run_mode.png" alt="" />
        <span>运行模式</span>
      </el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { navControlsConf, ControlsItemType } from '@/config/designControl'
defineOptions({
  name: 'NavBar'
})

const emit = defineEmits(['design-flow', 'nav-control'])

const handleClick = (record: ControlsItemType) => {
  switch (record?.type) {
    case 'save': // 特殊事件处理
    case 'undo': // 特殊事件处理
    case 'redo': // 特殊事件处理
    case 'lock': // 特殊事件处理
      emit('design-flow', { ...record })
      break
    default:
      emit('nav-control', { ...record })
      break
  }
}
</script>
<style lang="scss" scoped>
.nav-controls-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 42px;
  background: #373737;
  .nav-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .custom-btn {
    display: flex;
    align-items: center;
    background-color: #373737;
    color: white;
    border: none; /* 可选：移除边框 */
    font-size: 14px;
    margin-left: 0;
    &:hover {
      background-color: #121212;
    }
    .nav-icon {
      margin-right: 8px;
      width: 20px;
      height: 20px;
    }
    span {
      font-weight: 500;
      font-size: 14px;
    }
  }
}
</style>
