<template>
  <div id="areaTree">
    <!-- <div class="box-title">
      <a href="#">房源<i class="fa fa-refresh" @click="freshArea"></i></a>
    </div> -->
    <div class="tree-box">
      <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
      </div>
    </div>
  </div>
</template>

<script>
import { httpGet } from "../api";
import {getlist,setRemoveTitle} from '../utils/index.js'
export default {
  name: "zTree",
  data: function () {
    return {
       selectedNode: {},
      setting: {
        view: {
          showLine: false,
          showIcon: true
        },
        callbakck: {
          onClick: function (treeId, treeNode) {
            console.log(treeNode)
        }
        },
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: 0,
          },
          zNodes: [{}],
        },
      },
    };
  },
  methods: {
    zTreeOnClick:function (event, treeId, treeNode) {
      //触发点击后面节点问题
      console.log(treeNode)
      this.selectedNode = treeNode;
      this.$emit("treeClick", treeNode);
    },
    getlist(id) {
      console.log(1111);
      // this.$parent.fatherMethod(id);
    },
    freshArea: function () {
      $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
    },
  },

  mounted() {
      $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(true);
  },
};
</script>

<style scoped>
/* @import "../assets/css/zTreeStyle.css"; */
#areaTree {
  /* border: 1px solid #e5e5e5; */
  margin-bottom: 2px;
  border-radius: 4px;
  overflow: hidden;
  max-height: 1000px;
  height: 200px;
  overflow-y: scroll;
}
.box-title {
  border-radius: 3px 3px 0 0;
  background-color: #f5f5f5;
}
.box-title a {
  color: #2fa4e7;
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 8px 15px;
  cursor: pointer;
}
.box-title .fa {
  float: right;
  line-height: 20px;
}
#treeDemo {
  font-size: 24px;
  position: relative;
}
</style>
