<template>
  <div>
    <el-tree
      :data="formatData(this.data)"
      :props="defaultProps"
      @node-click="handleNodeClick"
      :show-checkbox="true"
      :check-strictly="false"
      @check="check"
      @check-change="checkChange"
    >
      <span class="span-ellipsis" slot-scope="{ node, data }">
        <i
          class="el-icon-menu"
          v-if="
            data.nodeTag === 'top' ||
            data.nodeTag === 'street' ||
            data.nodeTag === 'community'
          "
        >
        </i>

        <i class="el-icon-s-custom" v-if="data.nodeTag === 'user'"> </i>
        <span :title="node.label">{{ node.label }}</span>
      </span>
    </el-tree>
    <el-tree
      :data="formatData(this.data2)"
      :props="defaultProps"
      @check="check"
      @node-click="handleNodeClicks"
      :show-checkbox="true"
      :check-strictly="false"
      @check-change="checkChange"
    >
      <span class="span-ellipsis" slot-scope="{ node, data }">
        <i
          class="el-icon-menu"
          v-if="data.nodeTag === 'top' || data.nodeTag === 'dept'"
        >
        </i>

        <i class="el-icon-s-custom" v-if="data.nodeTag === 'user'"> </i>
        <span :title="node.label">{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>
    
<script>
import {
  getsuoyouwangge,
  getzhuanguandanwei,
  getdingwei,
} from "@/api/detailDitu";
export default {
  data() {
    return {
      data: [],

      data2: [],
      defaultProps: {
        children: "children",
        label: "lable",
      },
      nodeId: [],
    };
  },
  mounted() {
    // this.testdata = this.formatData(this.data);
    // this.testdata2 = this.formatData(this.data2);
  },
  created() {
    this.getsuoyouwangge();
    this.getzhuanguandanwei();
  },
  methods: {
    async check(a, b) {
      // console.log(b.checkedNodes,'checkedNodes');
      this.nodeId = [];
      b.checkedNodes.forEach((item) => {
        this.nodeId.push(item.nodeId);
      });
      let nodeIds = this.nodeId.join(",");
      //  console.log(nodeIds,'nodeId');
      const res = await getdingwei(nodeIds);
      // console.log(res);
      this.$emit("checkDingwei", res, b);
    },
    async getsuoyouwangge() {
      const res = await getsuoyouwangge();
      // console.log(this.data);
      this.data = res.data;
      // this.formatDatas()
      this.data[0].children.forEach((item) => {
        item.children.forEach((item2) => {
          item2.children.forEach((itm) => {
            if (itm.lable.indexOf("[有网格]") != -1) {
              itm.lable = itm.lable.substring(5, itm.lable.length);
            }
          });
        });
      });

      // console.log(this.data);
    },
    async getzhuanguandanwei() {
      const res = await getzhuanguandanwei();
      this.data2 = res.data;
      //  console.log(this.data2);
      let arr = [];
      this.data2[0].children.forEach((item) => {
        item.children.forEach((itm) => {
          if (itm.lable.indexOf("[有网格]") != -1) {
            itm.lable = itm.lable.substring(5, itm.lable.length);
          }
        });
      });
    },
    // formatDatas(){
    //  return  this.data[0].children.forEach(item => {
    //         item.children.forEach(item2 => {
    //            item2.children.forEach(item3 => {
    //             console.log(item3.lable);
    //               item3.lable.replace('[有网格]','')
    //            })
    //          })
    //      });
    //  },
    formatData(params) {
      let data = params;
      data.map((item) => {
        if (item.nodeTag === "top" || item.nodeTag === "street") {
          item.disabled = true;
          this.formatData(item.children);
        }
      });
      return data;
    },

    handleNodeClick(data, a, b) {
      // console.log(data.label);
    },
    handleNodeClicks(data, a, b) {
      // console.log(data.label);
    },
    checkChange(a) {
      // console.log(a.label);
    },
  },
};  
</script>

<style>
</style>