<script lang="ts" setup name="videoControl">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Ref } from 'vue'
import { getCurrentInstance, reactive, ref } from 'vue'
import dayjs from 'dayjs'
import useWebsocketStore from '@/store/modules/websocket'
import { initPlugin, login, logout, onlyLogin, preview } from '@/utils/HKVideo'
import controlImg from '@/assets/images/control.png'
import type { lineDataI } from '@/components/Echart/echart-interface'
import { delAlarm, getAlarmListPage } from '@/api/ptz/alarm'
import { getDataHisList, getDevInfo, restartDev } from '@/api/ptz/dev'
import useSettingsStore from "@/store/modules/settings";
import {ptzControl, ptzFour} from "@/api/home/robot/ptz";
import {robotDetail, robotFour, robotWV} from "@/api/home/robot/robot";

const settingsStore = useSettingsStore()
const websocket = useWebsocketStore()
const $route = useRoute()

const realw = ref('****')
const realv = ref('****')
const realppm = ref('****')
const realpower = ref('****')
const devCH4Loading = ref(false)
const devCH4XData: Ref<string[]> = ref([])
const devCH4Data: Ref<lineDataI[]> = ref(ref([{name: '检测数值', data: []}]))
const devCH4YDataMax = ref()
const instance = getCurrentInstance()
const loading = ref(false)
const videoControl = ref('videoControl')
const selectPoint = ref('')
const controlSpeed = ref(7)
const divPlugin = ref(null)
const lineList: Ref<any[]> = ref([])
const pointList: Ref<any[]> = ref([])
const pointName = ref('')
const wv = ref({w: '', v: ''})
const robotRun = ref({w: 0, v: 0, isStop: true})
const timer = ref()

// socket更新数据
const unwatch = watch(websocket, (newVal) => {
  if (newVal.robotData && Object.keys(newVal.robotData).length >= 1 ) {
    realppm.value = newVal.robotData.gasData
    realw.value = newVal.robotData.robotW
    realv.value = newVal.robotData.robotV
    realpower.value = Number(newVal.robotData.voltage)/10
  } else if (newVal.psdData && Object.keys(newVal.psdData).length >= 1 && settingsStore.robot.id === newVal.psdData.robotId ) {
    // 判断折现数据长度
    if (devCH4XData.value.length > 300) {
      devCH4XData.value.splice(0, 100)
      devCH4Data.value[0].data.splice(0, 100)
    }
    devCH4XData.value = [...devCH4XData.value, newVal.psdData.time]
    devCH4Data.value = [{name: '检测数值', data: devCH4Data.value[0].data.concat(newVal.psdData.psd)}]
  }
})

// 复位
function fw() {
  restartDev(settingsStore.robot.ptzInfo?.doorIp, settingsStore.robot.ptzInfo?.doorSn).then(() => {
    ElMessage.success('复位成功')
  })
}

// 调整大小
const resize = () => {
  WebVideoCtrl.I_Resize(divPlugin.value.clientWidth, divPlugin.value.clientHeight)
}


// 右下角6个按钮
function control(command: string, isStop: string) {
  const params = {
    deviceIp: settingsStore.robot.ptzInfo.deviceIp,
    robotId: settingsStore.robot.id,
    command,
    isStop,
  }
  ptzControl(params).then(() => {
    // ElMessage.success('放大成功')
  })
}

function getWV() {
  robotDetail({
    id: settingsStore.robot.id,
  }).then((res) => {
    if(res.code === 200) {
       wv.value.w = res.data.robotW
       wv.value.v = res.data.robotV
    }
  })
}
// 修改wv
function changeWV() {
  if(wv.value.v === '' || wv.value.w === '') {
    return
  }
  robotWV({
    id: settingsStore.robot.id,
    confV: wv.value.v,
    confW: wv.value.w,
  }).then((res) => {
    if(res.code === 200) {
      ElMessage.success('速度设置成功')
      getWV()
    }

  })
}

// 云台上下左右
function controlWithSpeed(event: { detail: number }, type: any, isStop: any) {
  // console.log(event.detail, type, isStop)
  if (event.detail === 1) {
    const params = {
      deviceIp: settingsStore.robot.ptzInfo.deviceIp,
      robotId: settingsStore.robot.id,
      command: type,
      isStop,
      // speed: controlSpeed.value.toString(),
    }
    ptzFour(params).then(() => {})
  }
}

