<script lang="ts" setup name="xttc">
import type { Ref } from 'vue'
import { getCurrentInstance, reactive, ref } from 'vue'
import useWebsocketStore from '@/store/modules/websocket'
import controlImg from '@/assets/images/control.png'
import type { lineDataI } from '@/components/Echart/echart-interface'
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";
import dayjs from 'dayjs'
import {getConfigList, getDevList, tcyControl} from "@/api/home/tcy/tcy";
import {ElMessage} from "element-plus";

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

const devCH4Loading = ref(false)
const devCH4XData: Ref<string[]> = ref([])
const devCH4Data: Ref<lineDataI[]> = ref([{name: '高压通道1-采样', data: []}, {name: '高压通道1-设定', data: []}])
const devCH4YDataMax = ref()
const instance = getCurrentInstance()
const loading = ref(false)

const vol6 = ref(1.2)
const robot = ref({})
const realup = ref('****')
const realdown = ref('****')
const realtime = ref(0)
const realstatus = ref('****')
const realvol6 = ref('****')
// socket更新数据
const unwatch = watch(websocket, (newVal) => {
  if (newVal.detectorVData && Object.keys(newVal.detectorVData).length >= 1 ) {
    // devCH4Loading.value = true
    // 判断折现数据长度
    if (devCH4XData.value.length > 300) {
      devCH4XData.value.splice(0, 100)
      devCH4Data.value[0].data.splice(0, 100)
      devCH4Data.value[1].data.splice(0, 100)
    }
    realvol6.value = newVal.detectorVData.vol

    if(newVal.detectorVData.vol === devCH4Data.value[0].data[devCH4Data.value[0].data.length -1]) {
      realstatus.value = '空闲'
    } else if(newVal.detectorVData.vol > devCH4Data.value[0].data[devCH4Data.value[0].data.length -1]) {
      // 升压
      realstatus.value = '升压'
    } else if(newVal.detectorVData.vol < devCH4Data.value[0].data[devCH4Data.value[0].data.length -1]) {
      // 降压
      realstatus.value = '降压'
    }

    const arr1 = devCH4Data.value[0].data.concat(newVal.detectorVData.vol)
    const arr2 = devCH4Data.value[1].data.concat(vol6.value)
    setTimeout(() => {
      devCH4XData.value = [...devCH4XData.value, dayjs(newVal.detectorVData.time).format('HH:mm:ss')]
      devCH4Data.value = [{name: '高压通道1-采样', data: arr1},{name: '高压通道1-设定', data: arr2}]
    },1)
    // devCH4Loading.value = false
  }
})

function control(command: string) {
  startTime = new Date().getTime()
  if(command === 'start') {
    realup.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
    realstatus.value = '升压'
  } else if(command === 'stop') {
    realdown.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
    realstatus.value = '降压'
  }
  tcyControl({
    detectorId: robot.value.id,
    command
  }).then((res) => {
    if(res.code === 200) {
      ElMessage.success('指令下发成功')
    }
  })
}

let startTime = new Date().getTime();
const elapsedTime = ref(0);


// 更新计时器
const updateTimer = () => {
  const currentTime = new Date().getTime();
  const diff = (currentTime - startTime) / 1000
  elapsedTime.value = Math.floor(diff * 100) / 100
  realtime.value = elapsedTime.value.toFixed(2)
};

// 每10毫秒更新计时器
const timer = setInterval(updateTimer, 100)

onMounted(() => {
  // 设定值
  getDevList({}).then((response) => {
    if(response.code === 200) {
      robot.value = response.data.filter((item: { robotId: any; }) => item.robotId === settingsStore.robot.id)[0]
      getConfigList({detectorId: robot.value.id}).then((res) => {
        if(res.code === 200 && res.data.length !== 0) {
          vol6.value = res.data[0].vol6
        }
      })
    }
  })
  // 计时器
  updateTimer()
})

onBeforeUnmount(() => {
  unwatch()
  clearInterval(timer);

})
</script>

<template>
  <div class="video-wrap">
    <div v-loading="devCH4Loading" style="height: calc(100% - 60px);">
      <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="display: flex;flex-wrap: wrap;padding-top: 20px">
      <div class="data-monitor" style="width: 320px">上次升压开始时间:<h>{{realup}}</h></div>
      <div class="data-monitor" style="width: 320px">上次降压开始时间:<h>{{realdown}}</h></div>
      <div class="data-monitor">持续时间:<h>{{realtime}}</h></div>
      <div class="data-monitor">当前状态:<h>{{realstatus}}</h></div>
      <div class="data-monitor">通道1:<h>{{realvol6}}</h></div>
      <el-button type="primary" @click="control('start')">
        <ArrowUpBold style="width: 1em; height: 1em; margin-right: 8px"/>升 压
      </el-button>
      <el-button type="primary" @click="control('stop')">
        <ArrowDownBold style="width: 1em; height: 1em; margin-right: 8px" />降 压
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.video-wrap {
  width: 100%;
  height: calc(100vh - 110px);
  padding: 10px;
}
.right-container {
  width: 200px;
  height: 100%;
  position: absolute;
  bottom: 5px;
  right: 10px;
  padding: 10px;
}
.control-title {
  color: white;
  background-color: #ff9f11;
  border-radius: 10px;
  width: 160px;
  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;
  margin: 10px 0;
}
.data-monitor {
  margin: 0px 5px;
  color: #040405;
  //font-weight: bold;
  padding: 5px 20px;
  height: 45px;
  font-size: 14px;
  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
  h {
    padding-left: 10px;
    color: #5b9dfc;
    font-weight: bold;

    font-size: 16px;
  }
}
</style>