<template>
  <div class="w-1/3 dropdiv">
    <div class="dropdivin">
      <div class="iptdiv">
        <div class="iptdiv-left">
          <el-input
            v-model="serchTreeParam.text"
            size="small"
            placeholder="请输入监控名称"
            @input="handleSerchisten"
            v-on:keyup.enter="handleSerch(true)"
          ></el-input>
          <span class="serch-span" @click="handleSerch(true)">
            <i class="el-icon-search"></i>
          </span>
          <!-- <el-button type="primary" size="small" @click="handleSerch(true)"
            >搜索</el-button
          >-->
        </div>

        <el-checkbox
          style="margin-left: 10px"
          v-model="importCheck"
          @change="importChange"
        >
          重点筛选
        </el-checkbox>
      </div>
      <div class="container">
        <el-tree
          v-if="isShowtree"
          ref="tree"
          :default-expanded-keys="[defaultExpande]"
          @node-click="nodeClick"
          @node-expand="nodeExpand"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          style="background: none; color: #fff"
          node-key="id"
          :accordion="true"
        >
          <template #default="node">
            <span
              class="teee-node-spanout"
              v-if="node.data.children.length === 0 && node.data.id.length > 10"
            >
              <img
                v-if="node.data.cameraStatus == '0'"
                src="~@/assets/images/videoSurveillance/offline.png"
              />
              <img v-else src="~@/assets/images/videoSurveillance/online.png" />
              <span>{{ node.data.label }}</span>
            </span>
            <span class="teee-node-spanout" v-else>
              <!-- 么有筛选的时候才展示数字 -->
              <!-- v-if="!serchTreeParam.text && !serchTreeParam.important && serchTreeParam.layer == 0" -->
              <span>
                {{ node.data.label }}
                <span
                  v-if="
                    !isInputFilter &&
                    !serchTreeParam.important &&
                    serchTreeParam.layer.length == 0
                  "
                >
                  （
                  <span style="color: #fff">
                    {{
                      node.data.videoCountState ||
                      Number(node.data.videoCountState) == 0
                        ? node.data.videoCountState
                        : "*"
                    }}
                  </span>
                  /
                  {{
                    node.data.videoCount || Number(node.data.videoCount) == 0
                      ? node.data.videoCount
                      : "*"
                  }}）
                </span>
              </span>
            </span>
          </template>
        </el-tree>
        <div v-show="treeLoading" class="treeloding">
          <i class="el-icon-loading"></i>
        </div>
      </div>
    </div>

    <el-dialog
      :title="videoname"
      v-model="videoVisible"
      width="730px"
      :destroy-on-close="true"
    >
      <template #title></template>
      <div style="height: 20px"></div>
      <div>
        <div class="player" v-if="url" style="height: 510px">
          <videoPlayer ref="videoplayer" :retry="retryNum"></videoPlayer>
        </div>
        <div v-else style="width: 700px; height: 500px">
          <div class="offlinediv">当前监控设备暂时无法预览</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getVideoUrl } from "@/api/operation";
import videoPlayer from "./newLayerContrl/components/videoPlayer.vue";
import {
  getVideoTree,
  getVideoTreeCounts,
  videoIdStatusUpdate,
} from "@/api/video";
import { mapState, mapMutations } from "vuex";
import { getVideoCameraResourceCar } from "@/api/operationMonitor";
import videoPng from "@/assets/images/camera.png";
import YHCLpng from "@/assets/images/chargeManage/yhclpinticon.png";

