<template>
  <div class="layerControlvue" v-show="Show">
    <div
      class="layericon"
      @click="allData.showControlBox = !allData.showControlBox"
    ></div>

    <div class="LayerControlBox" v-show="allData.showControlBox">
      <div class="ControlBox-body">
        <el-tree
          style="max-width: 600px"
          :data="dataSource"
          show-checkbox
          ref="layertree"
          node-key="value"
          default-expand-all
          :expand-on-click-node="false"
          @check="check"
        >
          <template #default="{ node, data }">
            <img v-if="data.icon" class="treeimg" :src="data.icon" />
            <span :class="data.class"> {{ node.label }} </span>
          </template>
        </el-tree>
      </div>
      <div class="reset" @click="reset">恢复默认</div>
    </div>
  </div>
</template>
<script setup>
import bus from "@/bus/";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();
import { getImageUrl } from "@/utils/ruoyi";
import { nextTick } from "vue";
const { proxy } = getCurrentInstance();
const Show = ref(true);
const selectList = ref([]);
const dataSource = ref([
  {
    value: "地图切换",
    label: "地图切换",
    class: "target-class",
    children: [
      {
        value: "!newfiber-XYZLayer",
        label: "电子地图",
        icon: getImageUrl("mapone.png", "images/NewLayercontrol"),
      },
      {
        value: "newfiber-XYZLayer",
        label: "影像地图",
        icon: getImageUrl("maptwo.png", "images/NewLayercontrol"),
      },
      {
        value: "高清地图",
        label: "高清地图",
        icon: getImageUrl("mapthree.png", "images/NewLayercontrol"),
      },
    ],
  },
  {
    value: "排水体系",
    label: "排水体系",
    class: "target-class",
    children: [
      {
        value: "雨水分区",
        label: "雨水系统",
        icon: getImageUrl("yuliangzhan.png", "images/NewLayercontrol"),
      },
      {
        value: "污水分区",
        label: "污水系统",
        icon: getImageUrl("zishuidian.png", "images/NewLayercontrol"),
      },
    ],
  },
  {
    value: "管网",
    label: "管网",
    class: "target-class",
    children: [
      {
        value: "雨水管网",
        label: "雨水管网",
        icon: getImageUrl("lay-yushuiguanwang.png", "images/NewLayercontrol"),
      },
      {
        value: "污水管网",
        label: "污水管网",
        icon: getImageUrl("lay-wushuiguanwang.png", "images/NewLayercontrol"),
      },
    ],
  },
]);

const allData = reactive({
  showControlBox: true, //控制图层控制是否展示和隐藏
});

//  这个方法会出现当前已勾选节点，或者半节点的状态
function check(data, node) {
  selectList.value = [];
  console.log("node", node);

  if (node) {
    let arr = [...node.checkedNodes];
    arr.map((item) => {
      if (item.value) {
        selectList.value.push(item.value);
      }
    });
  }
  console.log("selectList.value", selectList.value);
}
function setLayerVisible(newVal = [], oldVal = []) {
  const openLayer = _.difference(newVal, oldVal);
  const closeLayer = _.difference(oldVal, newVal);

  function changeyangshi() {
    const targetElements = document.querySelectorAll(".target-class");
    targetElements.forEach((target) => {
      const parent = target.parentElement; // 获取父级元素
      console.log("parent", parent);
      if (parent) {
        parent.classList.add("mycustomclass");
        // parent.style.backgroundColor = 'lightblue'; // 修改父级元素样式
        // 你可以在这里设置父级元素的其他样式
      }
    });
  }

  onMounted(() => {
    nextTick(() => {
      changeyangshi();
    });
    bus.on("YQ_head", (val) => {
      if (val == false) {
        Show.value = false;
      } else {
        Show.value = true;
      }
    });
  });

  onBeforeUnmount(() => {
    bus.off("YQ_head");
  });
  openLayer.length &&
    openLayer
      .map((i) => i.split(","))
      .flat(Infinity)
      .forEach((key) =>
        bus.emit("setLayerVisible", {
          layername: key,
          isCheck: key.includes("!") ? false : true,
        })
      );
  closeLayer.length &&
    closeLayer
      .map((i) => i.split(","))
      .flat(Infinity)
      .forEach((key) =>
        bus.emit("setLayerVisible", {
          layername: key,
          isCheck: key.includes("!") ? true : false,
        })
      );
  newfiberMap.map.triggerRepaint();
}

