<template>
  <div class="layerControlvue" v-show="Show">
    <div class="layericon" @click="allData.showControlBox = !allData.showControlBox"></div>
    <div class="layericon-back" @click="areaBack()" v-show="isShowBack" title="返回"></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"
          :filter-node-method="filterTX"
          @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 class="GWlegend">
        <div class="legend-title">{{ legendList.pipeNetworkFilling.title }}</div>
        <div class="flex flex-align-center flex-wrap">
          <div
            class="legend-item flex flex-align-center"
            style="width: 50%"
            v-for="item in legendList.pipeNetworkFilling.data"
            :key="item.name"
          >
            <div class="icon" :style="{ background: item.color }"></div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </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, computed } from 'vue';
const { proxy } = getCurrentInstance();
const Show = ref(true);
const selectList = ref([]);
const backObj = ref(null);
const TXtYPE = ref('');
const dataSource = ref([
  {
    value: '地图切换',
    label: '地图切换',
    class: 'target-class',
    children: [
      {
        value: 'newfiber-XYZLayer,高清地图',
        label: '影像地图',
        icon: getImageUrl('maptwo.png', 'images/NewLayercontrol'),
        // VShow: true,
      },
    ],
  },
  {
    value: '排水体系',
    label: '排水体系',
    class: 'target-class',
    children: [
      {
        value: '雨水分区',
        label: '雨水系统',
        icon: getImageUrl('yuliangzhan.png', 'images/NewLayercontrol'),
        VShow: 'sewage',
      },
      {
        value: '污水分区',
        label: '污水系统',
        icon: getImageUrl('zishuidian.png', 'images/NewLayercontrol'),
        VShow: 'rain',
      },
      {
        value: '尾水路径',
        label: '尾水路径',
        icon: getImageUrl('尾水路径.png', 'images/NewLayercontrol'),
      },
      {
        value: 'sewage_pump_station_info',
        icon: getImageUrl('wushuibengzhan.png', 'images/NewLayercontrol'),
        label: '污水泵站',
        VShow: 'rain',
      },
      {
        value: 'sewage_factory_info',
        icon: getImageUrl('wushuichulichang.png', 'images/NewLayercontrol'),
        label: '污水厂',
        VShow: 'rain',
      },
      {
        label: '污水处理站',
        value: 'sewage_factory_station_info',
        icon: getImageUrl('wushuichulizhan.png', 'images/NewLayercontrol'),
        VShow: 'rain',
      },
      {
        value: 'rain_water_pump_station_info',
        icon: getImageUrl('yushuibengzhan.png', 'images/NewLayercontrol'),
        label: '雨水泵站',
        VShow: 'sewage',
      },
      {
        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'),
        VShow: 'sewage',
      },
      {
        value: '污水管网',
        label: '污水管网',
        icon: getImageUrl('lay-wushuiguanwang.png', 'images/NewLayercontrol'),
        VShow: 'rain',
      },
      {
        value: '雨水管网充满度',
        label: '雨水管网充满度',
        icon: getImageUrl('lay-yushuiguanwang.png', 'images/NewLayercontrol'),
        VShow: 'sewage',
      },
      {
        value: '污水管网充满度',
        label: '污水管网充满度',
        icon: getImageUrl('lay-wushuiguanwang.png', 'images/NewLayercontrol'),
        VShow: 'rain',
      },
    ],
  },
  /*  {
    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: 'gangqu_video',
        label: '港渠视频',
      },
      {
        value: 'water_logging_video',
        label: '渍水视频',
      },
      {
        value: 'pump_video',
        label: '泵站视频',
      },
      {
        value: 'outlet_video',
        label: '排口水闸',
      },
      {
        value: 'under_video',
        label: '下穿涵洞',
      },
      {
        value: 'dike_video',
        label: '堤防视频',
      },
      {
        value: 'reservoir_video',
        label: '水库视频',
      },
    ],
  },
  {
    value: '监测点',
    label: '监测点',
    class: 'target-class',
    children: [
      {
        value: 'rainwater_pipeline_quality_area',
        label: '社区雨水接驳口',
        VShow: 'sewage',
      },
      {
        value: 'rainwater_pipeline_quality_city',
        label: '市政雨水监测',
        VShow: 'sewage',
      },
      {
        value: 'sewage_pipeline_quality_city',
        label: '市政污水监测',
        VShow: 'rain',
      },
      {
        value: 'outlet_quality',
        label: '排口水质',
      },
      {
        value: 'outlet_water_level',
        label: '排口流量',
      },
      {
        value: 'waterlogging',
        label: '渍水点',
      },
    ],
  },
  {
    value: '其他',
    label: '其他',
    class: 'target-class',
    children: [
      {
        value: 'drainage_info',
        label: '排水户',
      },
      {
        value: '港渠',
        label: '港渠',
      },
      {
        value: 'outlet_info',
        label: '排口',
      },
      {
        value: '建筑物',
        label: '建筑物',
      },
    ],
  },
]);
const legendList = {
  pipeNetworkFilling: {
    title: '管网充满度(%)',
    data: [
      { name: '0-60', color: 'rgba(52,176,0,.1)' },
      { name: '60-70', color: 'rgba(254,203,0,1)' },
      { name: '70-90', color: 'rgba(223,1,0,1)' },
      { name: '>90', color: 'rgba(142,14,11,1)' },
    ],
  },
};
const allData = reactive({
  showControlBox: false, //控制图层控制是否展示和隐藏
});

function areaBack() {
  debugger;
  backObj.value.name == '1'
    ? (bus.emit('clearTemporaryData'), bus.emit(mapInitBusName), (backObj.value = null))
    : bus.emit('panelDataToMap', backObj.value);
}

const isShowBack = computed(() => {
  return !proxy.$route.fullPath.includes('DrainageSystem') && backObj.value != null;
});

//  这个方法会出现当前已勾选节点，或者半节点的状态
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'; // 修改父级元素样式
      // 你可以在这里设置父级元素的其他样式
    }
  });
}
function filterTX(value, data, node) {
  if (!value) return true;
  return !data.label.includes(value);
}
onMounted(() => {
  nextTick(() => {
    changeyangshi();
  });
  bus.on('YQ_head', val => {
    console.log('valvalvalval', val);
    if (val == false) {
      Show.value = false;
    } else {
      Show.value = true;
    }
  });

  bus.on('set_area_parent', val => (backObj.value = val));

  bus.on('yjcp_type_data', val => {
    selectList.value = [];
    setLayerVisible([], selectList.value);
    dataSource.value.forEach(i=>{
      i.children.forEach(k =>{
        if(k.value.includes(val)){
          selectList.value.push(k.value)
          console.log(selectList.value)
          setLayerVisible(selectList.value, []);
        }
      })
    })
    // console.log('111111', val);
    // console.log('222222', appStore.MapDataCount);    
  });
});

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

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(
  () => appStore.TiXiType,
  (newValue, oldValue) => {
    TXtYPE.value = newValue;
    console.log('图层控制中的雨污水状态', TXtYPE.value);
    let data = ''; //用来筛选不展示的图例,雨水专题不展示 污 相关的图层
    if (newValue == 'rain') {
      data = '污';
    } else if (newValue == 'sewage') {
      data = '雨';
    } else {
      data = '';
    }
    proxy.$refs.layertree.filter(data);
    console.log('mmm', dataSource.value);
    // 清除当前专题下的所有已勾选的图层
    const AllArray = [];
    dataSource.value.forEach(element => {
      element.children.forEach(element2 => {
        if (element2.VShow == TXtYPE.value) AllArray.push(element2.value);
      });
    });
    console.log(AllArray);
    setLayerVisible([], AllArray);
  },
  { 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%;
}
.layericon-back {
  z-index: 0;
  position: absolute;
  cursor: pointer;
  width: 35px;
  height: 35px;
  left: 489px;
  top: 170px;
    background: url('@/assets/images/pictureOnMap/goBack.jpg') no-repeat;
  background-size: 100% 100%;
  border-radius: 50%;

}

::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;
}
.GWlegend {
  box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.35);
  border-radius: 4px;
  padding: 10px;
  overflow: hidden;
  .legend-title {
    line-height: 30px;
    font-size: 16px;
    text-align: center;
  }
  .legend-item {
    height: 30px;
    font-size: 14px;
  }
  .icon {
    width: 12px;
    height: 12px;
    margin-right: 5px;
  }
}
</style>