<template>
  <div id="serviceTree" v-show="mapStore.layerShow" :class="[mapStore.left_board?'switch-left-active':'switch-left']">
    <div class="common-title">
      <span>图层</span>
      <div class="title-right">
        <el-switch
            v-model="layerModel"
            size="middle"
            @change="changeLayerModel"
            active-text="图层"
            inactive-text="聚类"
        />
      </div>

    </div>
    <div class="tree-content scroll">
      <template v-if="layerModel">
        <el-tree
            :data="treeData"
            @check="changeChange"
            ref="treeRef"
            show-checkbox
        >
          <template #default="{ node, data }">
            <span  class="custom-tree-label">{{ node.label }}</span>
            <span  v-if="node.isLeaf" class="custom-tree-gl-icon" @click="showLayerGL(data)">
            <OfficeBuilding />
          </span>
            <span  v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
            <Document />
          </span>
            <span  v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
            <Edit />
          </span>
          </template>
        </el-tree>
      </template>
      <template v-else>
        <el-tree
            :data="treeData"
            node-key="labelId"
            @check-change="handleCheckChange"
            ref="treeRef"
            show-checkbox
        >
          <template #default="{ node, data }">
            <span  class="custom-tree-label">{{ node.label }}</span>
            <span  v-if="node.isLeaf" class="custom-tree-gl-icon" @click="showLayerGL(data)">
            <OfficeBuilding />
          </span>
            <span  v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
            <Document />
          </span>
            <span  v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
            <Edit />
          </span>
          </template>
        </el-tree>
      </template>
    </div>
  </div>
</template>

