<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>
export default {
  props: {
    setting: {
      type: Object,
      require: false,
      default: function () {
        return {};
      },
    },
    zNodes: {
      type: Array,
      require: true,
      default: function () {
        return [];
      },
    },
  },
  name: "zTreeOne",
  data: function () {
    return {
      ztreeObj: null,
      list: [],
    };
  },
  methods: {
    freshArea: function () {
      $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
    },
  },
  mounted() {
      console.log(this.setting, this.zNodes)
    $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
  },
  watch: {
    zNodes: {
      handler: function(nodes){
        this.list = nodes;
        
        // update tree
        if(this.ztreeObj){
          this.ztreeObj.destroy();
        }
        this.$nextTick(() => {
          this.ztreeObj = $.fn.zTree.init($("#treeDemo"), Object.assign({}, this.ztreeSetting, this.setting), this.list);
          this.$emit('onCreated', this.ztreeObj)
           this.ztreeObj.expandAll(true);
        })
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

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