<template>
  <LeftSide ref="leftSide"  v-show="mapStore.leftSideMenu" />
  <DataCount v-show="false" style="left: 50%; transform: translateX(-50%)" ref="DataCount" />
  <div class="tjcj"  v-show="mapStore.rightSideMenu">
    <div class="leafTotal">
      <i>“天”基监测</i>
    </div>
    <div class="total">
      <div class="treeTitle1">卫星遥感</div>
      <div class="treeTitleCentent">
        <a-tree
          v-model:expandedKeys="expandedKeys1"
          v-model:selectedKeys="selectedKeys1"
          v-model:checkedKeys="checkedKeys1"
          checkable
          :tree-data="remoteSenseData"
          @check="handleNodeClick"
        >
          <template #title="{ tcmc, key, lastLevel, num, dysjmap }">
            <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
            <template v-else>
              <span class="tcmc" @click="flyToLayer(dysjmap)">{{ tcmc }}</span>
              <!-- <span v-if="lastLevel" class="tjkjdw" @click="flyToLayer(dysjmap)">定位</span> -->
              <div class="tftestWrapper" v-if="lastLevel">
                <a-slider @change="transparency(num, key)" class="tftest" v-model:value="sliderValues[num]" />
                <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ sliderValues[num] }}%</span>
              </div>
            </template>
          </template>
        </a-tree>
      </div>
      <div class="treeTitle2">InSAR</div>
      <div class="treeTitleCentent">
        <a-tree
          v-model:expandedKeys2="expandedKeys2"
          v-model:selectedKeys2="selectedKeys2"
          v-model:checkedKeys2="checkedKeys2"
          checkable
          :tree-data="InSARData"
          @check="handleNodeClick"
        >
          <template #title="{ tcmc, key, lastLevel, num, dysjmap }">
            <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
            <template v-else>
              <span class="tcmc" @click="flyToLayer(dysjmap)">{{ tcmc }}</span>
              <!-- <span v-if="lastLevel" class="tjkjdw" @click="flyToLayer(dysjmap)">定位</span> -->
              <div class="tftestWrapper" v-if="lastLevel">
                <a-slider class="tftest" @change="transparency(num, key)" v-model:value="sliderValues[num]" />
                <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ sliderValues[num] }}%</span>
              </div>
            </template>
          </template>
        </a-tree>
      </div>
    </div>
    <div class="leafTotal">
      <i>“空”基监测</i>
    </div>
    <div class="total">
      <div class="treeTitle3">无人机</div>
      <div class="treeTitleCentent">
        <a-tree
          v-model:expandedKeys1="expandedKeys1"
          v-model:selectedKeys1="selectedKeys1"
          v-model:checkedKeys1="checkedKeys1"
          checkable
          :tree-data="UAVData"
          @check="handleNodeClick"
        >
          <template #title="{ tcmc, key, lastLevel, num, dysjmap }">
            <span v-if="key === '0-0-1-0'" style="color: #1890ff" :title="title">{{ title }}</span>
            <template v-else>
              <span class="tcmc" @click="flyToLayer(dysjmap)" :title="tcmc">{{ tcmc }}</span>
              <!-- <span v-if="lastLevel" class="tjkjdw" @click="flyToLayer(dysjmap)">定位</span> -->
              <div class="tftestWrapper" v-if="lastLevel">
                <a-slider class="tftest" @change="transparency(num, key)" v-model:value="sliderValues[num]" />
                <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ sliderValues[num] }}%</span>
              </div>
            </template>
          </template>
        </a-tree>
      </div>
      <div class="treeTitle4">LiDAR</div>
      <div class="treeTitleCentent">
        <a-tree
          v-model:expandedKeys4="expandedKeys4"
          v-model:selectedKeys4="selectedKeys4"
          v-model:checkedKeys4="checkedKeys4"
          checkable
          :tree-data="LiDARData"
          @check="handleNodeClick"
        >
          <template #title="{ tcmc, key, lastLevel, num, dysjmap }">
            <span v-if="key === '0-0-1-0'" style="color: #1890ff" :title="title">{{ title }}</span>
            <template v-else>
              <span class="tcmc" @click="flyToLayer(dysjmap)" :title="tcmc">{{ tcmc }}</span>
              <!-- <span v-if="lastLevel" class="tjkjdw" @click="flyToLayer(dysjmap)">定位</span> -->
              <div class="tftestWrapper" v-if="lastLevel">
                <a-slider class="tftest" @change="transparency(num, key)" v-model:value="sliderValues[num]" />
                <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ sliderValues[num] }}%</span>
              </div>
            </template>
          </template>
        </a-tree>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, watch, ref, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import { useGeologicalStore } from '/@/store/modules/geological';
