<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>
</template>

<script setup>
import { getImageUrl } from '@/utils/ruoyi';
import cesiumMapLegend from './cesiumMapLegend.js';
const { proxy } = getCurrentInstance();
const legendList = ref([]);
const ifExpand = ref(true);
// 展开收起
const changeZhan = () => {
  ifExpand.value = !ifExpand.value;
};

onMounted(() => {
  console.log('1111111111');
  legendList.value = cesiumMapLegend;
  console.log('legendList.value---', legendList.value);
});
</script>

<style lang="scss">
.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;
          }
        }
      }
    }
  }
}
</style>