<template>
  <Transition name="slideTC">
    <div class="LayerControl" v-show="ShowTuCheng">
      <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
        <div class="GroupName">{{ item.title }}</div>
        <div
          class="TCList"
          v-for="item2 in item.children"
          :class="item2.layerVisible ? 'TCList_Check' : ''"
          @click="layerClick(item2)"
        >
          <div class="TCList_Select">
            <el-icon v-show="item2.layerVisible"><Check /></el-icon>
          </div>
          <img class="TCList_Icon" :src="item2.layerIcon" v-if="item2.layerIcon" />
          <!-- 当有未配置图片的图层时,将使用备用图片 -->
          <img class="TCList_Icon" :src="requireTuChengImg('TuCheng')" v-else />

          <div class="TCList_Name">
            {{ item2.layerName }}
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup name="LayerControl">
import { ref, reactive, toRefs, onMounted } from "vue";
// 图层控制icon引入
import { requireTuChengImg } from "@/utils/util";
const AllData = reactive({
  // 图层控制面板的渲染数据
  /**图层面板数据字段说明
   *@param title:渲染在图层控制中的图层分组名称
   *@param children:关联图层分组与图层的字段
   *@param layerName:渲染在图层控制中的图层名称
   *@param layerKey:gis使用的图层唯一id名称
   *@param layerIcon:渲染在图层控制中UI设计的图层示意图
   *@param layerVisible:代表当前图层是否勾选,true:勾选中且地图上图;false:不勾选且地图不上图
   */
  LayerData: [
    {
      title: "基本信息",
      children: [
        {
          layerName: "中心城区",
          layerKey: "",
          layerIcon: requireTuChengImg("zhongxinchengqu"),
          layerVisible: false,
        },
        {
          layerName: "路网",
          layerKey: "",
          layerIcon: "",
          layerVisible: false,
        },
        {
          layerName: "河流水系",
          layerKey: "",
          layerIcon: "",
          layerVisible: false,
        },
        {
          layerName: "低山台塬",
          layerKey: "",
          layerIcon: "",
          layerVisible: false,
        },
      ],
    },
    {
      title: "雨水系统",
      children: [
        {
          layerName: "排水分区",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
        {
          layerName: "雨水管网",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
        {
          layerName: "雨水排口",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
        {
          layerName: "雨水泵站",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
      ],
    },
    {
      title: "污水系统",
      children: [
        {
          layerName: "污水分区",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
        {
          layerName: "污水管网",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
        {
          layerName: "溢流口",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
        {
          layerName: "污水泵站",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
        {
          layerName: "污水处理厂",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
      ],
    },
    {
      title: "感知设备",
      children: [
        {
          layerName: "拦截闸",
          layerKey: "",
          layerIcon: null,
          layerVisible: false,
        },
      ],
    },
  ],
});
onMounted(() => {});

const props = defineProps({
  ShowTuCheng: false,
});

watch(
  () => props.ShowTuCheng,
  (newValue, oldValue) => {
    console.log("ShowTuCheng变化了", newValue, oldValue);
  },
  { immediate: true, deep: true }
);

const layerClick = (item2) => {
  item2.layerVisible = !item2.layerVisible;
  console.info(
    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
  );
};
</script>

<style lang="scss" scoped>
.LayerControl {
  width: 190px;
  height: 688px;
  position: absolute;
  top: 150px;
  right: 476px;
  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
  background-size: contain;
  box-sizing: border-box;
  padding: 25px 0px;
  overflow: auto;
  z-index: 998;

  .GroupBox {
    width: 100%;
    height: auto;
    margin-bottom: 5px;

    .GroupName {
      width: 190px;
      height: 25px;
      line-height: 25px;
      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
        linear-gradient(to right, #1c899600, #1c8996, #1c899600);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
    }
    .TCList {
      width: 100%;
      height: 14px;
      margin-top: 10px;
      display: flex;
      color: #fff;
      cursor: pointer;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20px;

      .TCList_Select {
        width: 14px;
        height: 14px;
        box-sizing: border-box;
        border: 1px solid #fff;
      }
      .TCList_Icon {
        width: 14px;
        height: 14px;
        margin: 0 10px;
      }
      .TCList_Name {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        height: 14px;
        line-height: 14px;
      }
    }
    .TCList_Check {
      color: #12f3ff;
      .TCList_Select {
        border: 1px solid #12f3ff;
      }
    }
  }
}
// 动画
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slideTC-enter-active,
.slideTC-leave-active {
  transition: all 0.2s ease-out;
}

.slideTC-enter-from,
.slideTC-leave-to {
  height: 0px;
  opacity: 0;
}
</style>