<script lang="ts" setup name="ResourceList">
import type { Ref } from 'vue'
import { getCurrentInstance, nextTick, reactive, ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from 'lodash-es'
import { videoTree } from '@/api/ycjg/aqbb'
import { initPlugin, login, logout, preview, stop } from '@/utils/HKVideo'
import { loginDH } from '@/utils/DHVideo'
import { log } from '@/utils/log'
const router = useRouter()

const treeRef: any = ref(null)
const filterText = ref('')
const data = ref([])

const defaultProps = ref({
  children: 'children',
  label: 'name',
  isDisabled: 'disabled',
})

const { proxy } = getCurrentInstance() as any
const width = ref(0)
const height = ref(0)
const loading = ref(false)
const refreshHK = ref(true)
const ishk = ref([false, false, false, false])
const dhPlayer = [null, null, null, null]
const title = ref(['', '', '', ''])
let treeClickCount = 0
let currentIndex = 0
const currentCameras: any = [{}, {}, {}, {}]

const resize = debounce(() => {
  currentCameras.forEach((data: any, index: number) => {
    if (data?.device?.nvrManufacture === 'HIKVISION') { //  海康
      stop(index)
    }
  })
  refreshHK.value = true
  nextTick(() => {
    initPlugin(width.value, height.value, 2, '', false, () => {
      currentCameras.forEach((data: any, index: number) => {
        if (data?.device?.nvrManufacture === 'HIKVISION') { //  海康
          setTimeout(() => {
            preview(data.device.nvrIp, '80', data.device.nvrUser, data.device.nvrPassword, index, true, data.device.nvrChannel)
          }, 1000)
        }
        else if (data?.device?.nvrManufacture === 'Dahua') { // 大华
          try {
            loginDH(data.device.nvrIp, '80', data.device.nvrUser, data.device.nvrPassword, data.device.nvrChannel, index).then((result: any) => {
              dhPlayer[index] = result
            })
          }
          catch (e) {}
        }
      })
    }, () => {
    })
  })
}, 1000)

const handleResize = () => {
  refreshHK.value = false
  const hkPlugin: any = document.getElementById('home')
  width.value = hkPlugin.clientWidth
  height.value = hkPlugin.clientHeight
  resize()
}

function filterNode(value: any, data: { name: string | any[] }) {
  if (value === '' || value === null) {
    return true
  }
  return data.name.includes(value)
}

const resizePage = () => {
  setTimeout(() => {
    const resize = new Event('resize')
    window.dispatchEvent(resize)
  }, 200)
}

function handleNodeClick(data: any, node: any, self: any) {
  if (data.device.deviceStatusName === '离线') {
    ElMessage.warning(`设备 ${data.device.monitorName} 离线`)
    return false
  }
  const now = new Date().getTime()
  if (now - treeClickCount < 300) { // 双击事件的判断，300毫秒内重复点击
    if (data.children.length !== 0) { // 点击父亲
      return
    }
    for (let i = 0; i < currentIndex; i++) { // 前面有
      if (currentCameras[i].device.id === data.device.id) {
        return
      }
    }
    // 这里处理双击事件
    if (currentIndex === 4) {
      currentIndex = 0
    }
    console.log('Double click on:', data)
    console.log(currentCameras)
    if (currentCameras[currentIndex]?.device?.nvrManufacture === 'HIKVISION') {
      logout(currentCameras[currentIndex].device.nvrIp)
      stop(currentIndex)
    }
    else if (currentCameras[currentIndex]?.device?.nvrManufacture === 'Dahua') {
      dhPlayer[currentIndex]?.close()
    }
    // proxy.showLoading()
    currentCameras[currentIndex] = data
    title.value[currentIndex] = data.device.monitorName.replace('-', ' - ')
    initVideo(currentCameras[currentIndex], currentIndex)
    log('场景监控', `${data.device.monitorName}`)
    currentIndex++
    // resizePage()
  }
  treeClickCount = now
}

function initVideo(data: any, index: number) {
  if (data?.device?.nvrManufacture === 'HIKVISION') { //  海康
    ishk.value[index] = true
    login(data.device.nvrIp, '80', data.device.nvrUser, data.device.nvrPassword, index, true, data.device.nvrChannel)
  }
  else if (data?.device?.nvrManufacture === 'Dahua') { // 大华
    ishk.value[index] = false
    try {
      loginDH(data.device.nvrIp, '80', data.device.nvrUser, data.device.nvrPassword, data.device.nvrChannel, index).then((result: any) => {
        dhPlayer[index] = result
      })
    }
    catch (e) {}
  }
}
function dbClickHK(e: any) {
  switch (e.srcElement.id) {
    case 'canvas_draw0':
      cbDoubleClickWnd(0, null, null)
      break
    case 'canvas_draw1':
      cbDoubleClickWnd(1, null, null)
      break
    case 'canvas_draw2':
      cbDoubleClickWnd(2, null, null)
      break
    case 'canvas_draw3':
      cbDoubleClickWnd(3, null, null)
      break
  }
}
function cbDoubleClickWnd(iWndIndex: string | number, bFullScreen: any, event: any) { // todo
  if (currentCameras[iWndIndex].device !== undefined) {
    router.push({
      path: '/ssjk/control',
      query: {
        id: currentCameras[iWndIndex].id,
      },
    })
  }
}

const unwatch = watch(filterText, (newVal) => {
  treeRef.value.filter(newVal)
})

function solveData(data: any) {
  data.forEach((item: any) => {
    if (item.device) {
      item.name = `${item.name} (${item.device.deviceStatusName})`
      item.deviceStatusName = item.device.deviceStatusName // 设备状态
      console.log('修改后的name', item.name)
    }
    if (item.children && item.children.length) {
      solveData(item.children)
    }
  })
  return data
}

onBeforeUnmount(() => {
  unwatch()
  currentCameras.forEach((item: any, index: any) => {
    if (ishk.value[index]) {
      logout(item.device.nvrIp)
      stop(index)
    }
  })
  window.removeEventListener('resize', handleResize)
})

onMounted(() => {
  videoTree().then((response) => {
    if (response.code === 200) {
      data.value = response.data
      // console.log('获取树的列表', data.value)
      data.value = solveData(data.value)
      console.log('修改后树的列表', data.value)
    }
  })
  setTimeout(() => {
    handleResize()
    window.addEventListener('resize', handleResize)
  }, 200)
})
</script>

<template>
  <app-container style="height: calc(100vh - 110px);">
    <div style="display: flex;height: 100%;">
      <el-card class="left">
        <el-input
          v-model="filterText"
          placeholder="设备名称过滤"
        />
        <el-tree
          ref="treeRef"
          class="filter-tree"
          style="width: 100%;height: 100%;"
          :data="data"
          :filter-node-method="filterNode"
          node-key="id"
          :default-expand-all="true"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <template #default="{ node }">
            <span style="display: flex;align-items: center;">
              <el-icon v-if="node.label.slice(node.label.indexOf('(')) === '(在线)'" style="margin-right: 5px">
                <svg-icon name="icon-online" />
              </el-icon>
              <el-icon v-if="node.label.slice(node.label.indexOf('(')) === '(离线)'" style="margin-right: 5px">
                <svg-icon name="icon-offline" />
              </el-icon>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="node.label"
                placement="right"
              >
                <span v-if="node.label.indexOf('(') === -1">{{ node.label }}</span>
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="node.label.slice(0, node.label.indexOf('('))"
                placement="right"
              >
                <span v-if="node.label.indexOf('(') !== -1" :style="{ color: node.label.slice(node.label.indexOf('(')) === '(在线)' ? '#0e932e' : '#606266' ,  'font-weight': node.label.slice(node.label.indexOf('(')) === '(在线)' ? 600 : 500 }">{{ node.label.slice(0, node.label.indexOf('(')) }}</span>
              </el-tooltip>
              <!-- <span v-if="node.label.slice(node.label.indexOf('(')) === '(在线)' || node.label.slice(node.label.indexOf('(')) === '(离线)'" :style="{ color: node.label.slice(node.label.indexOf('(')) === '(在线)' ? 'green' : 'red' ,  'font-weight': 600 }">{{ node.label.slice(node.label.indexOf('(')) }}</span> -->
            </span>
          </template>
        </el-tree>
      </el-card>
      <div id="home" class="right">
        <div v-if="refreshHK" id="hkPlugin" :style="`width:${width}px;height:${height}px;`" class="plugin videoControl-new" @dblclick="dbClickHK" />
        <video v-if="!ishk[0]" id="dhVideo0" class="dhControl" :style="`width:${width / 2}px;height:${height / 2}px;`" style="top: 10px;left: 348px;" @dblclick="cbDoubleClickWnd(0, null, null)" />
        <canvas v-if="!ishk[0]" id="dhCanvas0" class="dhCanvas" :style="`width:${width / 2}px;height:${height / 2}px;`" style="top: 10px;left: 348px;" @dblclick="cbDoubleClickWnd(0, null, null)" />
        <video v-if="!ishk[1]" id="dhVideo1" class="dhControl" :style="`width:${width / 2}px;height:${height / 2}px;`" style="top: 10px;right: 40px;" @dblclick="cbDoubleClickWnd(1, null, null)" />
        <canvas v-if="!ishk[1]" id="dhCanvas1" class="dhCanvas" :style="`width:${width / 2}px;height:${height / 2}px;`" style="top: 10px;right: 40px;" @dblclick="cbDoubleClickWnd(1, null, null)" />
        <video v-if="!ishk[2]" id="dhVideo2" class="dhControl" :style="`width:${width / 2}px;height:${height / 2}px;`" style="bottom: 10px;left: 348px;" @dblclick="cbDoubleClickWnd(2, null, null)" />
        <canvas v-if="!ishk[2]" id="dhCanvas2" class="dhCanvas" :style="`width:${width / 2}px;height:${height / 2}px;`" style="bottom: 10px;left: 348px;" @dblclick="cbDoubleClickWnd(2, null, null)" />
        <video v-if="!ishk[3]" id="dhVideo3" class="dhControl" :style="`width:${width / 2}px;height:${height / 2}px;`" style="bottom: 10px;right: 40px;" @dblclick="cbDoubleClickWnd(3, null, null)" />
        <canvas v-if="!ishk[3]" id="dhCanvas3" class="dhCanvas" :style="`width:${width / 2}px;height:${height / 2}px;`" style="bottom: 10px;right: 40px;" @dblclick="cbDoubleClickWnd(3, null, null)" />

        <div class="video-desc title1" @dblclick="cbDoubleClickWnd(0, null, null)">
          {{ title[0] }}
        </div>
        <div class="video-desc title2" @dblclick="cbDoubleClickWnd(1, null, null)">
          {{ title[1] }}
        </div>
        <div class="video-desc title3" @dblclick="cbDoubleClickWnd(2, null, null)">
          {{ title[2] }}
        </div>
        <div class="video-desc title4" @dblclick="cbDoubleClickWnd(3, null, null)">
          {{ title[3] }}
        </div>
        <div style="width: calc(100% - 388px);left: 348px; border-top: 2px solid #71b5ff;position: absolute;top: 50%;z-index: 1111111111;" />
        <div style="height: calc(100% - 20px); border-left: 2px solid #71b5ff;position: absolute;top: 10px;left: calc(50% + 153px);z-index: 1111111111;" />
      </div>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.video-desc {
  position: absolute;
  z-index: 1000;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
  background: linear-gradient(180deg, #71b5ff, #4384ff);
  color: white;
  font-weight: bold;
  padding-top: 20px;
  width: 30px;
  height: calc(50% - 10px) !important;
}

.title1 {
  top: 10px;
  left: 318px;
  border-radius: 15px 0 0 15px;
  padding-left: 6px;
}

.title2 {
  top: 10px;
  right: 10px;
  border-radius: 0 15px 15px 0;
  padding-left: 6px;
}

.title3 {
  bottom: 10px;
  left: 318px;
  border-radius: 15px 0 0 15px;
  padding-left: 6px;
}

.title4 {
  bottom: 10px;
  right: 10px;
  border-radius: 0 15px 15px 0;
  padding-left: 6px;
}

.dhCanvas {
  // height: calc(50% - 10px) !important;
  // width: calc(50% - 195px) !important;
  position: absolute;
}

.dhControl {
  // height: calc(50% - 10px) !important;
  // width: calc(50% - 195px) !important;
  position: absolute;
  background-color: #111;
}

.videoControl {
  height: calc(100% - 10px) !important;
  width: calc(50% - 25px) !important;
  margin-left: 10px;
  margin-top: 10px;
  position: relative;
  background-color: #111;
}

.videoControl-new {
  position: absolute;
  background-color: #111;
}

.left {
  width: 300px;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
}

.right {
  width: calc(100% - 368px);
  height: 100%;
  margin-left: 38px;
  background: #111;
}

.video-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

video {
  position: relative;
  object-fit: fill;
  overflow: hidden;
  background: #000;
}
</style>