<template>
  <div class="ptz-control">
    <div class="direction-list">
      <div class="operation-item">
        <Icon
          :icon="zoomSubIcon"
          alt="Zoom In"
          @mousedown="handleControl('zoomSub', 'start')"
          @mouseup="handleControl('zoomSub', 'stop')"
          @mouseleave="handleControl('zoomSub', 'stop')"
        />
      </div>
      <span>变倍</span>
      <div class="operation-item">
        <Icon
          :icon="zoomAddIcon"
          alt="Zoom Out"
          @mousedown="handleControl('zoomAdd', 'start')"
          @mouseup="handleControl('zoomAdd', 'stop')"
          @mouseleave="handleControl('zoomAdd', 'stop')"
        />
      </div>
      <div class="operation-item">
        <Icon
          :icon="focusSubIcon"
          alt="Focus In"
          @mousedown="handleControl('focusSub', 'start')"
          @mouseup="handleControl('focusSub', 'stop')"
          @mouseleave="handleControl('focusSub', 'stop')"
        />
      </div>

      <span>变焦</span>
      <div class="operation-item">
        <Icon
          :icon="focusAddIcon"
          alt="Focus Out"
          @mousedown="handleControl('focusAdd', 'start')"
          @mouseup="handleControl('focusAdd', 'stop')"
          @mouseleave="handleControl('focusAdd', 'stop')"
        />
        <span></span>
      </div>
      <div class="operation-item">
        <Icon
          :icon="irisSubIcon"
          alt="Iris Open"
          @mousedown="handleControl('irisSub', 'start')"
          @mouseup="handleControl('irisSub', 'stop')"
          @mouseleave="handleControl('irisSub', 'stop')"
        />
      </div>
      <span>光圈</span>
      <div class="operation-item">
        <Icon
          :icon="irisAddIcon"
          alt="Iris Close"
          @mousedown="handleControl('irisAdd', 'start')"
          @mouseup="handleControl('irisAdd', 'stop')"
          @mouseleave="handleControl('irisAdd', 'stop')"
        />
      </div>

      <div class="direction-item">
        <Icon
          :icon="leftUpIcon"
          alt="Left Up"
          @mousedown="handleControl('leftUp', 'start')"
          @mouseup="handleControl('leftUp', 'stop')"
          @mouseleave="handleControl('leftUp', 'stop')"
        />
      </div>
      <div class="direction-item">
        <Icon
          :icon="upIcon"
          alt="Up"
          @mousedown="handleControl('up', 'start')"
          @mouseup="handleControl('up', 'stop')"
          @mouseleave="handleControl('up', 'stop')"
        />
      </div>
      <div class="direction-item">
        <Icon
          :icon="rightUpIcon"
          alt="Right Up"
          @mousedown="handleControl('rightUp', 'start')"
          @mouseup="handleControl('rightUp', 'stop')"
          @mouseleave="handleControl('rightUp', 'stop')"
        />
      </div>
      <div class="direction-item">
        <Icon
          :icon="leftIcon"
          alt="Left"
          @mousedown="handleControl('left', 'start')"
          @mouseup="handleControl('left', 'stop')"
          @mouseleave="handleControl('left', 'stop')"
        />
      </div>
      <div class="direction-item">
        <Icon
        
          :icon="centerIcon"
          @click="refresh"
          alt="Center"
          
        />
      </div>
      <div class="direction-item">
        <Icon
          :icon="rightIcon"
          alt="Right"
          @mousedown="handleControl('right', 'start')"
          @mouseup="handleControl('right', 'stop')"
          @mouseleave="handleControl('right', 'stop')"
        />
      </div>
      <div class="direction-item">
        <Icon
          :icon="leftDownIcon"
          alt="Left Down"
          @mousedown="handleControl('leftDown', 'start')"
          @mouseup="handleControl('leftDown', 'stop')"
          @mouseleave="handleControl('leftDown', 'stop')"
        />
      </div>
      <div class="direction-item">
        <Icon
          :icon="downIcon"
          alt="Down"
          @mousedown="handleControl('down', 'start')"
          @mouseup="handleControl('down', 'stop')"
          @mouseleave="handleControl('down', 'stop')"
        />
      </div>
      <div class="direction-item">
        <Icon
          :icon="rightDownIcon"
          alt="Right Down"
          @mousedown="handleControl('rightDown', 'start')"
          @mouseup="handleControl('rightDown', 'stop')"
          @mouseleave="handleControl('rightDown', 'stop')"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios' // 确保 axios 已经安装并引入
