<template>
  <div id="serviceTree" class="switch-left-active">
    <div class="common-title">
      <span>图层列表</span>
    </div>
    <div class="tree-content">
      <el-tree
          :data="treeData"
          node-key="labelId"
          @check-change="handleCheckChange"
          ref="treeRef"
          :default-checked-keys="defaultCheckedKeys"
          show-checkbox
      >
        <template #default="{ node, data }">
          <span  class="custom-tree-label">{{ node.label }}</span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import {onMounted, ref, watch} from "vue";
import {getServiceTree} from "@/service/http.js";
import {AddSingleLayer} from "@/unit/map/addLayer.js";
export default {
  name: "ServiceTree",
  props: {
    defaultCheckedKeys:{
      type: Array,
      default: () => []  // 默认值为空数组
    },
    serviceData: {
      type: Array,
      default: () => []  // 默认值为空数组
    }
  },
  setup(props, {emit}) {
    debugger
    let treeData = ref([]);
    const treeRef = ref(null);
    const currentLayerList = ref([]);
    function handleCheckChange(data,checked,indeterminate){
      debugger
      if(checked){
        //没有,新增
        currentLayerList.value.push(data);
        AddSingleLayer({
          id: data.labelId,
          title: data.label,
          visible: true,
          wkid: 1,
          url: data.ADDRESS,
          type: "切片地图"
        });
      }else{
        //有，移除
        let index = currentLayerList.value.findIndex(item => item.labelId === data.labelId);
        if(index > -1){
          currentLayerList.value.splice(index,1);
        }
        AddSingleLayer({
          id: data.labelId,
          title: data.label,
          visible: false,
          wkid: 1,
          url: data.ADDRESS,
          type: "切片地图"
        });
      }
    }
    function getTreeData(){
      // getServiceTree({
      //   TYPE:"",
      //   labelId:labelId
      // }).then(res =>{
      //   debugger
      //   let resData =res.data.data.Rows[0].children;
      //   treeData.value = resData;
      // })
      treeData.value = props.serviceData;
    }
    onMounted(()=>{
      getTreeData()
    })
    return {
      treeData,
      treeRef,
      handleCheckChange
    }
  }
}
</script>

<style scoped lang="scss">
#serviceTree{
  :deep{
    .el-tree{
      background: transparent !important;
    }
  }
  .custom-tree-label{
    font-size: 16px;
  }
  .custom-tree-group-icon{
    position: absolute;
    right: 100px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  .custom-tree-gl-icon{
    position: absolute;
    right: 70px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  .custom-tree-detail-icon{
    position: absolute;
    right: 40px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  .custom-tree-icon{
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  position: absolute;
  z-index: 2;
  left: 20px;
  top: 87px;
  width: 370px;
  height: 553px;
  background-color: rgba(0, 22, 52, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .common-title{
    width: 100%;
    height: 37px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: url("@/assets/imgs/tkxbt.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    span {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 20px;
      color: #BBCDE6;
      opacity: 1;
      padding-left: 60px;
      background: linear-gradient(0deg, #ACE5FF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .title-right{
      padding-right: 60px;
    }
  }
  .tree-content{
    padding-top: 20px;
    width: 100%;
    height: 500px;
  }
}
</style>