import LeftSide from './LeftSide.vue';
import DataCount from './DataCount.vue';
import { useRouter } from 'vue-router';
import { useMapStore } from '/@/store/modules/map';

let monitorSensorsList = null;
let monitorDevicesList = null;
export default defineComponent({
  name: 'CompanyList',
  components: {
    LeftSide,
    DataCount,
  },
  setup() {
    const mapStore = useMapStore();
    const geologicalStore = useGeologicalStore();
    const expandedKeys1 = ref([]);
    const selectedKeys1 = ref([]);
    const checkedKeys1 = ref([]);

    const expandedKeys2 = ref([]);
    const selectedKeys2 = ref([]);
    const checkedKeys2 = ref([]);

    const expandedKeys3 = ref([]);
    const selectedKeys3 = ref([]);
    const checkedKeys3 = ref([]);

    const expandedKeys4 = ref([]);
    const selectedKeys4 = ref([]);
    const checkedKeys4 = ref([]);
    watch(expandedKeys1, () => {
      console.log('expandedKeys1', expandedKeys1);
    });
    watch(selectedKeys1, () => {
      console.log('selectedKeys1', selectedKeys1);
    });
    watch(checkedKeys1, () => {
      console.log('checkedKeys1', checkedKeys1);
    });

    const mapAll = [];
    const handleNodeClick = (e) => {
      console.log('天基空基:', mapAll, e);
      mapAll.map((i) => {
        map.showLayer2D(i.code, e.indexOf(i.key) > -1 ? true : false, true);
        // if (i.xh) map.layer2d.zIndex(i.code, i.xh);
      });
    };
    const router = useRouter();
    // 监听当前路由
    // watch(
    //   () => router.currentRoute.value,
    //   (newValue) => {
    //     if (newValue.path != '/product') {
    //       debugger;
    //       mapAll.map((i) => map.showLayer2D(i.code, false));
    //     }
    //   },
    //   { immediate: true }
    // );
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount');
      mapAll.map((i) => map.showLayer2D(i.code, false));
    });
    // onUnmounted(() => {
    //   console.log('onUnmounted');
    // });

    const remoteSenseData = ref([]);
    const InSARData = ref([]);
    const UAVData = ref([]);
    const LiDARData = ref([]);

    const value1 = ref(100);
    const sliderValues = ref([]);
    let num = 0;
    function findLastLevelNodes(node) {
      if (!node || !node.children) {
        return [];
      } else {
        const result = [];
        for (const child in node.children.value) {
          var obj = node.children.value[child];
          if (obj.lastLevel) {
            obj.num = num;
            sliderValues.value.push(100);
            num++;
          }
          const childrenWithLastLevel = findLastLevelNodes(child);
          result.push(...childrenWithLastLevel);
        }
        return result;
      }
    }

    const transparency = (index, key) => {
      var name = mapAll.find((i) => i.key == key);
      map.setLayer2D(name.code, 'alpha', sliderValues.value[index] / 100);
    };
    //图层定位
    const flyToLayer = (e) => {
      console.log(e);
      map.flyToLayer(e.code);
    };

    function mySort(list) {
      return list.value.sort(function (a, b) {
        if (!a.dysjmap || !a.dysjmap.sjsj) return 1;
        if (!b.dysjmap || !b.dysjmap.sjsj) return -1;
        return a.dysjmap.sjsj - b.dysjmap.sjsj;
      });
    }

    //天基，空基
    onMounted(() => {
      geologicalStore
        .TJKJList({
          pages: 1,
          size: 1000,
        })
        .then((res) => {
          console.log('天基，空基:', res);
          if (!res) return;
          var res = JSON.parse(JSON.stringify(res).replace(/jcglTkjcsjVoList/g, 'children'));
          var res = JSON.parse(JSON.stringify(res).replace(/id/g, 'key'));
          res.map((i) => {
            if (i.children && i.children.length) {
              i.children.map((j) => {
                j.lastLevel = true;
                j.num = num;
                sliderValues.value.push(j.alpha || 100);
                num++;
                if (j.dysjmap && j.dysjmap.code) {
                  mapAll.push({ key: j.key, code: j.dysjmap.code, xh: j.xh });
                }
              });
            }
            if (i.sjlxcode == 1) {
              remoteSenseData.value.push(i);
            } else if (i.sjlxcode == 2) {
              InSARData.value.push(i);
            } else if (i.sjlxcode == 3) {
              UAVData.value.push(i);
            } else if (i.sjlxcode == 4) {
              console.log('i', i);
              // LiDARData.value.push(i);
            }
          });
          remoteSenseData.value = mySort(remoteSenseData);
          InSARData.value = mySort(InSARData);
          UAVData.value = mySort(UAVData);
          LiDARData.value = mySort(LiDARData);
        });
    });

    return {
      mapStore,
      flyToLayer,
      handleNodeClick,
      sliderValues,
      transparency,
      value1,
      remoteSenseData,
      InSARData,
      UAVData,
      LiDARData,

      expandedKeys1,
      selectedKeys1,
      checkedKeys1,

      expandedKeys2,
      selectedKeys2,
      checkedKeys2,

      expandedKeys3,
      selectedKeys3,
      checkedKeys3,

      expandedKeys4,
      selectedKeys4,
      checkedKeys4,
    };
  },

  data() {
    return {
      markerAddSBType: true,
      markerAddCGQType: true,
      props: {
        children: 'jcglTkjcsjVoList',
        label: 'label',
        desc: 'desc',
      },
    };
  },

  mounted() {
    const monitorDevicesStore = useMonitorDevicesStore();
    this.getMonitorDevicesList(monitorDevicesStore);
    this.getMonitorSensorsList(monitorDevicesStore);
  },

  methods: {
    //获取设备列表
    getMonitorDevicesList(monitorDevicesStore) {
      monitorDevicesStore
        .LiGongMonitorDevicesList({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          console.log('获取设备列表:', res);
          monitorDevicesList = res.result.records;
          if (this.$refs.leftSide) this.$refs.leftSide.setMonitorDevicesList(monitorDevicesList); // 调用子组件的方法
        });
    },

    //获取传感器列表
    getMonitorSensorsList(monitorDevicesStore) {
      monitorDevicesStore
        .LiGongMonitorSensorsList({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          console.log('获取传感器列表:', res);
          monitorSensorsList = res.result.records;
        });
    },
  },
});
</script>
<style>
.tcmc {
  display: block;
  float: left;
  width: 155px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.treeTitle1 {
  height: 34px;
  line-height: 34px;
  color: #fff;
  widows: 100vw;
  background: rgba(126, 205, 255, 0.1) url('../../assets/images/青色三角.png') no-repeat;
  background-position: 0px center;
  padding-left: 30px;
}
.treeTitle2 {
  height: 34px;
  line-height: 34px;
  color: #fff;
  widows: 100vw;
  background: rgba(126, 205, 255, 0.1) url('../../assets/images/绿色三角.png') no-repeat;
  background-position: 0px center;
  padding-left: 30px;
}
.treeTitle3 {
  height: 34px;
  line-height: 34px;
  color: #fff;
  widows: 100vw;
  background: rgba(126, 205, 255, 0.1) url('../../assets/images/黄色三角.png') no-repeat;
  background-position: 0px center;
  padding-left: 30px;
}
.treeTitle4 {
  height: 34px;
  line-height: 34px;
  color: #fff;
  widows: 100vw;
  background: rgba(126, 205, 255, 0.1) url('../../assets/images/红色三角.png') no-repeat;
  background-position: 0px center;
  padding-left: 30px;
}

.leaflet-popup-content-wrapper {
  background: none;
  border: none;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0);
}

