<template>
  <!-- 排水防涝子系统 视频监控一张图 -->
  <div class="publicContainer videoMapPage">
    <!-- tab切换 -->
    <div class="videoHead flex">
      <div :class="['part', acitveIndex == 1 ? 'active' : '']" @click="changeTab(1)">
        <el-icon><VideoCameraFilled /></el-icon>实时预览
      </div>
      <div :class="['part', acitveIndex == 2 ? 'active' : '']" @click="changeTab(2)">
        <el-icon><Platform /></el-icon>历史回放
      </div>
      <div :class="['part', acitveIndex == 3 ? 'active' : '']" @click="changeTab(3)">
        <el-icon><LocationFilled /></el-icon>视频地图
      </div>
      <!-- 视频地图 -->
      <div class="videoTab flex" v-if="acitveIndex == 3">
        <div
          :class="['part2', acitveIndex2 == item.groupName ? 'active2' : '']"
          @click="changeTab2(item.groupName)"
          v-for="(item, index) in cameraHead"
          :key="index"
        >
          <img :src="getImageUrl(`${item.groupName}.png`, 'images/gisMap')" alt="" />
          {{ item.groupName }}({{ item.total }}个)
        </div>
      </div>
    </div>
    <!-- 面板内容 -->
    <div class="videoCon flex">
      <!-- 左侧面板 -->
      <div class="leftCon">
        <el-tabs v-model="activeConnect" @tab-click="handleConnect">
          <el-tab-pane
            :label="item.groupName + `(${item.total})`"
            :name="item.groupName"
            v-for="(item, index) in cameraHead"
            :key="index"
          ></el-tab-pane>
        </el-tabs>
        <!-- 历史回放 -->
        <div class="flex" v-if="acitveIndex == 2">
          <el-date-picker type="datetime" v-model="startDate" value-format="YYYY-MM-DD" placeholder="请选择开始日期" />
          <el-date-picker type="datetime" v-model="endDate" value-format="YYYY-MM-DD" placeholder="请选择结束日期" />
          <el-button type="warning">搜索</el-button>
        </div>
        <el-input v-model="filterText" placeholder="请输入名称进行过滤" clearable style="margin: 10px auto" />
        <div class="cameraList">
          <el-tree
            :data="treeData"
            ref="treeRef"
            node-key="id"
            @node-click="checkCamera"
            :filter-node-method="filterNode"
            default-expand-all
            highlight-current
          ></el-tree>
        </div>
      </div>
      <div class="rightCon">
        <!-- 实时预览 -->
        <HKVideo
          v-if="AllData.videoOK && acitveIndex == 1"
          ref="video"
          :appkey="videoConfig.appKey"
          :secret="videoConfig.appSecret"
          :ip="videoConfig.ip"
          :port="videoConfig.port"
          :layout="AllData.layout"
          :cameraIndexCode="AllData.cameraIndexCode"
          :defaultList="AllData.defaultList"
        ></HKVideo>
        <!-- 回放视频 -->
        <HKVideoBack
          v-if="AllData.videoBack && acitveIndex == 2"
          ref="video"
          :appkey="videoConfig.appKey"
          :secret="videoConfig.appSecret"
          :ip="videoConfig.ip"
          :port="videoConfig.port"
          :cameraIndexCode="AllData.cameraIndexCodeBK"
          :layout="'1x1'"
        ></HKVideoBack>
        <!-- GIS地图 -->
        <VideoGisMap v-if="acitveIndex == 3"></VideoGisMap>
      </div>
    </div>
  </div>

  <!-- 视频监控详情弹窗 -->
  <el-dialog title="视频监控详情" v-model="dialogShow" width="900px" append-to-body>
    <div class="videoDetail" v-if="dialogShow">
      <div class="leftV">
        <p>设备名称:{{ cameraList.name }}</p>
        <p>状态：{{ cameraList.status == 1 ? '启用' : '停用' }}</p>
        <p>经度：{{ cameraList.x }}</p>
        <p>纬度：{{ cameraList.y }}</p>
        <p>地址：{{ cameraList.cameraAddress }}</p>
        <p>权属：{{ cameraList.ownershipUnit }}</p>
      </div>
      <div class="rightV">
        <HKVideo videoHeightCus="300" :cameraIndexCode="cameraIndexCode"> </HKVideo>
      </div>
    </div>
  </el-dialog>
</template>

<script setup name="videoMapPage">
import VideoGisMap from './gisMapVideo.vue'; //地图
import { getCameraTree } from '@/api/cameraResource/cameraInfo';
import { HKconfig } from '@/utils/HKConfig';
import HKVideo from '@/components/videoHK/index.vue'; //实时预览
import HKVideoBack from '@/components/videoHK/playBack.vue'; //回放视频

