<template>
  <div class="lengendPage">
    <!-- 展开收起 -->
    <div :class="['zksqImg', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'goLeft']" title="展开收起" @click="changeZhan"></div>
    <!-- 图例框 -->
    <div :class="['publicLegend', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
      <div v-for="item in legendList" :key="item.layername">
        <div class="titleB" @click="changeAllLegend(item)">
          {{ item.title }}
          <div class="iconImg">
            <el-icon v-if="item.isCheck" size="22">
              <Check />
            </el-icon>
          </div>
        </div>
        <div class="part" v-for="item2 in item.children" @click="changeLegend(item2)" :key="item2.layername">
          <img :src="getImageUrl(item2.url, 'newImgs/layerIcon')" class="img" />
          <p class="title">{{ item2.name }}</p>
          <div class="iconImg">
            <el-icon v-if="item2.isCheck" size="22">
              <Check />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="isOpenBuildingTL">
    <!-- 天地图、影像图切换 -->
    <el-popover placement="right-start" :width="80" trigger="hover">
      <template #reference><img src="@/assets/images/gisMap/earthIcon.png" alt="" class="earthIcon" /></template>
      <template #default>
        <div class="typeMap">
          <img src="@/assets/images/gisMap/defMap.png" alt="" :class="mapActive == 1 ? 'activeImg' : ''" @click="changeMapType(1)" />
          <img src="@/assets/images/gisMap/ysMap.png" alt="" :class="mapActive == 2 ? 'activeImg' : ''" @click="changeMapType(2)" />
        </div>
      </template>
    </el-popover>
  </div>
</template>
<script>
import { getImageUrl } from '@/utils/ruoyi';
import bus from '@/bus';
import mapCommonLegend from './commonLegend.js';
import axios from 'axios';
import flagicon from '@/assets/newImgs/flagicon.png';
import { nextTick, watch } from 'vue';
export default {
  components: {},
  props: {},
  setup(props) {
    const allData = reactive({
      dataList: {},
      legendList: [],
      ifExpand: true,
      mapPopupShow: false,
      pipeData: {},
      pipePopupShow: false,
      pointData: {},
      pointPopupShow: false,
      allMapList: [],
      isOpenBuilding: false,
      buildingModels: null,
      mapActive: 1,
    });
    const filterMapList = ref([]);
    // 展开收起
    const changeZhan = () => {
      allData.ifExpand = !allData.ifExpand;
    };
    // 天地、影像图切换
    function changeMapType(val) {
      allData.mapActive = val;
      if (val == 2) {
        bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: true });
      } else {
        bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: false });
      }
    }
    // 图例点击
    const changeLegend = item => {
      item.isCheck = !item.isCheck;
      return bus.emit('setLayerVisible', item);
    };
    //图例一级标题勾选
    const changeAllLegend = item => {
      if (item.noAllCheck) {
        return;
      }
      item.isCheck = !item.isCheck;
      item.children.forEach(element => {
        element.isCheck = !item.isCheck;
        changeLegend(element);
      });
    };
    //关闭弹窗
    const closePopup = () => {
      if (window.PopupInfo) {
        window.PopupInfo.hide();
        allData.mapPopupShow = false;
      }
      allData.pipePopupShow = false;
    };
    const closePointPopup = () => {
      allData.pointPopupShow = false;
    };

    onMounted(() => {
      mapCommonLegend.getStationData();
    });
    onBeforeUnmount(() => {
      bus.off('legendDataListDataMain');
      bus.off('initeLayer');
    });
    return {
      ...toRefs(allData),
      changeZhan,
      changeLegend,
      changeAllLegend,
      closePointPopup,
      closePopup,
      changeMapType,
    };
  },
};
</script>
<style lang="scss">
.el-popper {
  .typeMap {
    img {
      width: 100%;
      cursor: pointer;
    }
    .activeImg {
      border: 1px solid #00d1ff;
    }
  }
}
.isOpenBuildingTL {
  width: 240px;
  position: absolute;
  top: 6%;
  left: 5px;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  .earthIcon {
    cursor: pointer;
    width: 35px;
    height: 35px;
  }
}
.lengendPage {
  .zksqImg {
    width: 13px;
    height: 130px;
    background: url('@/assets/newImgs/down.png');
    background-size: 100% 100%;
    border-radius: 10px 10px 0px 0px;
    position: absolute;
    top: 40%;
    left: 243px;
    z-index: 115;
    cursor: pointer;
  }
  .goLeft {
    left: 2px;
  }
  .publicLegend {
    background: #00314e;
    border: 1px solid #094065;
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
    opacity: 0.7;
    border-radius: 10px;
    position: absolute;
    top: 10%;
    left: 5px;
    z-index: 110;
    height: 750px;
    width: 240px;
    overflow: auto;
    .titleB {
      display: flex;
      height: 35px;
      line-height: 35px;
      background: #094065;
      font-size: 16px;
      padding-left: 10px;
      .iconImg {
        margin-left: 125px;
        margin-top: 5px;
        height: 20px;
        .el-icon {
          font-weight: bold;
          &.active {
            color: #00ee6f;
          }
        }
      }
    }
    .part {
      display: flex;
      height: 40px;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: #08596a;
      }
      .img {
        width: 12px;
        height: 12px;
        margin-left: 15px;
        margin-right: 5px;
      }
      .title {
        margin-left: 5px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        width: 155px;
      }
      .iconImg {
        width: 20px;
        height: 20px;
        .el-icon {
          font-weight: bold;
          &.active {
            color: #00ee6f;
          }
        }
      }
    }
  }
}
#mapPopup {
  width: 300px;
  height: 200px;
  background: #00314e;
  border: 1px solid #094065;
  z-index: 115;
  .title {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleName {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ccf1ff;
      line-height: 22px;
      &:before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background: #00d1ff;
        margin-right: 10px;
      }
    }
    .closePopup {
      margin-right: 20px;
      height: 22px;
      cursor: pointer;
    }
  }
  .basicContent {
    display: flex;
    align-items: center;
    margin: 20px 80px;
    .contentKey {
      width: 80px;
      margin: 3px;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #00d1ff;
    }
    .contentValue {
      margin: 3px 3px 3px 15px;
      width: 200px;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #00d1ff;
    }
  }
}
#pipeInfo {
  width: 350px;
  padding: 10px;
  background: rgba(0, 49, 78, 0.5);
  border: 1px solid #094065;
  z-index: 111;
}
#pointInfo {
  width: 350px;
  padding: 10px;
  background: rgba(0, 49, 78, 0.5);
  border: 1px solid #094065;
  z-index: 111;
}
.title {
  display: flex;
  .infoTitle {
    display: flex;
    align-items: center;
    height: 22px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ccf1ff;
    line-height: 22px;
    margin: 5px;
    width: 330px;
    &:before {
      display: block;
      content: '';
      width: 3px;
      height: 16px;
      background: #00d1ff;
      margin-right: 10px;
    }
  }
  .closePopup {
    margin: 5px;
    height: 22px;
    cursor: pointer;
  }
}

.dividerLine {
  height: 2px;
  border: 1px;
  margin: 0px 0 10px 0px;
  background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
}
</style>