<script>
import {onMounted, ref, watch} from "vue";
import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
import {getServiceTree} from "@/service/http.js";
import {AddSingleLayer, AreaJsonRankShow, clearAllLayer, FeatureThreeDimension} from "@/unit/map/addLayer.js";
import {useMapStore} from "@/store/mapStore.js";
import {Edit, Document, OfficeBuilding, Aim} from "@element-plus/icons-vue";
import {getMapNum} from "@/service/map.js";
export default {
  name: "ServiceTree",
  components: {Aim, CommonTitle,Edit,Document,OfficeBuilding},
  setup(){
    const mapStore = useMapStore()
    let treeData = ref([]);
    const treeRef = ref(null);
    const showGL = ref(false);
    const showGroup = ref(false);
    const GLLayer = ref('');
    const GroupLayer = ref('');
    const layerModel = ref(false);
    function changeLayerModel(item){
      clearAllLayer()
      mapStore.currentLayerList = []
      AreaJsonRankShow({
        status:"hide"
      });
    }
    watch(() => mapStore.currentLayerType,(val) => {
      debugger
      changeLayerModel();
      mapStore.currentNum = null;
      mapStore.currentLayer = null;
      FeatureThreeDimension({
        status:"hide"
      });
      AreaJsonRankShow({
        status:"hide"
      });
      if(mapStore.currentLayerType === "mainPage"){  //首页
        getTreeData("1318");
      }else if(mapStore.currentLayerType === "houseBuilding"){  //房屋建筑
        getTreeData("1319");
      }else{   //市政设施
        getTreeData("1324");
      }
    },{
      immediate:true,
      deep:true
    })
    function getTreeData(labelId){
      getServiceTree({
        TYPE:"",
        labelId:labelId
      }).then(res =>{
        debugger
        let resData =res.data.data.Rows[0].children;
        treeData.value = resData;
      })
    }
    function applyData(data){
      window.open("https://cimweb.zjw.sh.cegn.cn:2007/space-application/#/main/resource-apply?name=" + data.label)

    }
    function showDetailDialog(data){
      mapStore.layerDetailObj = data;
      mapStore.layerDetailShow = true;
    }
    function showLayerGL(data){
      debugger
      if(showGL&&data.ADDRESS == GLLayer.value){
        showGL.value = false;
        GLLayer.value = '';
        FeatureThreeDimension({
          url:data.ADDRESS,
          token:data.TOKEN,
          status:"hide"
        })
        return
      }
      GLLayer.value = data.ADDRESS;
      FeatureThreeDimension({
        url:data.ADDRESS,
        token:data.TOKEN,
        status:"show"
      });
    }
    function changeChange(){
      let nowChecked = treeRef.value.getCheckedNodes(true);
      //如果是图层
      if(layerModel.value){
        //找到原来有现在没有的删除
        for(let i = 0; i < mapStore.currentLayerList.length; i++){
          if(nowChecked.findIndex(i2 =>i2.CODE === mapStore.currentLayerList[i].CODE) == -1){
            debugger
            AddSingleLayer({
              type:mapStore.currentLayerList[i].TYPE,
              id:mapStore.currentLayerList[i].CODE,
              visible:false,
              url:mapStore.currentLayerList[i].ADDRESS,
              opacity:100,
              title:mapStore.currentLayerList[i].label,
              wkid:mapStore.currentLayerList[i].COORDINATE_SYSTEM,
              token:mapStore.currentLayerList[i].TOKEN
            })
            mapStore.currentLayerList.splice(i,1);
            i--;
          }
        }
        //找到原来没有，现在有的新增
        for(let i = 0; i < nowChecked.length; i++){
          if(mapStore.currentLayerList.findIndex(i2 =>i2.CODE === nowChecked[i].CODE) == -1){
            mapStore.currentLayerList.push(nowChecked[i]);
            debugger
            AddSingleLayer({
              type:nowChecked[i].TYPE,
              id:nowChecked[i].CODE,
              visible:true,
              url:nowChecked[i].ADDRESS,
              opacity:100,
              title:nowChecked[i].label,
              wkid:nowChecked[i].COORDINATE_SYSTEM,
              token:nowChecked[i].TOKEN
            })
          }
        }
      }
    }
    function handleCheckChange(data,checked,indeterminate){
      clearAllLayer();
      if (checked) {
        // 获取所有已选中的节点
        debugger
        const checkedNodes = treeRef.value.getCheckedNodes(true);
        data = checkedNodes[checkedNodes.length -1];
        mapStore.currentNum = data.UUID;
        mapStore.currentLayer = data;
        AddSingleLayer({
          type:data.TYPE,
          id:data.CODE,
          visible:true,
          url:data.ADDRESS,
          opacity:100,
          title:data.label,
          wkid:data.COORDINATE_SYSTEM,
          token:data.TOKEN
        })
        // 只保留当前选中的节点
        // checkedNodes.forEach(node => {
        //   debugger
        //   if (node.labelId !== data.labelId) {
        //     treeRef.value.setChecked(node.labelId,false,true)
        //   }
        // });
        if (checkedNodes.length > 1) {
          treeRef.value.setCheckedKeys([data.labelId])
        }
        if(mapStore.scale > 100000){
          getMapNum('county',mapStore.currentNum).then(res =>{
            debugger
            let data = res.data.data;
            let zxCount = 0;
            let zxList = ['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区']
            data.forEach(item =>{
              if(zxList.indexOf(item.name) > -1){
                zxCount += item.value * 1;
              }
            })
            data.push({
              name:"中心城区",
              value:zxCount
            })
            debugger
            AreaJsonRankShow({
              type:"zx",
              status:"show",
              data:data
            });
          })
        }else if(mapStore.scale > 80000){
          getMapNum('county',mapStore.currentNum).then(res =>{
            debugger
            let data = res.data.data
            AreaJsonRankShow({
              type:"qx",
              status:"show",
              data:data
            });
          })
        }else{
          getMapNum('street',mapStore.currentNum).then(res =>{
            debugger
            let data = res.data.data
            AreaJsonRankShow({
              type:"jz",
              status:"show",
              data:data
            });
          })
        }
        if(mapStore.scale < 6000){
          FeatureThreeDimension({
            url:mapStore.currentLayer.ADDRESS,
            token:mapStore.currentLayer.TOKEN,
            status:"show"
          });
        }
      }else{
        mapStore.currentNum = null;
        mapStore.currentLayer = null;
        FeatureThreeDimension({
          status:"hide"
        });
        AreaJsonRankShow({
          status:"hide"
        });
      }
    }
    // onMounted(()=>{
    //   getTreeData()
    // })
    return {
      mapStore,
      treeData,
      changeChange,
      handleCheckChange,
      treeRef,
      applyData,
      showLayerGL,
      showDetailDialog,
      layerModel,
      changeLayerModel
    }
  }
}
</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: 460px;
  top: 87px;
  width: 370px;
  height: 553px;
  background-color: rgba(0, 22, 52, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .common-title{
    width: 100%;
    height: 37px;
    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{
    width: 100%;
    height: 500px;
  }
}
.switch-left-active{
  transition-property: transform;
  transition-duration:1s;
}
.switch-left{
  transition-property: transform;
  transition-duration:1s;
  transform: translateX(-480px);
}
</style>