export default {
  components: {
    videoPlayer,
  },
  computed: {
    ...mapState({
      map: (state) => state.map.map,
      boundaryLineFace: (state) => state.map.boundaryLineFace,
    }),
    getVideoInfo() {
      return this.$store.state.videoInfo;
    },
  },
  data() {
    return {
      treeLoading: false,
      allRoads: [],
      markers: [],
      videoname: null,
      videoVisible: false,
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      pageNo: 1,
      pageSize: 13,
      url: "",
      videoCode: "",
      monitorList: [],
      allVideo: [],
      bottonList: ["左上", "右上", "左下", "右下", "鹰眼摄像"],
      // 当前选中（播放的视频），需传给右侧监控咧白哦
      currentVideo: {
        name: "",
        url: "",
        code: "",
      },
      provinceCenter: [
        {
          zb: [107.969855, 30.067095],
          id: "CQ",
          zoom: 6.8,
        },
        {
          zb: [103.143217, 30.163066],
          id: "SC",
          zoom: 5.5,
        },
        {
          zb: [101.836002, 24.887257],
          id: "YN",
          zoom: 5.5,
        },
        {
          zb: [106.641243, 26.60797],
          id: "GZ",
          zoom: 6,
        },
        {
          zb: [117.229929, 31.825398],
          id: "AH",
          zoom: 6,
        },
      ],
      videoPonit: [], //数字聚合点
      treeMarkList: [], //树节点上的视频
      pointVisible: "visible", //数字聚合点的显示和隐藏
      importCheck: false,
      isCalcVideoIds: [], //已经统计过视频数量的目录的id（避免重复请求数据统计）
      videoContListGs: {
        //只统计总数和高速公路的视频树
        all: [],
        highSpeed: [],
      },
      retryNum: 6, //视频播放重试次数
      handleReload: false,
      defaultExpande: "606db8fe80da4288b48b7cd8f91dc385",
      isShowtree: true,
      isInputFilter: false, //是否视频有输入框筛选
      serchTreeParam: {
        text: null, // 从输入框筛选
        layer: [], //底部分类
        important: null, //重点筛选
      },
      showCarmarkerLayer: [],
    };
  },
  watch: {
    getVideoInfo(val) {
      this.handleShowVideo(val.kind, val.title);
      this.clickMapVideo(val.kind);
    },
    map(val) {
      //先高亮所有的省份
      // this.map.setZoom(4.8);
      // this.map.setCenter([107.85585, 28.465908]);
      this.map.setZoom(5.2);
      this.map.setCenter([104.07751, 28.55365]);
      const qmz = JSON.parse(localStorage.getItem("mapCLkmz"));
      this.map.setLayoutProperty(qmz.ROUTE, "visibility", "none");
      // this.boundaryLineFace.forEach(el => {
      //   if (el.code == "CQ") {
      //     this.map.setLayoutProperty(el.layerIdl, "visibility", "visible");
      //     this.map.setLayoutProperty(el.layerIdf, "visibility", "visible");
      //   } else {
      //     this.map.setLayoutProperty(el.layerIdl, "visibility", "none");
      //     this.map.setLayoutProperty(el.layerIdf, "visibility", "none");
      //   }
      // });
      this.boundaryLineFace.forEach((el) => {
        this.map.setLayoutProperty(el.layerIdl, "visibility", "visible");
        this.map.setLayoutProperty(el.layerIdf, "visibility", "visible");
      });
      this.addSources();
    },
    "$route.query.cameraId": {
      handler(val) {
        this.triggerCameraItemClick();
      },
    },
  },
  mounted() {
    this.getVideoTree();
  },
  methods: {
    ...mapMutations("road", ["setSelectRoadId", "setSelectLevel"]),
    // 获取地址栏参数中携带的视频id 默认展示
    triggerCameraItemClick() {
      this.$nextTick(() => {
        const { treeData, $route } = this;
        const { cameraId } = $route.query || {};
        if (!cameraId || !treeData || treeData.length < 1) {
          return;
        }
        // 选中左侧视频树
        this.clickMapVideo(cameraId);
        // 打开视频弹窗 播放
        this.handleShowVideo(cameraId);
        // 地图定位到 视频
        const node = this.$refs.tree.getNode(cameraId);
        if (node && node.data.longitude && node.data.latitude) {
          this.flyToMap(node.data);
        }
      });
    },
    async getVideoTree() {
      const data = await getVideoTree();
      console.log("data视频树视频树视频树视频树", data);
      const tree = data.msgContent?.children;
      this.treeData = tree;
      this.getVideoPoints(tree);
      this.getVideoCount(3);
      this.triggerCameraItemClick();
    },
    // 获取聚合点
    getVideoPoints(tree) {
      let points = [];
      const loopData = (data) => {
        if (data.length > 0) {
          data.forEach(async (item) => {
            if (item.children.length > 0) {
              loopData(item.children);
            } else {
              if (item.latitude && item.longitude) {
                points.push(item);
              }
            }
          });
        } else {
          if (data.latitude && data.longitude) {
            points.push(data);
          }
        }
      };
      loopData(tree);
      if (!this.handleReload) {
        // 手动刷新的时候不去更新点
        this.addMarkers(points);
      }
    },
    //树节点的视频数量刷新
    refreshTreeNum() {
      this.handleReload = true;
      this.isCalcVideoIds = [];
      this.videoContListGs = {
        all: [],
        highSpeed: [],
      };
      this.defaultExpande = "500101";
      this.getVideoTree();
      // this.getVideoCount(10)
    },
    //先获获取前4级的摄像头数量
    getVideoCount(loadLevel) {
      // loadLevel 表示视频数量要更新哪级
      const _that = this;
      this.videoContListGs.all = [];
      this.videoContListGs.highSpeed = [];
      const loopData = (data) => {
        if (data.length > 0) {
          data.forEach(async (item) => {
            if (item.children.length > 0) {
              if (
                item.level <= loadLevel &&
                _that.isCalcVideoIds.indexOf(item.id) < 0
              ) {
                const conts = await getVideoTreeCounts(item.id);
                if (!conts || !conts.msgContent.length) {
                  return;
                }
                const data = conts.msgContent[0];
                // item.childrenCount = data.childrenCount
                // item.childrenCountState = data.childrenCountState
                item.videoCountState = data.childrenCountState;
                item.videoCount = data.childrenCount;
                let onlineRate = 0;
                if (item.videoCount > 0) {
                  onlineRate = (
                    (item.videoCountState / item.videoCount) *
                    100
                  ).toFixed(2);
                }

                let obj = {
                  label: item.label,
                  videoCount: item.videoCount,
                  videoCountOnLline: item.videoCountState,
                  videoCountOffLine: item.videoCount - item.videoCountState,
                  onlineRate: onlineRate,
                };
                if (item.level == 0) {
                  _that.videoContListGs.all.push(obj);
                  _that.$emit("getCameracont", data.childrenCount);
                }
                if (item.level == 3 && item.linkId !== "CQ") {
                  _that.videoContListGs.highSpeed.push(obj);
                }
                _that.$emit("getGsCameracontList", this.videoContListGs);
                _that.isCalcVideoIds.push(item.id);
                loopData(item.children);
              }
            } else {
              item.videoCountState = "*";
              item.videoCount = "*";
            }
          });
        }
      };
      loopData(this.treeData);
    },
    //树节点展开
    async nodeExpand(data, node) {
      if (node) {
        //展开当前节点，收起其他节点
        let allPeerList = node.parent.childNodes;
        let sibling_nodes = allPeerList.filter(
          (item) => item.data.id !== data.id
        );
        sibling_nodes.forEach((item) => {
          item.expanded = false;
        });
      }
      //获取该目录下的视频数量
      const _that = this;
      if (data.children.length > 0) {
        data.children.forEach(async (item) => {
          if (
            item.children.length > 0 &&
            _that.isCalcVideoIds.indexOf(item.id) < 0
          ) {
            getVideoTreeCounts(item.id)
              .then((res) => {
                if (!res || !res.msgContent.length) {
                  this.$message.error("暂无视频数量数据");
                  return;
                }
                const data = res.msgContent[0];
                item.videoCount =
                  data.childrenCount || Number(data.childrenCount) === 0
                    ? data.childrenCount
                    : "*";
                item.videoCountState =
                  data.childrenCountState ||
                  Number(data.childrenCountState) === 0
                    ? data.childrenCountState
                    : "*";
              })
              .catch(() => {
                this.$message.error("获取视频数量出错");
              });
            _that.isCalcVideoIds.push(item.id);
          }
        });
      }
      //判断当前节点下面的子节点是最后一级,是的话去调用增量更新的接口
      if (data.children.length > 0 && data.children[0].children.length < 1) {
        const zlList = await videoIdStatusUpdate();
        // const zlList.msgContent
        if (zlList.msgContent.length > 0) {
          data.children.forEach(async (item) => {
            let changenode = zlList.msgContent.filter(
              (val) => item.id == val.videoId
            );
            if (changenode.length > 0) {
              item.cameraStatus = changenode[0].videoStatus;
            }
          });
        }
      }
    },
    //点击地图上的是视频，树的变化
    clickMapVideo(id) {
      const _that = this;
      const node = this.$refs.tree.getNode(id);
      console.log(1111122222, id, node);
      const nodesMap = node.store.nodesMap;
      //收起所有节点并展开当前节点
      for (let key in nodesMap) {
        nodesMap[key].expanded = false;
      }
      this.defaultExpande = id;
      // 获取跟当前节点相关的展出出来的层级，获取视频数量
      const loopData = (nodes) => {
        if (nodes.parent.data.level > 4) {
          const pid = nodes.parent.data.id;
          let ppnode = this.$refs.tree.getNode(pid);
          let ppnodechild = ppnode.parent.data.children;
          ppnodechild.forEach((val) => {
            if (
              val.children.length > 0 &&
              _that.isCalcVideoIds.indexOf(val.id) < 0
            ) {
              getVideoTreeCounts(val.id).then((res) => {
                const data = res.msgContent[0];
                val.videoCount = data.childrenCount ? data.childrenCount : 0;
                val.videoCountState = data.childrenCountState
                  ? data.childrenCountState
                  : 0;
              });
              _that.isCalcVideoIds.push(val.id);
            }
          });
          loopData(ppnode);
        }
      };
      loopData(node);
    },
    // 树节点点击
    async nodeClick(data, node) {
      // 车载单独处理获取的数据 value 和 视频树的id 对不上 取不到数据  注释这段代码
      //路段巡查车视频单独处理
      if (data.id == "500199" || data.parentIndexCode == "500199") {
        //所有真实车载list
        let carChildList = [];
        const carList = await getVideoCameraResourceCar({
          level: 0,
          dimension: "",
        });
        carList.data.forEach((item) => {
          item.children.forEach((key) => {
            carChildList.push(key);
          });
        });
        let onlineCarList = []; //该节点下在线的车辆
        if (data.parentIndexCode == "500199") {
          // 在所有真实车载list中筛选出该节点下的车载，并更新该节点下的车载信息
          data.children.forEach((item) => {
            const carinfo = carChildList.filter((val) => val.value == item.id);
            if (carinfo[0].status == "1") {
              onlineCarList.push(carinfo[0]);
              item.cameraStatus = "1";
            } else {
              item.cameraStatus = "0";
            }
          });
          // data.videoCountState = onlineCarList.length; // 数据不对暂时不赋值
        }
        if (data.id == "500199") {
          data.children.forEach((ele) => {
            let onlineNum = 0;
            ele.children.forEach((item) => {
              const carinfo = carChildList.filter(
                (val) => val.value == item.id
              );
              if (carinfo[0] && carinfo[0].status == "1") {
                onlineCarList.push(carinfo[0]);
                item.cameraStatus = "1";
                onlineNum++;
              } else {
                item.cameraStatus = "0";
              }
            });
            // ele.videoCountState = onlineNum; // 数据不对暂时不赋值
          });
          // data.videoCountState = onlineCarList.length; // 数据不对暂时不赋值
        }
        this.roadCarMaker(onlineCarList);
        return;
      }
      let selectRoadId = []; //模仿公共组织架构的路段id形式
      let provinceId = ""; //省份id
      if (data.level === 3) {
        let pid = node.parent.data.linkId;
        let ppid = node.parent.parent.data.linkId;
        selectRoadId = [ppid, pid, data.linkId];
        provinceId = ppid;
      }
      if (data.level === 2) {
        let pid = node.parent.data.linkId;
        selectRoadId = [pid, data.linkId];
        provinceId = pid;
      }
      if (data.level == 1) {
        selectRoadId = [data.linkId];
        provinceId = data.linkId;
      }
      if (data.level === 0) {
        selectRoadId = [];
        provinceId = "";
      }
      this.$emit("roadstatusChange", selectRoadId);
      if ([0, 1, 2, 3].includes(data.level)) {
        // 删除车载icon
        if (this.showCarmarkerLayer.length > 0) {
          this.map.removeSource("roadCarMakerSource");
          this.map.removeLayer("roadCarMakersLayer");
          this.map.removeImage("roadCarMakersImg");
          this.showCarmarkerLayer = [];
        }
        // 判断有底部分类的时候 聚合不显示，没有就显示
        if (this.serchTreeParam.layer.length > 0) {
          this.pointVisible = "none";
        } else {
          this.pointVisible = "visible";
        }
        this.$emit("drawRoads", data.linkId, data.level);
        this.treeMarkList = [];
        const st = this.nodeClickCheckVideo(data);
        if (st) {
          // this.pointVisible = this.map.getLayoutProperty(
          //   "point-outer-cluster-0",
          //   "visibility"
          // );
          let curLayerList = [
            "point-outer-cluster-0",
            "point-outer-cluster-1",
            "point-outer-cluster-2",
            "point-inner-cluster-0",
            "point-inner-cluster-1",
            "point-inner-cluster-2",
          ];
          curLayerList.forEach((i) => {
            this.map.removeLayer(i);
          });
          this.map.removeSource("data-point");
          this.map.removeLayer("cluster-count");
          this.map.removeLayer("unclustered-points");
          // this.map.removeLayer('point-outer-cluster-0')

          this.addMarkers(this.treeMarkList);
        }
      }
      if (data.level < 4) {
        this.shouLinghtProve(provinceId);
      }

      // 播放视频 && data.latitude && data.longitude
      // 一般data.id.length > 10 的 才是视频监控
      if (data.children.length === 0 && data.id.length > 10) {
        this.retryNum = data.cameraStatus == "1" ? 6 : 3;
        this.handleShowVideo(data.id, data.name);
        if (data.longitude && data.latitude) {
          this.flyToMap(data);
        }
      }
    },
    // 隐藏或显示数字聚合图层
    showHideJH(sty) {
      this.map.setLayoutProperty("cluster-count", "visibility", sty);
      this.map.setLayoutProperty("unclustered-points", "visibility", sty);
      let curLayerList = [
        "point-outer-cluster-0",
        "point-outer-cluster-1",
        "point-outer-cluster-2",
        "point-inner-cluster-0",
        "point-inner-cluster-1",
        "point-inner-cluster-2",
      ];
      curLayerList.forEach((i) => {
        this.map.setLayoutProperty(i, "visibility", sty);
      });
      this.pointVisible = "none";
    },
    //道路巡查车打点
    roadCarMaker(arr) {
      this.showHideJH("none");
      let { map } = this;
      const _that = this;
      if (this.showCarmarkerLayer.length > 0) {
        this.map.removeSource("roadCarMakerSource");
        this.map.removeLayer("roadCarMakersLayer");
        this.map.removeImage("roadCarMakersImg");
        this.showCarmarkerLayer = [];
      }
      let pres = {
        type: "FeatureCollection",
        features: [],
      };
      arr.forEach((item, index) => {
        if (item.longitude && item.latitude) {
          pres.features.push({
            geometry: {
              type: "Point",
              coordinates: [item.longitude, item.latitude],
            },
            properties: {
              title: item.name,
              kind: item.value,
            },
            type: "Feature",
          });
        }
      });
      this.map.addSource("roadCarMakerSource", {
        type: "geojson",
        data: pres,
      });
      map.loadImage(YHCLpng, function (error, image) {
        if (error) throw error;
        // 添加自定义图标
        map.addImage("roadCarMakersImg", image);
        map.addLayer({
          id: "roadCarMakersLayer",
          type: "symbol",
          source: "roadCarMakerSource",
          filter: ["!has", "point_count"],
          layout: {
            "icon-image": "roadCarMakersImg",
            "icon-size": 1,
            "symbol-avoid-edges": true,
            "icon-allow-overlap": true,
            "icon-ignore-placement": true,
            "symbol-spacing": 20,
            "icon-padding": 0,
            // visibility: "none",
          },
        });
      });
      this.showCarmarkerLayer.push("roadCarMakersImg");
      map.on("click", function (e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ["roadCarMakersLayer"],
        });
        if (features.length > 0) {
          // _that.$store.commit('changeVideo', features[0].properties)
          _that.handleShowVideo(
            features[0].properties.kind,
            features[0].properties.title
          );
          _that.clickMapVideo(features[0].properties.kind);
        }
      });
    },
    //点击树节点后，获取改节点下的视频（然后获取经纬、打点）
    nodeClickCheckVideo(data) {
      let dataCopy = data;
      let _that = this;
      function setData(data) {
        if (data.children && data.children.length > 0) {
          data.children.forEach((ele, index) => {
            if (ele.children && ele.children.length > 0) {
              _that.nodeClickCheckVideo(ele);
            } else {
              if (ele.longitude && ele.latitude) {
                _that.treeMarkList.push(ele);
              }
            }
          });
        }
      }
      setData(dataCopy);
      return true;
    },
    //点击树结构，地图的变化
    shouLinghtProve(provinceId) {
      if (!provinceId) {
        const qmz = JSON.parse(localStorage.getItem("mapCLkmz"));
        this.map.setLayoutProperty(qmz.ROUTE, "visibility", "none");
        this.boundaryLineFace.forEach((el) => {
          this.map.setLayoutProperty(el.layerIdl, "visibility", "visible");
          this.map.setLayoutProperty(el.layerIdf, "visibility", "visible");
        });
        this.map.flyTo({
          center: [107.85585, 28.465908],
          zoom: 4.8,
        });
      } else {
        // 显示或隐藏高亮的省份
        // 先隐藏掉其他高亮的省份
        this.boundaryLineFace.forEach((el) => {
          this.map.setLayoutProperty(el.layerIdl, "visibility", "none");
          this.map.setLayoutProperty(el.layerIdf, "visibility", "none");
        });
        this.boundaryLineFace.forEach((el) => {
          if (provinceId == el.code) {
            this.map.setLayoutProperty(el.layerIdl, "visibility", "visible");
            this.map.setLayoutProperty(el.layerIdf, "visibility", "visible");
          }
        });
        this.provinceCenter.forEach((el) => {
          if (provinceId == el.id) {
            this.map.flyTo({
              center: el.zb,
              zoom: el.zoom,
            });
          }
        });
      }
    },
    // 清除点
    // 在地图上打点 这是点聚合
    addMarkers(arr) {
      // 打点
      let result = {
        type: "FeatureCollection",
        features: [],
      };
      arr.forEach((item, index) => {
        if (item.longitude && item.latitude) {
          result.features.push({
            geometry: {
              type: "Point",
              coordinates: [item.longitude, item.latitude],
            },
            properties: {
              title: item.label,
              kind: item.id,
            },
            type: "Feature",
          });
        }
      });
      this.videoPonit = result;
      this.addSources();
    },
    // 跳转到地图点位
    flyToMap(data) {
      const lnglat = [data.longitude, data.latitude];
      this.map &&
        this.map.flyTo({
          center: lnglat,
          zoom: 12,
        });
    },
    // 视频弹框
    async handleShowVideo(deviceCode, name) {
      this.videoname = name;
      this.videoCode = deviceCode;
      const res = await getVideoUrl(deviceCode);
      console.log("hhhhhhh", res);
      if (res && res.success && res.data) {
        this.url = res.data;
      } else {
        this.url = null;
      }
      this.currentVideo.name = name;
      this.currentVideo.url = this.url;
      this.currentVideo.code = deviceCode;
      this.videoVisible = true;
      this.$nextTick(() => {
        this.$refs.videoplayer.createPlayer(this.url, deviceCode);
      });
    },
    //将当前视频添加到右侧视频监控列表
    doPushMoniter(num) {
      let obj = Object.assign({}, this.currentVideo);
      this.$emit("doPushMoniter", num, obj);
    },
    // 输入框搜索
    handleSerch(blo) {
      if (this.serchTreeParam.text) {
        this.isInputFilter = true;
        this.filterNodeLoding();
        setTimeout(() => {
          this.$refs.tree.filter(this.serchTreeParam.text);
        }, 100);
      } else {
        this.isInputFilter = false;
        this.$refs.tree.filter("");
        this.filterNodeNone();
      }
    },
    //监听输入框搜索
    handleSerchisten() {
      if (!this.serchTreeParam.text) {
        this.isInputFilter = false;
        this.filterNodeNone();
      }
    },
    // 重点列表筛选
    importChange(ischeck) {
      if (ischeck) {
        this.serchTreeParam.important = "1";
        this.filterNodeLoding();
        setTimeout(() => {
          this.$refs.tree.filter("1");
        }, 100);
      } else {
        this.serchTreeParam.important = null;
        this.$refs.tree.filter("");
        this.filterNodeNone();
      }
    },
    // 摄像头分类搜索
    layerSerch(data) {
      if (data.length > 0) {
        // this.filterNodeLoding()
        this.serchTreeParam.layer = data;
        this.filterNodeLoding();
        setTimeout(() => {
          this.$refs.tree.filter(data);
        }, 100);
      } else {
        this.serchTreeParam.layer = [];
        this.$refs.tree.filter("");
        this.filterNodeNone();
      }
    },
    // 筛选为空操作
    filterNodeNone() {
      //都没有筛选分类的时候
      if (
        !this.serchTreeParam.text &&
        this.serchTreeParam.layer.length == 0 &&
        !this.serchTreeParam.important
      ) {
        this.isShowtree = false;
        this.defaultExpande = "606db8fe80da4288b48b7cd8f91dc385";
        setTimeout(() => {
          this.isShowtree = true;
        }, 100);
      }
    },
    // 筛选模拟loading效果
    filterNodeLoding() {
      this.treeLoading = true;
      setTimeout(() => {
        this.treeLoading = false;
      }, 2000);
    },
    // 摄像头筛选
    filterNode(value, data) {
      // 都没有筛选条件的时候
      if (
        !this.serchTreeParam.text &&
        !this.serchTreeParam.important &&
        this.serchTreeParam.layer.length == 0
      ) {
        return true;
      }
      // 三个查询条件都有得时候
      if (
        this.serchTreeParam.text &&
        this.serchTreeParam.important &&
        this.serchTreeParam.layer.length > 0
      ) {
        return (
          data.label.indexOf(this.serchTreeParam.text) !== -1 &&
          data.isImportant == "1" &&
          this.serchTreeParam.layer.indexOf(data.unitType) !== -1
        );
      }
      //只有 输入框 和 重点筛选 的时候
      if (
        this.serchTreeParam.text &&
        this.serchTreeParam.important &&
        this.serchTreeParam.layer.length == 0
      ) {
        return (
          data.label.indexOf(this.serchTreeParam.text) !== -1 &&
          data.isImportant == "1"
        );
      }

      //只有 输入框 和 底部分类 的时候
      if (
        this.serchTreeParam.text &&
        !this.serchTreeParam.important &&
        this.serchTreeParam.layer.length > 0
      ) {
        return (
          data.label.indexOf(this.serchTreeParam.text) !== -1 &&
          this.serchTreeParam.layer.indexOf(data.unitType) !== -1
        );
      }
      //只有 重点筛选 和 底部分类 的时候
      if (
        !this.serchTreeParam.text &&
        this.serchTreeParam.important &&
        this.serchTreeParam.layer.length > 0
      ) {
        return (
          data.isImportant == "1" &&
          this.serchTreeParam.layer.indexOf(data.unitType) !== -1
        );
      }
      //只有 输入框 的时候
      if (
        this.serchTreeParam.text &&
        !this.serchTreeParam.important &&
        this.serchTreeParam.layer.length == 0
      ) {
        return data.label.indexOf(this.serchTreeParam.text) !== -1;
      }

      //只有 重点筛选 的时候
      if (
        !this.serchTreeParam.text &&
        this.serchTreeParam.important &&
        this.serchTreeParam.layer.length == 0
      ) {
        return data.isImportant == "1";
      }

      //只有 底部筛选的时候 的时候
      if (
        !this.serchTreeParam.text &&
        !this.serchTreeParam.important &&
        this.serchTreeParam.layer.length > 0
      ) {
        console.log(this.serchTreeParam.layer);
        console.log(data);
        return this.serchTreeParam.layer.indexOf(data.unitType) !== -1;
      }
    },
    // 视频监控点聚合
    addSources() {
      this.resetPointSource();
      const _that = this;
      if (this.map && this.videoPonit) {
        this.map.addSource("data-point", {
          type: "geojson",
          data: _that.videoPonit,
          cluster: true,
          clusterMaxZoom: 10 /* 最大聚合层级 */,
          clusterRadius: 50 /* 聚合半径 */,
        });
        this.addLayers();
      }
    },
    addLayers() {
      let { map } = this;
      const _that = this;
      //添加非聚合图层
      map.loadImage(videoPng, function (error, image) {
        if (error) throw error;
        // 添加自定义图标
        map.addImage("park", image);
        map.addLayer({
          id: "unclustered-points",
          type: "symbol",
          source: "data-point",
          filter: ["!has", "point_count"],
          layout: {
            "icon-image": "park",
            "icon-size": 0.5,
            visibility: _that.pointVisible,
          },
        });
      });
      // 添加聚合图层
      var outerColors = [
        [1000, "rgba(255, 181, 41, 0.5)"],
        [100, "rgba(255, 181, 41, 0.5)"],
        [0, "rgba(37, 196, 57, 0.5)"],
      ];

      outerColors.forEach(function (color, i) {
        map.addLayer({
          id: "point-outer-cluster-" + i,
          type: "circle",
          source: "data-point",
          paint: {
            "circle-color": color[1],
            "circle-radius": 20,
          },
          layout: {
            visibility: _that.pointVisible,
          },
          filter:
            i === 0
              ? [">=", "point_count", color[0]]
              : [
                  "all",
                  [">=", "point_count", color[0]],
                  ["<", "point_count", outerColors[i - 1][0]],
                ],
        });
      });
      var innerColors = [
        [1000, "rgba(245, 137, 95, 1)"],
        [100, "rgba(255, 181, 41, 1)"],
        [0, "rgba(37, 196, 57, 1)"],
      ];

      innerColors.forEach(function (color, i) {
        map.addLayer({
          id: "point-inner-cluster-" + i,
          type: "circle",
          source: "data-point",
          paint: {
            "circle-color": color[1],
            "circle-radius": 15,
          },
          layout: {
            visibility: _that.pointVisible,
          },
          filter:
            i === 0
              ? [">=", "point_count", color[0]]
              : [
                  "all",
                  [">=", "point_count", color[0]],
                  ["<", "point_count", innerColors[i - 1][0]],
                ],
        });
      });
      // map.addLayer({
      //   "id": "point-outer-cluster-0",
      //   "type": "circle",
      //   "source": "data-point",
      //   "paint": {
      //     "circle-color": '#06B7C1',
      //     "circle-radius": 20
      //   },
      //   "layout": {
      //     "visibility": _that.pointVisible
      //   }
      // });
      //添加数量图层
      map.addLayer({
        id: "cluster-count",
        type: "symbol",
        source: "data-point",
        layout: {
          "text-field": "{point_count}",
          "text-size": 10,
          visibility: _that.pointVisible,
        },
        paint: {
          "text-color": "rgba(0,0,0,.75)",
        },
        filter: ["has", "point_count"],
      });

      map.on("click", function (e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ["unclustered-points"],
        });
        if (features.length > 0) {
          // _that.$store.commit('changeVideo', features[0].properties)
          _that.handleShowVideo(
            features[0].properties.kind,
            features[0].properties.title
          );
          _that.clickMapVideo(features[0].properties.kind);
        }
        var contfeatures = map.queryRenderedFeatures(e.point, {
          layers: ["cluster-count"],
        });
        if (contfeatures.length > 0) {
          map.flyTo({
            center: contfeatures[0].geometry.coordinates,
            zoom: 11,
          });
        }
      });
    },
    resetPointSource() {
      if (this.map) {
        this.map.getLayer("unclustered-points") &&
          this.map.removeLayer("unclustered-points");
        let curLayerList = [
          "point-outer-cluster-0",
          "point-outer-cluster-1",
          "point-outer-cluster-2",
          "point-inner-cluster-0",
          "point-inner-cluster-1",
          "point-inner-cluster-2",
        ];
        curLayerList.forEach((i) => {
          // this.map.removeLayer(i)
          this.map.getLayer(i) && this.map.removeLayer(i);
        });
        // this.map.getLayer('point-outer-cluster-0') && this.map.removeLayer('point-outer-cluster-0');
        this.map.getLayer("cluster-count") &&
          this.map.removeLayer("cluster-count");
        this.map.getSource("data-point") && this.map.removeSource("data-point");
        this.map.hasImage("park") && this.map.removeImage("park");
      }
    },
  },
};
</script>

