<template>
  <div id="effect">
    <VisualizationHeader />
    <Map type="effect"/>
    <service-tree :serviceData="serviceCXLayer" :defaultCheckedKeys=defaultLayer  />
    <div class="right">
      <div class="top">
        图例
      </div>
      <div class="tuli-content">
        <div class="single-item">
          <div class="single-color-1"></div>
          <span>项目信息</span>
        </div>
        <div class="single-item">
          <div class="single-color-2"></div>
          <span>填报规划区</span>
        </div>
        <div class="single-item">
          <div class="single-color-3"></div>
          <span>填报达标区</span>
        </div>
        <div class="single-item">
          <div class="single-color-4"></div>
          <span>申报达标区</span>
        </div>
        <div class="single-item">
          <div class="single-color-5"></div>
          <span>道路积水</span>
        </div>
        <div class="single-item">
          <div class="single-color-6"></div>
          <span>小区积水</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HouseBuildingLeft from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingLeft/HouseBuildingLeft.vue";
import HouseBuildingRight from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingRight/HouseBuildingRight.vue";
import Map from "@/views/c-cpns/Map.vue";
import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
import VisualizationHeader from "@/views/c-cpns/VisualizationHeader.vue";
import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
import {serviceCXLayer} from "@/data/all-layers.js";

export default {
  name: "Effect",
  components: {ServiceTree, VisualizationHeader, HouseBuildingLeft, HouseBuildingRight, TreeMenu, Map},
  setup(){
    let defaultLayer = ['D9999990320240701','D9999990520240701','D9999990620240701','D9999990320241018','D9999990120241018','D9999990220241018'];
    return{
      serviceCXLayer,
      defaultLayer
    }
  }
}
</script>

<style scoped lang="scss">
#effect {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  .right{
    background: rgba(29, 93, 160, 0.7);
    position: absolute;
    right: 80px;
    bottom:100px;
    z-index: 2;
    width:300px;
    padding: 8px;
    .top{
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      padding-bottom: 8px;
    }
    .tuli-content{
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .single-item{
        width: 100%;
        display: flex;
        padding: 4px;
        span{
          padding-left: 4px;
          font-size: 16px;
          color: #FFF;
        }
        .single-color-1{
          width: 40px;
          height: 20px;
          background-color: #f57a7a;
        }
        .single-color-2{
          width: 40px;
          height: 20px;
          background-color: #018b7d;
        }
        .single-color-3{
          width: 40px;
          height: 20px;
          background-color: #7f7396;
        }
        .single-color-4{
          width: 40px;
          height: 20px;
          background-color: #819862;
        }
        .single-color-5{
          width: 40px;
          height: 20px;
          background-color: rgb(255, 0, 0);
        }
        .single-color-6{
          width: 40px;
          height: 20px;
          background-color: #ff5500;
        }
      }
    }

  }
}
</style>
