<!--
  Description: 场站管理-视频轮询
  Author: 李亚光
  Date: 2024-09-05
 -->
<script lang="ts" setup name="StationDeviceVideo">
import { toTreeList } from '@/utils/structure'
import { getDeptTreeList } from '@/api/system/dept'
import { getDeptStation } from '@/api/home/station/station'
import indexDB from '@/utils/indexDB'
import { indexDBHandler } from '@/utils/sessionData'
const loadingTree = ref<boolean>(false)

const defaultProps = {
  children: 'children',
  label: 'name',
  value: 'id'
}
const treeData = ref<any[]>([])
const expandedKeys = ref<string[]>([]) // 默认展开的节点
const treeRef = ref()
// 点击树形结构
const handleNodeClick = (data: any) => {
  if (data.id === 'station') {
    // 点击的设备(加载视频)
    console.log('station', data)
  }
}
// 获取组织列表树数据
const fetchTreeData = () => {
  loadingTree.value = true
  const setData = (data1: any[], data2: any[]) => {
    const data = data2.map((item: any) => ({
      ...item,
      checked: false,
      code: '',
      id: `station${item.DEVICE_ID}`,
      name: `${item.LEDGER_NAME}云台`,
      open: false,
      pCodes: '',
      pid: item.DEPTID,
      value: '',
    }))
    const all = [...data1.map(item => ({...item, disabled: true})), ...data]
    expandedKeys.value = []
    all.forEach(element => {
      // console.log(element, 'element')
      if (!element.id.includes('station')) {
        expandedKeys.value.push(element.id)
      }
    })
    treeData.value = toTreeList(all, '0', true)
    // 设置默认选中
    // console.log(treeData.value, 'treeData.value')

    setTimeout(() => {
      console.log(data1, 'data1')
      console.log(treeRef.value.filter('station'), 1111111111)
    })
  }
  const fetch = async () => {
    try {
      const res = await getDeptTreeList({ deptType: '' })
      indexDBHandler('all-dept-list', JSON.stringify(res.data))
      const res1 = await getDeptStation({})
      indexDBHandler('all-video-list', JSON.stringify(res1.data))
      setData(res.data, res1.data)
      loadingTree.value = false
    } catch (error) {
      loadingTree.value = false
    }
  }
  indexDB.getAll().then(allData => {
    if (allData.filter((item: any) => item.name === 'all-dept-list').length) {
      const list = JSON.parse(allData.filter((item: any) => item.name === 'all-dept-list')[0].data).filter((item: any) => item.id !== '0')
      if (allData.filter((item: any) => item.name === 'all-video-list').length) {
        const list1 = JSON.parse(allData.filter((item: any) => item.name === 'all-video-list')[0].data)
        setData(list, list1)
        loadingTree.value = false
      }
      else {
        fetch()
      }
    }
    else {
      fetch()
    }
  })

}

const treeHeight = ref(0)
const calcHeight = () => {
  const ele = document.getElementsByClassName('el-user-dept-scroll-video')[0] as HTMLElement
  if(ele) {
    treeHeight.value = ele.offsetHeight
  }
}
onMounted(() => {
  calcHeight()
  fetchTreeData()
})
window.addEventListener('resize', () => {
  calcHeight()
})
onBeforeUnmount(() => {
  window.addEventListener('resize', () => { })
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <div class="container">
      <!-- 左侧组织机构 -->
      <div class="left-container">
        <div class="dept-div">
          <el-card class="box-card" shadow="always">
            <template #header>
              <div class="clearfix">
                <!-- <div>监控点列表</div> -->
                <el-input placeholder="请输入搜索内容" />
              </div>
            </template>
            <el-scrollbar height="100%" class="user-dept-scroll el-user-dept-scroll-video">
              <!-- <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
                :expand-on-click-node="false" @node-click="handleNodeClick" /> -->
                <el-tree-v2 v-if="treeData.length" ref="treeRef" :data="treeData" :props="defaultProps"
                :height="treeHeight" :check-on-click-node="true" :default-expanded-keys="expandedKeys"
                @node-click="handleNodeClick" empty-text="暂无组织数据" show-checkbox />

            </el-scrollbar>
          </el-card>
        </div>
      </div>
      <!-- 右侧表格 -->
      <div ref="tableContainer" class="table">
        <el-card class="box-card" shadow="always">
          <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">
            <video v-for="item in 4" :key="item" class="video" :class="`${item <= 2 ? 'mar-bottom' : ''}`" src=""
              controls autoplay />
          </div>
        </el-card>
      </div>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
// ::v-deep(.el-tree-node__content) {
//   i,label {
//     display: none;
//   }
// }
// 样式
.container {
  width: 100%;
  display: flex;

  .left-container {
    width: 22%;
  }

  :deep(.el-radio__label) {
    display: none;
  }

  .table {
    width: 78%;
  }
}

.video {
  width: 49%;
  height: 40vh;
}

.mar-bottom {
  margin-bottom: 8px;
}

.dept-div {
  padding-right: 12px;

  :deep(.el-card) {
    height: 85vh;
    background-color: #fff;
  }

  .box-card {
    width: 100%;

    .user-dept-scroll {
      width: 100%;
      height: calc(100vh - 120px);
    }
  }
}
</style>