import { config } from '@/config/axios/config'
const { result_code, base_url, request_timeout } = config
import {CameraControlApi} from '@/api/cameraControl/camera'

export default {
  
  props: {
    cameraId: {
      default: 2
    }
  },
  setup(props, { emit }) {
    console.log(props.cameraId)
    // 定义响应式数据
    const zoomSubIcon = ref('ep:zoom-out') // 替换为实际的图标名称
    const zoomAddIcon = ref('ep:zoom-in') // 替换为实际的图标名称
    const focusSubIcon = ref('ep:minus') // 替换为实际的图标名称
    const focusAddIcon = ref('ep:plus') // 替换为实际的图标名称
    const irisSubIcon = ref('ep:minus') // 替换为实际的图标名称
    const irisAddIcon = ref('ep:plus') // 替换为实际的图标名称
    const leftUpIcon = ref('ep:top-left') // 替换为实际的图标名称
    const upIcon = ref('ep:arrow-up') // 替换为实际的图标名称
    const rightUpIcon = ref('ep:top-right') // 替换为实际的图标名称
    const leftIcon = ref('ep:arrow-left') // 替换为实际的图标名称
    const centerIcon = ref('ep:refresh') // 替换为实际的图标名称
    const rightIcon = ref('ep:arrow-right') // 替换为实际的图标名称
    const leftDownIcon = ref('ep:bottom-left') // 替换为实际的图标名称
    const downIcon = ref('ep:arrow-down') // 替换为实际的图标名称
    const rightDownIcon = ref('ep:bottom-right') // 替换为实际的图标名称

    const activeIcons = {
      zoomSub: 'ep:zoom-out-active',
      zoomAdd: 'ep:zoom-in-active',
      focusSub: 'ep:minus-active',
      focusAdd: 'ep:plus-active',
      irisSub: 'ep:minus-active',
      irisAdd: 'ep:plus-active',
      leftUp: 'ep:top-left-active',
      up: 'ep:arrow-up-active',
      rightUp: 'ep:top-right-active',
      left: 'ep:arrow-left-active',
      center: 'ep:aim-active',
      right: 'ep:arrow-right-active',
      leftDown: 'ep:bottom-left-active',
      down: 'ep:arrow-down-active',
      rightDown: 'ep:bottom-right-active'
    }
    const refresh = () =>{

      // 使用 $emit 触发事件，并传递参数 
      emit('childTriggerParent')  // 触发事件，不用 this
    }

    // 定义控制方法
    const handleControl = (action, state) => {
      console.log(`${action}-${state}`)
      const iconRef = `${action}Icon`
      if (state === 'start') {
        if (activeIcons[action]) {
          eval(`${iconRef}.value = activeIcons[action]`)
        }
      } else if (state === 'stop') {
        eval(`${iconRef}.value = '${eval(iconRef).value.replace('-active', '')}'`)
      }
      const data ={"id":props.cameraId}
      CameraControlApi.cameraControl(`/camera/control/${action}/${state}`,data)
     
    }

    const close = () => {
      // 关闭控制面板的逻辑
      console.log('关闭控制面板')
    }

    return {
      zoomSubIcon,
      zoomAddIcon,
      focusSubIcon,
      focusAddIcon,
      irisSubIcon,
      irisAddIcon,
      leftUpIcon,
      upIcon,
      rightUpIcon,
      leftIcon,
      centerIcon,
      rightIcon,
      refresh,
      leftDownIcon,
      downIcon,
      rightDownIcon,
      handleControl,
      close
    }
  }
}
</script>

<style scoped>
.ptz-control-panel {
  position: relative; /* 改为绝对定位 */
  bottom: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  z-index: 1000; /* 确保浮在最上层 */
}

.operation-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.operation-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5px;
}

.operation-item img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.direction-list {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-gap: 5px;
}

.direction-item img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
</style>
