<template>
  <div class="ptz-control">
    <el-card style="max-width: 480px">
      <el-row :gutter="10" justify="center">
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="zoomSubIcon"
              alt="Zoom In"
              @mousedown="handleControl('zoomSub', 'start')"
              @mouseup="handleControl('zoomSub', 'stop')"
              @mouseleave="handleControl('zoomSub', 'stop')"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <span class="direction-item">变倍</span>
        </el-col>
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="zoomAddIcon"
              alt="Zoom Out"
              @mousedown="handleControl('zoomAdd', 'start')"
              @mouseup="handleControl('zoomAdd', 'stop')"
              @mouseleave="handleControl('zoomAdd', 'stop')"
            />
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10" justify="center">
        <el-col :span="8" class="direction-item">
          <div class="direction-item">
            <Icon
              :icon="focusSubIcon"
              alt="Focus In"
              @mousedown="handleControl('focusSub', 'start')"
              @mouseup="handleControl('focusSub', 'stop')"
              @mouseleave="handleControl('focusSub', 'stop')"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <span class="direction-item">变焦</span>
        </el-col>
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="focusAddIcon"
              alt="Focus Out"
              @mousedown="handleControl('focusAdd', 'start')"
              @mouseup="handleControl('focusAdd', 'stop')"
              @mouseleave="handleControl('focusAdd', 'stop')"
            />
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10" justify="center">
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="irisSubIcon"
              alt="Iris Open"
              @mousedown="handleControl('irisSub', 'start')"
              @mouseup="handleControl('irisSub', 'stop')"
              @mouseleave="handleControl('irisSub', 'stop')"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <span class="direction-item">光圈</span>
        </el-col>
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="irisAddIcon"
              alt="Iris Close"
              @mousedown="handleControl('irisAdd', 'start')"
              @mouseup="handleControl('irisAdd', 'stop')"
              @mouseleave="handleControl('irisAdd', 'stop')"
            />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" justify="center">
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="leftUpIcon"
              alt="Left Up"
              @mousedown="handleControl('leftUp', 'start')"
              @mouseup="handleControl('leftUp', 'stop')"
              @mouseleave="handleControl('leftUp', 'stop')"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="upIcon"
              alt="Up"
              @mousedown="handleControl('up', 'start')"
              @mouseup="handleControl('up', 'stop')"
              @mouseleave="handleControl('up', 'stop')"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="rightUpIcon"
              alt="Right Up"
              @mousedown="handleControl('rightUp', 'start')"
              @mouseup="handleControl('rightUp', 'stop')"
              @mouseleave="handleControl('rightUp', 'stop')"
            />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" justify="center">
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="leftIcon"
              alt="Left"
              @mousedown="handleControl('left', 'start')"
              @mouseup="handleControl('left', 'stop')"
              @mouseleave="handleControl('left', 'stop')"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="direction-item">
            <Icon :icon="centerIcon" @click="refresh" alt="Center" title="刷新" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="rightIcon"
              alt="Right"
              @mousedown="handleControl('right', 'start')"
              @mouseup="handleControl('right', 'stop')"
              @mouseleave="handleControl('right', 'stop')"
            />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" justify="center">
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="leftDownIcon"
              alt="Left Down"
              @mousedown="handleControl('leftDown', 'start')"
              @mouseup="handleControl('leftDown', 'stop')"
              @mouseleave="handleControl('leftDown', 'stop')"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="downIcon"
              alt="Down"
              @mousedown="handleControl('down', 'start')"
              @mouseup="handleControl('down', 'stop')"
              @mouseleave="handleControl('down', 'stop')"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="direction-item">
            <Icon
              :icon="rightDownIcon"
              alt="Right Down"
              @mousedown="handleControl('rightDown', 'start')"
              @mouseup="handleControl('rightDown', 'stop')"
              @mouseleave="handleControl('rightDown', 'stop')"
            />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

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

const { result_code, base_url, request_timeout } = config
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 refresh = () => {
      console.log("刷新");
      // 使用 $emit 触发事件，并传递参数
      emit('childTriggerParent',props.cameraId)
    }
    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 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,
      refresh,
      centerIcon,
      rightIcon,
      leftDownIcon,
      downIcon,
      rightDownIcon,
      handleControl,
      close
    }
  }
}
</script>

<style scoped>
.direction-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
