<template>
  <div class="titlebar-wrap" @mousedown="mousedown($event)">
    <div class="win">
      <div class="title">
        <span class="title-icon"></span>
        <div class="title-text">
          <el-dropdown placement="bottom-start" trigger="click">
            <span class="el-dropdown-link">文件</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>新建方案</el-dropdown-item>
                <el-dropdown-item>打开方案</el-dropdown-item>
                <el-dropdown-item>最近打开</el-dropdown-item>
                <el-dropdown-item>打开实例</el-dropdown-item>
                <el-dropdown-item>保存方案</el-dropdown-item>
                <el-dropdown-item>另存方案</el-dropdown-item>
                <el-dropdown-item>导入流程</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span @click="() => emit('setting')">设置</span>
          <el-dropdown placement="bottom-start" trigger="click">
            <span class="el-dropdown-link">工具</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>创建一键标定引导</el-dropdown-item>
                <el-dropdown-item>标定板生成工具</el-dropdown-item>
                <el-dropdown-item>自定义模块生成工具</el-dropdown-item>
                <el-dropdown-item>运行异常采集机器人工具</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown placement="bottom-start" trigger="click">
            <span class="el-dropdown-link">系统</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleMenuClick('log')">日志</el-dropdown-item>
                <el-dropdown-item @click="handleMenuClick('communication')"
                  >通信管理</el-dropdown-item
                >
                <el-dropdown-item @click="handleMenuClick('controller')"
                  >控制器管理</el-dropdown-item
                >
                <el-dropdown-item @click="handleMenuClick('camera')">相机管理</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>帮助</span>
        </div>
      </div>
      <div class="controls">
        <div class="minus" @click="handleMinimize"></div>
        <div class="full" @click="handleMaximize"></div>
        <div class="close" @click="handleClose"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'TitleBar'
})
interface Emits {
  (e: 'setting'): void
  (e: 'system-click', command: string): void
}
const emit = defineEmits<Emits>()

const dragging = ref(false)
const mouseX = ref(0)
const mouseY = ref(0)

const handleMenuClick = (command) => {
  console.log('点击的菜单项:', command)
  emit('system-click', command)
}
const mousedown = (event) => {
  dragging.value = true
  mouseX.value = event.x
  mouseY.value = event.y
  document.onmousemove = (e) => {
    if (dragging.value) {
      const x = e.screenX - mouseX.value
      const y = e.screenY - mouseY.value
      let data = {
        appX: x,
        appY: y
      }
      electron.ipcRenderer.invoke('custom-adsorption', data)
    }
  }
  document.onmouseup = () => {
    dragging.value = false
  }
}
// 最小化
const handleMinimize = () => {
  electron.ipcRenderer.invoke('renderer-to-main', {
    name: 'min-win'
  })
}
// 最大化
const handleMaximize = () => {
  electron.ipcRenderer.invoke('renderer-to-main', {
    name: 'max-win'
  })
}
// 关闭
const handleClose = () => {
  electron.ipcRenderer.invoke('renderer-to-main', {
    name: 'win-close'
  })
}
</script>
<style lang="scss" scoped>
.titlebar-wrap {
  width: 100%;
  height: 38px;
  background: #373737;

  .win {
    width: 100%;
    height: 38px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 10px;
    -webkit-app-region: drag;
    .title {
      display: flex;
      -webkit-app-region: no-drag;
      .title-icon {
        margin-right: 32px;
        width: 80px;
        height: 26px;
        background: url('@/assets/images/titleBar/logo.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .title-text {
        width: 270px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-dropdown-link {
          width: 54px;
          height: 100%;
          color: #fff;
          font-size: 14px;
          font-weight: 500;
        }
        span {
          width: 54px;
          height: 100%;
          color: #fff;
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
    .controls {
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      -webkit-app-region: no-drag;
      .minus {
        width: 24px;
        height: 24px;
        background: url('@/assets/images/titleBar/Minus.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
      }
      .full {
        width: 24px;
        height: 24px;
        background: url('@/assets/images/titleBar/Full_Screen.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
      }
      .close {
        width: 24px;
        height: 24px;
        background: url('@/assets/images/titleBar/close.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="scss">
/* 隐藏箭头的伪元素 */
.el-popper__arrow,
.el-popper__arrow::before {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
</style>
