<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 { getMediaStream, getMediaToken } from '@/api/ycjg/media'
const router = useRouter()
const mediaToken = ref('') // 流媒体token
const treeRef = ref(null) as any
const filterText = ref('')
const data = ref([])
const baseurl = ref(window.location.href.split('/#')[0])
console.log('baseurl', baseurl.value)
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 resize = () => {
  const divPlugin = document.getElementById('home') as any
  console.log(divPlugin)
  width.value = divPlugin.clientWidth / 2 - 20
  height.value = divPlugin.clientHeight / 2 - 5
}

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 = [{}, {}, {}, {}] as any

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毫秒内重复点击
    console.log('Double click on:', data)
    if (data.children.length !== 0) { // 点击父亲
      return
    }
    // for (let i = 0; i < currentIndex; i++) { // 前面有
    //   if (src.value[i] === data.url) {
    //     return
    //   }
    // }
    // 这里处理双击事件
    if (currentIndex === 4) {
      currentIndex = 0
    }
    // 获取视频流接口
    fetchMediaStream(data.device.cameraIndexCode, data.device.nvrIndexCode).then((res: any) => {
      src.value[currentIndex] = `${res}?token=${window.localStorage.getItem('token')}`
      currentCameras[currentIndex] = data
      currentIndex++
    })
    // src.value[0] = 'http://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000003.live.mp4'
    // currentCameras[currentIndex] = data
    // currentIndex++
  }
  treeClickCount = now
}

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

// 拉取流
async function fetchMediaStream(deviceId: string, channelId: string) {
  loading.value = true
  const res = await getMediaStream(deviceId, channelId, mediaToken.value)
  loading.value = false
  if (res && res.data) {
    console.log(res.data)
    return res.data.fmp4
  }
  else {
    ElMessage.warning('设备未注册')
  }
}

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
    }
  })
  // 获取流媒体token
  getMediaToken().then((res: any) => {
    mediaToken.value = res.data
  })
  resize()
  window.addEventListener('resize', resize)
})
</script>

<template>
  <app-container v-loading="loading" 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"
        />
      </el-card>
      <div id="home" class="right">
        <div class="video-container">
          <!-- <iframe
            :src="`${baseurl}/player/player.html?playUrl=${src[0]}`"
            frameborder="0"
            :style="{ width: `${width}px`, height: `${height}px` }"
            style="margin-right: 5px;"
          /> -->
          <!-- <iframe
            :src="`${baseurl}/player/player.html?playUrl=${src[1]}`"
            frameborder="0"
            :style="{ width: `${width}px`, height: `${height}px` }"
          /> -->
          <video id="video0" :src="src[0]" muted controls autoPlay :width="width" :height="height" style="margin-right: 5px;" @dblclick="page(0)" />
          <video id="video1" :src="src[1]" muted controls autoPlay :width="width" :height="height" @dblclick="page(1)" />
        </div>
        <div class="video-container">
          <!-- <iframe
            :src="`${baseurl}/player/player.html?playUrl=${src[2]}`"
            frameborder="0"
            :style="{ width: `${width}px`, height: `${height}px` }"
            style="margin-right: 5px;"
          /> -->
          <!-- <iframe
            :src="`${baseurl}/player/player.html?playUrl=${src[3]}`"
            frameborder="0"
            :style="{ width: `${width}px`, height: `${height}px` }"
          /> -->
          <video id="video2" :src="src[2]" muted controls autoPlay :width="width" :height="height" style="margin-right: 5px;" @dblclick="page(2)" />
          <video id="video3" :src="src[3]" muted controls autoPlay :width="width" :height="height" @dblclick="page(3)" />
        </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>