<template>
  <div class="tree" :style="{ 'height': height + 'px', 'width': width == 0 ? 250 : width + 'px' }">
    <a-tree
      :tree-data="treeData"
      @select="handleCheckChange"
      :fieldNames="{ children: 'children', title: 'label', key: 'orgId' }"
      :auto-expand-parent="true"
      :expandedKeys.sync="expandedKeys"
      ref="PTTab_OrgTree"
      style="height:100%;">
    </a-tree>
  </div>
</template>

<script>
import request from '../../utils/gw_ajax_request';
export default {
  props: ['height', 'width'],
  data() {
    return {
      treeData: [],
      expandedKeys: [],
    };
  },
  created() {},
  mounted() {
    if (this.width == undefined) {
      this.width = '250';
    }
    if (this.height == undefined) {
      this.height = '550';
    }
    this.getTreeData();
  },
  methods: {
    getTreeData() {
      this.expandedKeys = [];
      request.get('/dc/ad/base/getOrgTreeData').then((res) => {
        this.treeData = [res.data];
        this.expandedKeys.push(res.data.id);
        this.$emit('treeCheckedDataChange', res.data.orgId);
      });
    },
    handleCheckChange(data, checked) {
      if (data.length > 0) {
        this.$emit('treeCheckedDataChange', data[0]);
      } else {
        this.$emit('treeCheckedDataChange', this.treeData[0].orgId);
      }
    },
  },
};
</script>

<style scoped>
.tree {
    overflow-y: auto;
    overflow-x: auto;
  }

  .a-tree {
    min-width: 100%;
    display: inline-block !important;
  }

  /*滚动条样式*/
  .tree::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /*正常情况下滑块的样式*/
  .tree::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .05);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
  }

  /*鼠标悬浮在该类指向的控件上时滑块的样式*/
  .tree:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
  }

  /*鼠标悬浮在滑块上时滑块的样式*/
  .tree::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
  }

  /*正常时候的主干部分*/
  .tree::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: white;
  }

  /*鼠标悬浮在滚动条上的主干部分*/
  .tree::-webkit-scrollbar-track:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    background-color: rgba(0, 0, 0, .01);
  }
</style>