.leaflet-popup-close-button {
  top: 14px;
  right: 10px;
}

.popup {
  background: url('../../assets/images/pop2.png') no-repeat;
  width: 248px;
  height: 266px;
  color: #fff;
  padding: 12px 20px 20px 27px;
  background-size: 100% 260px;
}

.popup b.see {
  font-weight: normal;
  text-decoration: underline;
  cursor: pointer;
}

.popup li {
  padding: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popupBut {
  text-align: right;
}
.popupBut img {
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: inline-block;
}
.popup h3 {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 8px;
}

.popup span {
  color: #74b8cd;
}

.popup b {
  font-weight: normal;
}
</style>
<style lang="less" scoped>
@font-face {
  font-family: 'AlimamaShuHeiTi';
  src: url('../../assets/font/AlimamaShuHeiTi-Bold.ttf');
}

.tjkjdw {
  display: inline-block;
  border-radius: 5px;
  background: rgb(4 82 90);
  padding: 0 5px;
  cursor: pointer;
}

.tjcj .treeTitleCentent {
  padding-left: 0px;
}

.treeTitleCentent {
  width: 100%;
  padding-left: 23px;
}

::v-deep .treeTitleCentent .ant-tree-checkbox-inner {
  border: 1px solid #ffffff !important;
}

.tftest {
  width: 93px;
}

.tftestWrapper {
  margin-left: 150px;
  display: flex;
  width: 133px;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  position: relative;
  top: -33px;
}

.tftestWrapper > span {
  height: 30px;
  line-height: 37px;
}

.total::-webkit-scrollbar-thumb {
  background-color: #007e8f; /* 设置滚动条滑块颜色 */
  border-radius: 0px;
}

.total::-webkit-scrollbar-track {
  background-color: #092638;
}

::v-deep .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background: rgba(8, 39, 55, 0) !important;
}