<style>
.iptdiv input {
  /* background-color: #0c1d3c !important; */
}
.el-tree-node__content:hover {
  background-color: #0c1d3c !important;
}
.el-tree-node:focus > .el-tree-node__content {
  background-color: #0c1d3c !important;
}
</style>
<style lang="scss" scoped>
.dropdiv {
  // position: absolute;
  // left: 0;
  // top: 0;
  height: 100%;
  width: 430px;
  // height: calc(100% - 320px);
  // padding: 40px 10px;
  // z-index: 9999;
  // margin-top: 30px;
  // margin-left: 20px;
}
.dropdivin {
  width: 100%;
  height: 100%;
  padding: 15px;
  // padding: 10px 0;
  // background: url("/src/assets/images/videoSurveillance/dropbg.png");
  // background-size: 100% 100%;
}
.container {
  width: 100%;
  height: calc(100% - 34px);
  overflow: auto;
}
.treeloding {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.iptdiv {
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 10px;
}
.iptdiv-left {
  position: relative;
}
.movelist {
  padding: 12px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.movelist:hover {
  color: #00ccff;
}
.page {
  padding-left: 15px;
}

::v-deep(.el-input__inner) {
  border: 1px solid #2b95ff;
  color: #fff;
  background: rgba(26, 60, 85, 0.6);
  border: 1px solid rgba(51, 151, 255, 0.5);
  box-shadow: 0px 0px 4px 0px rgba(43, 149, 255, 0.3);
  width: 260px;
  margin-right: 20px;
  padding-right: 40px;
}
::v-deep(.el-tree-node__content) {
  height: 28px !important;
}
.custom-tree-node {
  font-size: 13px;
  color: #84afcf;
}
.teee-node-spanout {
  display: flex;
  color: #84afcf;
  padding: 3px 0;
}
.teee-node-spanout img {
  width: 17px;
  height: 17px;
  margin-right: 3px;
}
::v-deep(.el-tree-node__expand-icon) {
  color: #84afcf;
}
::v-deep(.is-leaf) {
  color: transparent !important;
}
.serch-span {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 24px;
  width: 40px;
  height: 30px;
  color: #3397ff;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  cursor: pointer;
}
::v-deep(.el-dialog__header) {
  padding: 0;
}
::v-deep(.el-dialog__body) {
  background-image: url("@/assets/images/expressway/popbg.png") !important;
  background-size: 100% 100% !important;
}
.offlinediv {
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
</style>