// 登录设备
function loginDevice() {
  login(
    settingsStore.robot.ptzInfo?.deviceIp,
    '80',
    settingsStore.robot.ptzInfo?.deviceUser,
    settingsStore.robot.ptzInfo?.devicePassword,
    0)
}

onMounted(() => {
  setTimeout(() => {
    initPlugin(1, '', false, loginDevice, null)
    divPlugin.value = document.getElementById('divPlugin')

    getWV()
    // 机器人控制
    timer.value = setInterval(function() {
      if(robotRun.value.isStop) return
      const params = {
        action: 0,
        priority: 0,
        robotId: settingsStore.robot.id,
        w: robotRun.value.w,
        v: robotRun.value.v,
      }
      robotFour(params).then(() => {})
    }, 500); // 每隔0.5秒执行一次

    // 甲烷历史浓度
    // getCH4()
    window.addEventListener('resize', resize)
  }, 200)
})

onBeforeUnmount(() => {
  WebVideoCtrl.I_Resize(0, 0)
  unwatch()
  logout(settingsStore.robot.ptzInfo?.deviceIp)
  timer.value && clearInterval(timer.value)
  window.location.reload()
  window.removeEventListener('resize', resize)
})
</script>

<template>
  <div class="video-wrap">
    <div class="left-container">
      <div class="control-title" style="writing-mode: vertical-rl;text-orientation: upright;width: 40px;height: 100px;margin-left: -10px">实时监控</div>
      <div class="ppm-line">
        <line-chart :x-axis-data="devCH4XData" width="100%" :data="devCH4Data" unit="" :grid="{ top: 10, left: 10, right: 10, bottom: 20, containLabel: true }" />
      </div>
      <div style="border-radius: 10px;padding: 10px;margin: 0px 5px;height: 63%;background: linear-gradient(#224a98, #102c5d)">
        <div style="display: flex;flex-wrap: wrap;height: calc(100% - 150px)">
<!--          <div class="data-monitor">浓 度：<h>{{realppm}}</h></div>-->
          <div class="data-monitor" style="width: 100%">电池数据：<h>{{realpower}} V</h></div>
          <div class="data-monitor">线速度：<h>{{realv}} m/s</h></div>
          <div class="data-monitor">角速度：<h>{{realw}} rad/s</h></div>
          <div class="control-title" style="margin-left: -5px">速度设置</div>
          <div class="data-monitor" style="width: 100%;">
            线速度：<el-input-number v-model="wv.v" :precision="2" :step="0.1" @change="changeWV"/>
          </div>
          <div class="data-monitor" style="width: 100%;">
            角速度：<el-input-number v-model="wv.w" :precision="2" :step="0.1" @change="changeWV"/>
          </div>
        </div>
        <div style="height: 150px;">
          <div class="control-title l-3" style="left: 0%;position: static;">云台控制</div>
          <el-image style="width: 130px; height: 130px;position: absolute;bottom: 10px;left: 60px" :src="controlImg" fit="fill" />