::v-deep .ant-tree .ant-tree-node-content-wrapper:hover {
  background: rgba(3, 49, 79, 0.4);
}

::v-deep .ant-tree {
  background: rgba(8, 39, 55, 0) !important;
  color: #fff;
}

// .total {
//   padding: 20px;
//   width: 400px;
//   color: #fff;
//   border: 1px solid transparent;
//   background: rgba(3, 49, 79, 0.4);
//   border-image: linear-gradient(to right, #134564, #2eb3ff, #134564) 1;
//   // height: 375px;
//   height: calc(100vh - 660px);
//   overflow-y: auto;
// }

.total {
  position: relative;
  padding: 20px;
  width: 100%;
  color: #fff;
  border: 1px solid transparent;
  background: rgba(3, 49, 79, 0.4);
  border-image: linear-gradient(to right, #134564, #2eb3ff, #134564) 1;
  // height: 375px;
  // height: calc(100vh - 520px);
  height: 421px;
  overflow-y: auto;
}
.total:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient( rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
 // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
}
.total:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient( rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
}

@media screen and (min-width: 2160px) {
  .total {
    height:  421px;
  }
  
}

// .leafTotal {
//   width: 400px;
//   height: 47px;
//   background: url('../../assets/images/jcsbtj.png') no-repeat;
//   font-size: 19px;
//   font-weight: bold;
//   color: #fff;
//   line-height: 38px;
//   padding-left: 33px;
//   margin: 20px 0px 20px 0px;
// }

.leafTotal {
  width: 400px;
  height: 31px;
  background: url('../../assets/images/jcsbtj.png') no-repeat;
  font-size: 19px;
  font-weight: bold;
  color: #fff;
  line-height: 31px;
  padding-left: 33px;
  margin: 20px 0px 10px 0px;
}
.leaflet-popup-tip-container {
  width: none;
  height: 123px;
  top: -90px;
  left: 236px;
}

.tjcj {
  margin-bottom: 1rem;
  height: 100%;
  // position: fixed;
  position: absolute;
  right: 20px;
  top: 60px;
  z-index: 3;
  width: 400px;
  // height: calc(100vh - 7rem);
}

.tjcj {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    right: -400px;
  }

  100% {
    right: 20px;
  }
}
</style>
