<script lang="ts" setup name="ResourceList">
import type { Ref } from 'vue'
import { ElLoading } from 'element-plus'
import { getCurrentInstance, nextTick, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import { getPlaybackUrl, getPreviewUrl } from '@/utils/hik'
import { getMediaStream, getMediaToken, querySceneReplayList, startReplay, endReplay } from '@/api/ycjg/media'
import { videoTree } from '@/api/ycjg/aqbb'
const router = useRouter()
const mediaToken = ref('') // 流媒体token
const treeRef = ref(null) as any
const filterText = ref('')
const deviceData: Ref<any> = ref({})
const timeRange = ref<[any, any]>(['', ''])
const lastCurrentStream = ref({ // 上一个正在播放的流的信息
  deviceId: '', // 设备国标编号
  channelId: '', // 通道国标编号
  stream: '', // 开始播放时返回的stream标识
})
const listQuery = ref({
  id: '',
  startTime: '',
  endTime: '',
})
const mediaUrl = ref('') // 流媒体播放地址
const data = ref([])
const mediaRecordList = ref([])
const defaultProps = ref({
  children: 'children',
  label: 'name',
  isDisabled: 'disabled',
})
const currentTime = ref('')
const player = ref(null) as any

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')
  console.log(divPlugin)
  width.value = divPlugin!.clientWidth - 20
  height.value = divPlugin!.clientHeight - 60
}

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

let treeClickCount = 0

// 双击树节点
function handleNodeClick(data: any, node: any, self: any) {
  if (data.device.deviceStatusName === '离线') {
    ElMessage.warning(`设备 ${data.device.monitorName} 离线`)
    return false
  }
  deviceData.value = data
  const now = new Date().getTime()
  if (now - treeClickCount < 300) { // 双击事件的判断，300毫秒内重复点击
    console.log('Double click on:', data)
    if (data.device === '') { // 点击父亲
      return
    }
    search()
  }
  treeClickCount = now
}
const unwatch = watch(filterText, (newVal) => {
  treeRef.value.filter(newVal)
})

/**
 * 查询回放录像列表
 * @param type tableClick点击查询按钮
 */
function search(type = '') {
  if (deviceData.value && deviceData.value.device) {
    const params = {
      startTime: listQuery.value.startTime, // 开始时间
      endTime: listQuery.value.endTime, // 结束时间
      deviceId: deviceData.value.device.cameraIndexCode, // 监控点唯一标识
      channelId: deviceData.value.device.nvrIndexCode,
      accessToken: mediaToken.value,
    }
    const loading = ElLoading.service({
      lock: true,
      text: '正在查询回放列表，请稍等',
      background: 'rgba(255, 255, 255, 0.8)',
    })
    querySceneReplayList(params).then((res: any) => {
      if (res && res.data && res.data.recordList && res.data.recordList.length) {
        mediaRecordList.value = res.data.recordList
      }
      else {
        ElMessage.warning(`【${deviceData.value.fullName}】此时间段无场景回放!`)
        mediaRecordList.value = []
      }
      loading.close()
    }).catch(() => {
      ElMessage.warning('获取流媒体场景回放列表失败!')
      loading.close()
    })
  }
  else {
    if (type === 'tableClick') {
      ElMessage.warning('请先选中一个设备')
    }
  }
}

