<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([
  {
    id:"0",
    isRadio:true,
    value: '地图切换',
    label: '地图切换',
    class: 'target-class',
    children: [
      {
        id:"0-0",
        value: '!newfiber-XYZLayer',
        label: '电子地图',
        icon: getImageUrl('mapone.png', 'images/NewLayercontrol'),
      },
      {
        id:"0-1",
        value: 'newfiber-XYZLayer',
        label: '影像地图',
        icon: getImageUrl('maptwo.png', 'images/NewLayercontrol'),
      },
      {
        id:"0-2",
        value: '高清地图',
        label: '高清地图',
        icon: getImageUrl('mapthree.png', 'images/NewLayercontrol'),
      },
    ],
  },
  {
    id:"1",
    isRadio:true,
    value: '排水体系',
    label: '排水体系',
    class: 'target-class',
    children: [
      {
        id:"1-0",
        value: '雨水分区',
        label: '雨水系统',
        icon: getImageUrl('yuliangzhan.png', 'images/NewLayercontrol'),
      },
      {
        id:"1-1",
        value: '污水分区',
        label: '污水系统',
        icon: getImageUrl('zishuidian.png', 'images/NewLayercontrol'),
      },
    ],
  },
  {
    id:"2",
    isRadio:true,
    value: '管网',
    label: '管网',
    class: 'target-class',
    children: [
      {
        id:"2-0",
        value: '雨水管网',
        label: '雨水管网',
        icon: getImageUrl('lay-yushuiguanwang.png', 'images/NewLayercontrol'),
      },
      {
        id:"2-1",
        value: '污水管网',
        label: '污水管网',
        icon: getImageUrl('lay-wushuiguanwang.png', 'images/NewLayercontrol'),
      },
    ],
  },
  {
    id:"3",
    isRadio:false,
    value: '监测点',
    label: '监测点',
    class: 'target-class',
    children: [
      {
        id:"3-0",
        value: 'rainwater_pipeline_quality_area',
        label: '接驳口',
      },
    ],
  },
]);

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

//  这个方法会出现当前已勾选节点，或者半节点的状态
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);
      }
    });
  }


  console.log('node',node);
  nextTick(() => {
    let arr = dataSource.value[0].children.map(p => p.value);
    arr.map(item => {
      if (selectList.value.includes(item)) {
        selectList.value.splice(selectList.value.indexOf(item), 1);
      }
    });
    if (arr.includes(data.value)) {
      selectList.value.push(data.value);
      proxy.$refs.layertree.setCheckedKeys(selectList.value);
    }
  });
}
function setLayerVisible(newVal = [], oldVal = []) {
  console.log('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 => {
    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(() => 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: 170px !important;
  height: auto;
  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>