<script lang="ts" setup name="ResourceList">
import type { Ref } from 'vue'
import { getCurrentInstance, nextTick, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { videoTree } from '@/api/ycjg/aqbb'
import { log } from '@/utils/log'
import dayjs from 'dayjs'
import { getPreviewUrl } from '@/utils/hik'
const router = useRouter()

const treeRef = 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 src = ref(['', '', '', ''])
const player = ref(null)

const resize = () => {
  const divPlugin = document.getElementById('home')
  width.value = divPlugin!.clientWidth - 40
  height.value = divPlugin!.clientHeight - 0
  if (player.value !== null) {
    player.value!.JS_Resize()
  }
}

let videoClickCount = 0

function createPlayer() {
  player.value = new window.JSPlugin({
    szId: 'player',
    szBasePath: './',
    iMaxSplit: 4,
    iCurrentSplit: 2,
    openDebug: true,
    bSupporDoubleClickFull: false,
    iWidth: width.value,
    iHeight: height.value,
    oStyle: {
      borderSelect: '#FFCC00',
    },
  })

  // 事件回调绑定
  player.value.JS_SetWindowControlCallback({
    windowEventSelect: function (iWndIndex: any) { // 插件选中窗口回调
      console.log('windowSelect callback: ', iWndIndex)
      const now = new Date().getTime()
      if (now - videoClickCount < 300) { // 双击事件的判断，300毫秒内重复点击
        page(iWndIndex)
      }
      videoClickCount = now
    },
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
      console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
    },
    windowEventOver: function (iWndIndex) {  //鼠标移过回调
      //console.log(iWndIndex);
    },
    windowEventOut: function (iWndIndex) {  //鼠标移出回调
      //console.log(iWndIndex);
    },
    windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
      //console.log(iWndIndex);
    },
    windowFullCcreenChange: function (bFull) {  //全屏切换回调
      console.log('fullScreen callback: ', bFull);
    },
    firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
      console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
    },
    performanceLack: function () {  //性能不足回调
      console.log('performanceLack callback: ');
    },
  })
}

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

let treeClickCount = 0
let currentIndex = 0
const currentCameras = [{}, {}, {}, {}]

async function handleNodeClick(data: any, node: any, self: any) {
  const now = new Date().getTime()
  if (now - treeClickCount < 300) { // 双击事件的判断，300毫秒内重复点击
    console.log('Double click on:', data)
    if (data.device === '') { // 点击父亲
      return
    }
    const playUrl = await getPreviewUrl(data.device.cameraIndexCode)
    for (let i = 0; i < currentIndex; i++) { // 前面有
      if (src.value[i] === playUrl) {
        return
      }
    }
    // 这里处理双击事件
    if (currentIndex === 4) {
      currentIndex = 0
    }
    console.log(playUrl)
    log('实时监控预览', `${data.name}-${dayjs().format('YYYY-MM-DD HH:mm:ss')}`)
    player.value!.JS_Play(playUrl, { playURL: playUrl, mode: 0 }, currentIndex).then(
      () => { console.log('realplay success') },
      (e: any) => { console.error(e) },
    )
    src.value[currentIndex] = playUrl
    currentCameras[currentIndex] = data
    currentIndex++
  }
  treeClickCount = now
}

function page(index: any) {
  if (src.value[index] !== '') {
    router.push({
      path: '/ssjk/control',
      query: {
        id: currentCameras[index].id,
      },
    })
  }
}

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

onBeforeUnmount(() => {
  unwatch()
  window.removeEventListener('resize', resize)
})

onMounted(() => {
  videoTree().then((response) => {
    if (response.code === 200) {
      data.value = response.data
    }
  })
  setTimeout(() => {
    window.addEventListener('resize', resize)
    resize()
    createPlayer()
  }, 1000)
})
</script>

<template>
  <app-container style="height: calc(100vh - 110px)">
    <div style="display: flex;height: 100%">
      <el-card class="left">
        <el-input
          placeholder="设备名称过滤"
          v-model="filterText">
        </el-input>
        <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"/>
      </el-card>
      <div id="home" class="right">
        <div id="player" :style="`width:${width}px;height:${height}px;`" style="margin: 0 10px"></div>
      </div>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.left {
  width: 300px;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;

}
.right {
  flex: 1;
  margin-left: 10px;
}
.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>