// 点击标签
function clickTag(item: any) {
  const now = new Date().getTime()
  if (now - treeClickCount < 300) { // 双击事件的判断，300毫秒内重复点击
    console.log('双击事件的判断，300毫秒内重复点击')
    return
  }
  // console.log(currentTime.value, currentTime.value === `${item.startTime - item.endTime}`)

  if (currentTime.value && currentTime.value === item.startTime + ' - ' + item.endTime) {
    ElMessage.warning('此段时间的流正在播放')
    return
  }
  treeClickCount = now
  const startParams = {
    startTime: item.startTime, // 开始时间
    endTime: item.endTime, // 结束时间
    deviceId: deviceData.value.device.cameraIndexCode, // 监控点唯一标识
    channelId: deviceData.value.device.nvrIndexCode,
    accessToken: mediaToken.value,
  }
  const loading = ElLoading.service({
    lock: true,
    text: '正在开启回放，请稍等',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  if (lastCurrentStream.value && lastCurrentStream.value.stream) { // 有正在播的流,就先停止他
    const stopParams = {
      deviceId: lastCurrentStream.value.deviceId, // 设备国标编号
      channelId: lastCurrentStream.value.channelId, // 通道国标编号
      stream: lastCurrentStream.value.stream, // 开始播放时返回的stream标识
      accessToken: mediaToken.value,
    }
    endReplay(stopParams).then(() => {
      console.log('上一个流停播成功')
    }).catch(() => console.log('上一个流停播失败'))
  }
  startReplay(startParams).then((res) => {
    console.log('取流成功！')
    if (res && res.data) {
      lastCurrentStream.value = {
        deviceId: startParams.deviceId, // 设备国标编号
        channelId: startParams.channelId, // 通道国标编号
        stream: res.data.mediaInfo.stream, // 开始播放时返回的stream标识
      }
      mediaUrl.value = res.data.fmp4
      currentTime.value = startParams.startTime + ' - ' + startParams.endTime
      console.log('-----', currentTime.value)
    } else {
      ElMessage.warning('取流失败！')
    }
    loading.close()
  }).catch(() => {
    ElMessage.warning('未获取到流！')
  })
}

// 搜索重置
function reset() {
  listQuery.value = {
    startTime: dayjs(Date.now() - 1 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
    endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    id: '',
  }
  timeRange.value = [listQuery.value.startTime, listQuery.value.endTime]
  search()
}

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

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

watch(timeRange, (val) => {
  if (val) {
    listQuery.value.startTime = `${val[0]}`
    listQuery.value.endTime = `${val[1]}`
  }
  else {
    listQuery.value.startTime = ''
    listQuery.value.endTime = ''
  }
})

onMounted(() => {
  videoTree().then((response) => {
    if (response.code === 200) {
      data.value = response.data
      data.value = solveData(data.value)
    }
  })
  reset() // 重置
  setTimeout(() => {
    // 获取流媒体token
    getMediaToken().then((res: any) => {
      mediaToken.value = res.data
    })
    // 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 style="display:flex;">
          <search-area :need-clear="true" @search="search('tableClick')" @clear="reset">
            <search-item>
              <el-date-picker
                v-model="timeRange"
                type="datetimerange"
                range-separator="到"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 450px;"
                :clearable="false"
              />
            </search-item>
          </search-area>
          <!-- <div style="position: absolute;right: 20px;top: 22px">
            <el-button type="primary" @click="recordStart('MP4')" plain>录制MP4</el-button>
            <el-button @click="recordStop" type="info" plain>停止录制并保存文件</el-button>
          </div> -->
        </div>
        <!-- <video id="video0" :src="mediaUrl" autoPlay class="videoControl" /> -->
        <video id="video0" :src="mediaUrl" autoPlay style="width: 100%; height: calc(100% - 58px)" />
      </div>
      <el-card v-if="mediaRecordList.length" class="last">
        <span style="font-size: 13px;font-weight: 600;margin-bottom: 16px;display: block;">
          <span style="color: #0e932e;">【{{ deviceData.fullName }}】</span>
          <span>回放时间列表</span>
        </span>
        <el-tag
          v-for="(item, index) in mediaRecordList"
          :key="index"
          :type="index % 2 === 0 ? 'success' : 'danger'"
          effect="plain"
          class="tag"
          :color="currentTime === `${item.startTime - item.endTime}` ? '#0e932e' : '#fff'"
          @click="clickTag(item)"
        >
          <span :class="currentTime === item.startTime + ' - ' + item.endTime ? 'normal-tag' : 'click-tag-title'">{{ item.startTime }} - {{ item.endTime }}</span>
        </el-tag>
      </el-card>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.left {
  width: 300px;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
}
.right {
  width: calc(100% - 310px);
  margin-left: 10px;
  background-color: white;
}
.last {
  width: 390px;
  height: 100%;
  // padding: 10px;
  overflow-y: scroll;
  margin-left: 10px;
}
.tag {
  margin-bottom: 8px;
  cursor: pointer;
}
// .click-tag-title {
//   color: #000;
//   font-weight: 600;
// }
.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>