<template>
  <div class="mini-window"
       @dblclick="handleDoubleClick"
       @mousedown="handleMouseDown"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave">
    <!-- 折叠状态 -->
    <div class="mini-content">
      <span class="mini-bg">

      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

let ipcRenderService=null

try {
  ipcRenderService= window.electron.ipcRenderer
}catch (e){

}

const isExpanded = ref(false)
let isDragging = false
let initialMouseX = 0
let initialMouseY = 0
let mouseDownTime = 0
let windowInitialX = 0
let windowInitialY = 0
const isFlashing = ref(false)

const handleDoubleClick=(e)=>{
  console.log("双击事件")
  ipcRenderService.invoke('app:window:switch-show-main-window').then(() => {


  })

}


// 处理鼠标按下事件
const handleMouseDown = (e) => {
  // if (isExpanded.value) return // 展开状态不允许拖动

  // isDragging = false
  initialMouseX = e.screenX // 使用screenX/screenY获取相对于屏幕的坐标
  initialMouseY = e.screenY
  mouseDownTime = Date.now()


  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)

  // 获取窗口初始位置
  ipcRenderService.invoke('app:window:get-position').then((postion) => {

    console.log("app:window:get-position")
    console.log(postion.x)
    console.log(postion.y)

    windowInitialX = postion.x
    windowInitialY = postion.y


  })
}

// 处理鼠标移动事件
const handleMouseMove = (e) => {
  const deltaX = e.screenX - initialMouseX
  const deltaY = e.screenY - initialMouseY

  // 判断是否达到拖动阈值
  if (!isDragging && (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5)) {
    isDragging = true
  }

  if (isDragging) {
    // 计算新位置
    const newX = windowInitialX + deltaX
    const newY = windowInitialY + deltaY
    console.log("发送位置：",newX)
    console.log("发送位置：",newY)

    // 发送新位置到主进程
    window.electron.ipcRenderer.send('ping', newX,  newY)
    window.electron.ipcRenderer.send('app:window:set-position', newX,  newY )
  }
}

const handleMouseUp = () => {
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)

  // 如果不是拖拽且点击时间小于200ms，则触发展开/收起
  // if (!isDragging && (Date.now() - mouseDownTime < 200)) {
  //   toggleExpand()
  // }
}

const handleMouseEnter = () => {
  // 每次进入都触发闪烁
  // isFlashing.value = true
  //
  // // 300ms 后移除闪烁效果
  // setTimeout(() => {
  //   isFlashing.value = false
  // }, 300)

  ipcRenderService.send('app:window:mouse-enter')
}

const handleMouseLeave = () => {
  // 确保离开时重置闪烁状态
  isFlashing.value = false
  ipcRenderService.send('app:window:mouse-leave')
}

const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

const handleAction = (action) => {
  switch (action) {
    case 'restore':
      ipcRenderService.send('app:window:restore-main')
      break
    case 'dashboard':
      ipcRenderService.send('app:window:restore-main', { route: 'INDEX' })
      break
    case 'settings':
      ipcRenderService.send('app:window:restore-main', { route: 'SETTINGS' })
      break
  }
  isExpanded.value = false
}

// 监听主进程发来的事件
onMounted(() => {
  ipcRenderService.on('app:window:mouse-enter', () => {
    // 可以在这里处理鼠标进入事件
  })

  ipcRenderService.on('app:window:mouse-leave', () => {
    // 可以在这里处理鼠标离开事件
  })
})
</script>

<style>
.mini-window {
  width: 120px;
  height: 120px;
  border-radius: 25px;
  background: rgba(0,0,0,0);
  transition: all 0.3s ease;
  overflow: hidden;
  user-select: none;
  background-image: url("./assets/lxi_120.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}



.mini-window.expanded .mini-content {
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.mini-window .mini-content {
  position: absolute;
  bottom: 1px;
  right: 5px;
  opacity: 1;
  transition: opacity 0.3s;
}

.mini-window .mini-content .mini-bg {
  cursor: pointer;
  display: inline-block;
  width: 120px;
  height: 120px;
  border-radius: 20px;
}


.mini-window .expanded-content .actions .action-item .el-icon {
  font-size: 18px;
}

.mini-window .expanded-content .actions .action-item span {
  font-size: 14px;
}


@keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