<!--          <el-icon style="position: absolute;bottom: 62px;left: 113px;z-index: 1111111;color: #626262;font-size: 24px;font-weight: bold;cursor: pointer" title="复位" @click="fw"><Refresh/></el-icon>-->
          <div class="round-btn" style="bottom: 95px;left: 105px" @mousedown="controlWithSpeed($event, 'up', 0)" @mouseup="controlWithSpeed($event, 'up', 1)" />
          <div class="round-btn" style="bottom: 13px;left: 105px" @mousedown="controlWithSpeed($event, 'down', 0)" @mouseup="controlWithSpeed($event, 'down', 1)" />
          <div class="round-btn" style="bottom: 53px;left: 63px" @mousedown="controlWithSpeed($event, 'left', 0)" @mouseup="controlWithSpeed($event, 'left', 1)" />
          <div class="round-btn" style="bottom: 53px;left: 145px" @mousedown="controlWithSpeed($event, 'right', 0)" @mouseup="controlWithSpeed($event, 'right', 1)" />
          <div class="control-title l-3" style="left: 240px;">机器人控制</div>
          <el-image style="width: 130px; height: 130px;position: absolute;bottom: 10px;left: 300px" :src="controlImg" fit="fill" />
          <div class="round-btn" style="bottom: 13px;left: 345px" @mousedown="robotRun={w: 0,v: -wv.v,isStop: false}" @mouseup="robotRun={w: 0,v: -wv.v,isStop: true}" />
          <div class="round-btn" style="bottom: 95px;left: 345px" @mousedown="robotRun={w: 0,v: wv.v,isStop: false}" @mouseup="robotRun={w: 0,v: wv.v,isStop: true}" />
          <div class="round-btn" style="bottom: 53px;left: 303px" @mousedown="robotRun={w: wv.w,v: 0,isStop: false}" @mouseup="robotRun={w: wv.w,v: 0,isStop: true}" />
          <div class="round-btn" style="bottom: 53px;left: 385px" @mousedown="robotRun={w: -wv.w,v: 0,isStop: false}" @mouseup="robotRun={w: -wv.w,v: 0,isStop: true}" />
        </div>
      </div>
    </div>
    <div id="divPlugin" class="plugin" :class="videoControl" />
      <div class="right-container">
        <div style="width: 100%;text-align: center;">
          <el-button type="primary" round class="btn" @mousedown="control('zoomIn', '0')" @mouseup="control('zoomIn', '1')">
            <el-icon style="margin: 0px 5px 0px -5px"><svg-icon name="icon-zoomin" /></el-icon>放 大
          </el-button>
          <el-button type="primary" round class="btn" @mousedown="control('zoomOut', '0')" @mouseup="control('zoomOut', '1')">
            <el-icon style="margin: 0px 5px 0px -5px"><svg-icon name="icon-zoomout" /></el-icon>缩 小
          </el-button>
          <el-button type="primary" round class="btn" @click="control('clean', '1')">
            <el-icon style="margin: 0px 5px 0px -5px"><svg-icon name="icon-rainon" /></el-icon>雨刷开
          </el-button>
          <el-button type="primary" round class="btn" @click="control('clean', '0')">
            <el-icon style="margin: 0px 5px 0px -5px"><svg-icon name="icon-rainon" /></el-icon>雨刷关
          </el-button>
          <el-button type="primary" round class="btn" @click="control('light', '1')">
            <el-icon style="margin: 0px 5px 0px -5px"><svg-icon name="icon-lighton" /></el-icon>开 灯
          </el-button>
          <el-button type="primary" round class="btn" @click="control('light', '0')">
            <el-icon style="margin: 0px 5px 0px -5px"><svg-icon name="icon-lightoff" /></el-icon>关 灯
          </el-button>
        </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.video-wrap {
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  flex-wrap: wrap;
  background: white;
}
.videoControl {
  float: right;
  height: 88%;
  width: 65%;
  position: relative;
}
.left-container {
  width: 35%;
  height: 100%;
}
.right-container {
  width: 65%;
  height: 8%;
  position: absolute;
  bottom: 5px;
  right: 10px;
}
.bottom {
  width: 80%;
  height: 25%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: 10px;
  background-color: red;
}
.box-card {
  width: 100%;
  height: calc(50% - 5px);
  margin-bottom: 5px;
  padding: 5px !important;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  overflow: hidden;
}
.control-title {
  color: white;
  background-color: #ff9f11;
  border-radius: 10px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}
.l-3 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: 30px;
  height: 100px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  margin-left: -10px;
  position: relative;
  bottom: 100px;
}
.set-btn {
  margin-left: 10px;
  width: 80px;
 }

.btn-contain {
  margin-left: 10%;
  width: 55%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: center;
}
.btn {
  width: 13%;
  height: 40px;
  font-size: 16px;
}
.data-monitor {
  margin: 0px 5px;
  color: #a6cbff;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 5px;
  width: 44%;
  height: 33px;
  h {
    padding-left: 10px;
    color: white;
    //font-weight: normal;
    font-size: 16px;
  }
}
.ppm-line {
  margin-left: 35px;
  margin-top: -100px;
  height: 35%;
  margin-bottom: 10px;
  flex: 1;
}
.el-message-box {
  position: absolute !important;
  top: calc(50% - 68px) !important;
  left: 100px !important;
}
.ptz-control {
  width: 400px;
  position: absolute;
  right: 18%;
  top: 5px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.round-btn {
  position: absolute;
  width: 42px;
  height: 42px;
  z-index: 111111;
  border-radius: 21px;
  cursor: pointer;
}
.round-btn:hover {
  background-color: rgba(61, 125, 254, 0.53);
}
.icon-button {
  background-color: #d6e5fc;
  border-color: #d6e5fc;
  padding: 6px;
  border-radius: 6px;
  color: #4384ff;

  :deep(.el-icon) {
    width: 18px;
    height: 18px;
  }

  &:hover {
    background-color: #c3dafd;
    color: #fff;
  }
}
</style>