<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>
            <span v-if="data.n">({{data.n}})</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("maptwo.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: "尾水路径",
        icon: getImageUrl("尾水路径.png", "images/NewLayercontrol"),
      },
      {
        value: "sewage_pump_station_info",
        icon: getImageUrl("wushuibengzhan.png", "images/NewLayercontrol"),
        label: "污水泵站",
      },
      {
        value: "sewage_factory_info",
        icon: getImageUrl("wushuichulichang.png", "images/NewLayercontrol"),
        label: "污水厂",
      },
      {
        label: "污水处理站",
        value: "sewage_factory_station_info",
        icon: getImageUrl("wushuichulizhan.png", "images/NewLayercontrol"),
      },
      {
        value: "rain_water_pump_station_info",
        icon: getImageUrl("yushuibengzhan.png", "images/NewLayercontrol"),
        label: "雨水泵站",
      },
      {
        value: "water_gate_info",
        icon: getImageUrl("shuizha.png", "images/NewLayercontrol"),
        label: "水闸",
      },
      {
        value: "storage_tank_info",
        icon: getImageUrl("tiaoxuchi.png", "images/NewLayercontrol"),
        label: "调蓄池",
      },
      {
        label: "分流井",
        value: "diversion_well_info",
        icon: getImageUrl("feliujin.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"),
      },
    ],
  },
  {
    value: "武勘院管网",
    label: "武勘院管网",
    class: "target-class",
    children: [
      {
        value: "雨水管网1",
        label: "雨水管网",
        icon: getImageUrl("lay-yushuiguanwang.png", "images/NewLayercontrol"),
      },
      {
        value: "污水管网1",
        label: "污水管网",
        icon: getImageUrl("lay-wushuiguanwang.png", "images/NewLayercontrol"),
      },
    ],
  },
  {
    value: "监测点",
    label: "监测点",
    class: "target-class",
    children: [
      {
        value: "rainwater_pipeline_quality_area",
        label: "社区雨水接驳口",
      },
      {
        value: "rainwater_pipeline_quality_city",
        label: "市政雨水监测",
      },
      {
        value: "sewage_pipeline_quality_city",
        label: "市政污水监测",
      },
    ],
  },
  {
    value: "其他",
    label: "其他",
    class: "target-class",
    children: [
      {
        value: "drainage_info",
        label: "排水户",
      },
      {
        value: "港渠",
        label: "港渠",
      },
      {
        value: "outlet_info",
        label: "排口",
      },
      {
        value: "建筑物",
        label: "建筑物",
      },
    ],
  },
]);

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

//  这个方法会出现当前已勾选节点，或者半节点的状态
function check(data, node) {
  setLayerVisible([], selectList.value);
  selectList.value = [];
  if (node) {
    let arr = [...node.checkedNodes];
    arr.map((item) => {
      if (item.value) {
        selectList.value.push(item.value);
      }
    });
  }
  setLayerVisible(selectList.value, []);
  /*  nextTick(() => {
    let arr = dataSource.value[0].children.map(p => p.value);
    if (arr.includes(data.value)) {
      arr.map(item => {
        if (selectList.value.includes(item)) {
          selectList.value.splice(selectList.value.indexOf(item), 1);
        }
      });
      selectList.value.push(data.value);
      proxy.$refs.layertree.setCheckedKeys(selectList.value);
    }
  });*/
}
function setLayerVisible(newVal = [], oldVal = []) {
  const openLayer = _.difference(newVal, oldVal);
  const closeLayer = _.difference(oldVal, newVal);

  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 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) => {
    console.log("valvalvalval", val);
    if (val == false) {
      Show.value = false;
    } else {
      Show.value = true;
    }
  });
});

onBeforeUnmount(() => {
  bus.off("YQ_head");
});

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

watch(() => appStore.MapDataCount, (newValue, oldValue) => {

  dataSource.value.forEach(i => i.children.forEach(k => (k.n = newValue[k.value])))
}, { deep: true, once: true });

// 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-checkbox__inner::after {
    border: 1px solid #048cff;
    border-left: 0;
    border-top: 0;
  }

  .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;
  left: 487px;
  top: 128px;
  background: url("@/assets/images/NewLayercontrol/layerIcon.png") no-repeat;
  background-size: 100% 100%;
}

::v-deep .LayerControlBox {
  z-index: 0;
  position: absolute;
  left: 500px;
  top: 175px;
  padding: 10px;
  background: url("@/assets/images/NewLayercontrol/layerBg.png") no-repeat;
  background-size: 100% 100%;
  width: 200px !important;
  height: auto;
  max-height: 62vh !important;
  overflow: auto;
  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>