function reset() {
  proxy.$refs.layertree.setCheckedKeys([]);
  selectList.value = [];
  bus.emit("clearTemporaryData");
}

watch(() => selectList.value, setLayerVisible);
</script>
<style lang="scss" scoped>
// @import '@/assets/styles/cockpit.scss';

.Layercontrol {
  right: 0;
  left: 51px;
}

:deep(.el-tree) {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 14px;
  color: #f7f8ff;
  background: rgba(0, 0, 0, 0);
  .el-checkbox__inner {
    background: #0c296a;
    border: 1px solid #048cff;
  }

  .el-tree-node__content {
    // padding-left: 0 !important;
  }

  .el-tree-node__content:hover {
    background: rgba(104, 147, 215, 0.4);
  }
  .el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(0, 0, 0, 0);
  }

  .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  }

  .target-class {
    padding-left: 6px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 16px;
    color: #f7f8ff;
  }

  .mycustomclass {
    position: relative;
    background: linear-gradient(
      90deg,
      rgba(50, 146, 255, 0.5) 0%,
      rgba(12, 125, 255, 0.2) 100%
    ) !important;
    border-left: 4px solid #048cff;
    .el-checkbox {
      display: none;
    }
  }
}

.layericon {
  z-index: 0;
  position: absolute;
  cursor: pointer;
  width: 40px;
  height: 40px;
  right: 487px;
  top: 128px;
  background: url("@/assets/images/NewLayercontrol/layerIcon.png") no-repeat;
  background-size: 100% 100%;
}

::v-deep .LayerControlBox {
  z-index: 0;
  position: absolute;
  right: 500px;
  top: 175px;
  padding: 10px;
  background: url("@/assets/images/NewLayercontrol/layerBg.png") no-repeat;
  background-size: 100% 100%;
  width: 170px !important;
  max-height: 62vh !important;
  overflow: hidden;
  border-radius: 6px;

  .ControlBox-head {
    position: relative;
    font-size: 18px;
    margin: 15px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #f3fafe;
    height: 32.5px;
    padding-left: 60px;
    // background: url('@/assets/images/xinyangphasell/little-title-bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    height: 32.5px;

    .control-change {
      position: absolute;
      cursor: pointer;
      top: 50%;
      transform: translateY(-50%);
      right: 42px;
      width: 83px;
      height: 24px;
      line-height: 24px;
      border: 1px solid #1ba1ff;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #839ecb;
      background: linear-gradient(
        0deg,
        rgba(27, 161, 255, 0.2) 0%,
        rgba(27, 161, 255, 0.1) 100%
      );
      border-radius: 12px;
      text-align: center;
    }
  }

  .ControlBox-body {
    height: calc(100% - 50px);
    overflow: hidden;
    overflow-y: auto;

    .one-controlbox {
      margin-bottom: 30px;
    }

    .body-title {
      padding-left: 21px;

      .el-checkbox__label {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #fff;
      }
    }

    .body-body {
      margin-left: 50px;
    }
  }
}

.el-checkbox {
  width: 40%;
  margin: 0;
  margin-right: 10%;
}

.treeimg {
  width: 20px;
  height: 20px;
  margin-right: 3px;
}

.reset {
  cursor: pointer;
  margin-top: 10px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  background: linear-gradient(
    0deg,
    rgba(4, 140, 255, 0.5) 0%,
    rgba(4, 140, 255, 0.3) 100%
  );
  border-radius: 13px;
  border: 1px solid #2199ff;
  text-align: center;

  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 14px;
  color: #63cdff;
}
</style>