const { proxy } = getCurrentInstance();
const filterText = ref('');
const dialogShow = ref(false);
const cameraList = ref('');
const cameraHead = ref([]); //一级tab类别
const treeData = ref([]);
const acitveIndex = ref(1);
const acitveIndex2 = ref('河流');
const activeConnect = ref('');
const projectName = ref('');
const startDate = ref(null);
const endDate = ref(null);
const AllData = reactive({
  videoOK: true,
  videoBack: true,
  cameraIndexCode: '', //实时预览code
  cameraIndexCodeBK: '09aa2a2694744cb8b188442b0b2af9b7', //历史回放code
  layout: '2x2',
  defaultList: [
    { cameraIndexCode: 'f8b48c890c054ac190c124bb190a7007', wndId: 1 },
    { cameraIndexCode: '09aa2a2694744cb8b188442b0b2af9b7', wndId: 2 },
    { cameraIndexCode: '81eddc6915a440cfb15e3725116bb087', wndId: 3 },
    { cameraIndexCode: 'bb9b18f5b9be4277a6b648518f2b6878', wndId: 4 },
  ],
});
const videoConfig = reactive({
  appKey: HKconfig.appkey,
  appSecret: HKconfig.secret,
  ip: HKconfig.ip,
  port: HKconfig.port,
});

// 过滤模糊搜索
const treeRef = ref(null);
watch(filterText, val => {
  treeRef.value.filter(val);
});
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
// 切换tab
function changeTab(index) {
  acitveIndex.value = index;
}
// 视频tab点击
function changeTab2(index) {
  acitveIndex2.value = index;
}
function checkCamera(item) {
  cameraList.value = item;
  if (!!item.children) return;
  // dialogShow.value = true;
  console.log(item, 'item');
  AllData.cameraIndexCode = item.cameraIndexCode || 'bb9b18f5b9be4277a6b648518f2b6878';
}
// 获取摄像头数据
async function getList() {
  let response = await getCameraTree();
  if (response && response.code == 200) {
    cameraHead.value = [];
    let datas = response.data.cameraTreeDtoS;
    projectName.value = response.data.projectName;
    datas.forEach(item => {
      item.label = item.groupName;
      item.children = item.cameraDtoList;
      item.children.forEach(item2 => {
        item2.label = item2.name;
      });
      cameraHead.value.push(item);
    });
    activeConnect.value = cameraHead.value[0].groupName;
    acitveIndex2.value = cameraHead.value[0].groupName;
  }
  nameToArr(); //默认选中第一个tab
}
// 一级类型摄像头tab点击
function handleConnect(val) {
  activeConnect.value = val.props.name;
  nameToArr();
}
// 通过name取对应的数组
function nameToArr() {
  let datas = [];
  cameraHead.value.map(item => {
    if (item.groupName == activeConnect.value) {
      datas.push(item);
    }
  });
  treeData.value = [{ id: 1, label: projectName.value, children: datas[0].children }];
  console.log(datas);
  console.log(treeData.value);
}

onMounted(() => {
  getList();
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.videoMapPage {
  width: 100%;
  .videoHead {
    background: $mainColor1;
    margin-bottom: 10px;
    padding: 5px 15px;
    border-radius: 8px;
    align-items: center;
    position: relative;
    z-index: 999;
    .part {
      color: #00d1ff;
      background: $mainBg;
      margin-right: 15px;
      padding: 8px;
      border-radius: 5px;
      cursor: pointer;
      .el-icon {
        margin-right: 5px;
        svg path {
          fill: #00d1ff;
        }
      }
    }
    .active {
      background: #00c7f2 !important;
      color: #06488f !important;
    }
    .videoTab {
      border-left: 2px solid #00d1ff;
      margin-left: 20px;
      padding-left: 20px;
      .part2 {
        align-items: center;
        display: flex;
        margin-right: 30px;
        padding: 6px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 12px;
        img {
          width: 22px;
          height: 22px;
          margin-right: 10px;
        }
        &:hover {
          border: 1px solid #00d1ff;
        }
      }
      .active2 {
        font-size: 13px;
        border: 1px solid #00d1ff;
      }
    }
  }
  .videoCon {
    overflow: auto;
    width: 100%;
    height: calc(100vh - 150px);
    .leftCon {
      width: 475px;
      background: $mainColor1;
      margin-right: 10px;
      padding: 15px;
      .el-tabs__item {
        padding: 0px 10px;
      }
      .cameraList {
        width: 100%;
        height: 650px;
        overflow: auto;
        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
          background-color: $mainColor2 !important;
        }
        .el-tree {
          .el-icon {
            width: 10px;
            height: 10px;
            background: url('@/assets/images/gisMap/video.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 5px;
            svg {
              display: none;
            }
          }
        }
      }
    }
    .rightCon {
      flex: 1;
      height: 100%;
    }
  }
}
.videoDetail {
  display: flex;
  .leftV {
    width: 300px;
    color: #fff;
    p {
      margin-bottom: 30px;
    }
  }
  .rightV {
    flex: 1;
  }
}
</style>