<!--
  Description: 场站管理-设备控制面板
  Author: 李亚光
  Date: 2024-09-05
 -->
<script lang="ts" setup name="StationDeviceControlBoard">
import { ElMessage } from 'element-plus'
import { controlVideoTurn } from '@/api/home/station/video'
const $props = defineProps({
  deviceId: {
    type: String,
    required: true,
  }
})
const img = {
  zuoshang: new URL('@/assets/images/device-control/zuoshang.png', import.meta.url),
  shang: new URL('@/assets/images/device-control/shang.png', import.meta.url),
  youshang: new URL('@/assets/images/device-control/youshang.png', import.meta.url),
  zuo: new URL('@/assets/images/device-control/zuo.png', import.meta.url),
  shuaxin: new URL('@/assets/images/device-control/shuaxin.png', import.meta.url),
  you: new URL('@/assets/images/device-control/you.png', import.meta.url),
  zuoxia: new URL('@/assets/images/device-control/zuoxia.png', import.meta.url),
  xia: new URL('@/assets/images/device-control/xia.png', import.meta.url),
  youxia: new URL('@/assets/images/device-control/youxia.png', import.meta.url),
  fangda: new URL('@/assets/images/device-control/fangda.png', import.meta.url),
  suoxiao: new URL('@/assets/images/device-control/suoxiao.png', import.meta.url),
  guangquanfangda: new URL('@/assets/images/device-control/guangquanfangda.png', import.meta.url),
  guangquansuoxiao: new URL('@/assets/images/device-control/guangquansuoxiao.png', import.meta.url),
  jiaodianqianyi: new URL('@/assets/images/device-control/jiaodianqianyi.png', import.meta.url),
  jiaodianhouyi: new URL('@/assets/images/device-control/jiaodianhouyi.png', import.meta.url),
}

const direction = ref<any[]>([
  {
    name: '左上',
    img: img.zuoshang,
    instruction: 'left_up',
  },
  {
    name: '上',
    img: img.shang,
    instruction: 'up',
  },
  {
    name: '右上',
    img: img.youshang,
    instruction: 'right_up',
  },
  {
    name: '左',
    img: img.zuo,
    instruction: 'left',
  },
  {
    name: '刷新',
    img: img.shuaxin,
    instruction: 'GOTO_PRESET',
  },
  {
    name: '右',
    img: img.you,
    instruction: 'right',
  },
  {
    name: '左下',
    img: img.zuoxia,
    instruction: 'left_down',
  },
  {
    name: '下',
    img: img.xia,
    instruction: 'down',
  },
  {
    name: '右下',
    img: img.youxia,
    instruction: 'right_down',
  },
])
const focus = ref<any>([
  {
    name: '缩小',
    img: img.suoxiao,
    instruction: '',
  },
  {
    name: '放大',
    img: img.fangda,
    instruction: '',
  },
  {
    name: '焦点后移',
    img: img.jiaodianhouyi,
    instruction: '',
  },
  {
    name: '焦点前移',
    img: img.jiaodianqianyi,
    instruction: '',
  },
  {
    name: '光圈缩小',
    img: img.guangquansuoxiao,
    instruction: '',
  },
  {
    name: '光圈放大',
    img: img.guangquanfangda,
    instruction: '',
  },
])
const speedValue = ref(100)
// 控制
const control = (type: string) => {
  const ele = document.getElementById(type) as HTMLElement
  ele.setAttribute('style', 'padding: 5px')
  setTimeout(() => {
    ele.setAttribute('style', 'padding: 8px')
  }, 100)
}
const jumpUP = ref(false) // 跳过鼠标挑起
// 鼠标按下和抬起
const controlVideo = (type: string, instruction: string) => {
  if (type === 'end' && jumpUP.value) {
    return
  }
  if (!$props.deviceId) {
    ElMessage.warning('设备ID为空,无法控制')
    jumpUP.value = true
    setTimeout(() => {
      jumpUP.value = false
    }, 100);
    return
  }
  if (!instruction) {
    ElMessage.warning('指令为空,无法控制')
    jumpUP.value = true
    setTimeout(() => {
      jumpUP.value = false
    }, 100);
    return
  }
  const instructionContent = {
    deviceId: $props.deviceId,
    speed: speedValue.value,
    command: instruction,
    cameraAction: type === 'start' ? '0' : '1',
    presetIndex: 1
  }
  controlVideoTurn(instructionContent).then(res => {

  }).catch(() => {
    ElMessage.warning('操作失败')
  })
}
</script>

<template>
  <div class="container">
    <div class="left">
      <el-tooltip v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
        placement="top">
        <img :id="item.name" :src="item.img" class="img" :alt="item.name"
          @mouseup="controlVideo('end', item.instruction)" @mousedown="controlVideo('start', item.instruction)"
          @click="control(item.name)">
      </el-tooltip>
    </div>
    <div class="right">
      <el-tooltip v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
        placement="top">
        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @mouseup="controlVideo('end', item.instruction)" @mousedown="controlVideo('start', item.instruction)" @click="control(item.name)">
      </el-tooltip>
    </div>
    <div class="slider">
      <el-slider v-model="speedValue" show-input />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .left {
    width: 55%;
    // background-color: aqua;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .img {
      width: 31%;
      border: 2px solid #777;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 5px;
      margin-bottom: 6px;
      opacity: 0.6;

      &:hover {
        // padding: 8px;
        cursor: pointer;
      }
    }
  }

  .right {
    width: 34%;
    // background-color: chartreuse;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .img {
      width: 48%;
      border: 2px solid #777;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 5px;
      margin-bottom: 6px;
      opacity: 0.6;

      &:hover {
        // padding: 8px;
        cursor: pointer;
      }
    }
  }

  .slider {
    margin-top: 10px;
    width: 100%;
  }
}
</style>