<template>
  <div class="org-tree">
    <Tree
      ref="orgTree"
      :data="orgTree"
      :load-data="loadData"
      @on-select-change="onTreeChange"
      @click.native="clickTree"
    ></Tree>
  </div>
</template>
<style lang="less">
</style>
<script>
import { QueryOrg } from '../server.js';
export default {
  name: 'OrgTree',
  directives: {},
  data() {
    return {
      baseData: [],
      currentOrg: {},
      // 组织树
      orgTree: [],
      rootOrg: {}
    };
  },
  created() {
    this.$emit('SetPageSize', 700);
    this.$emit('SetTitle', this.$t('请选择所属组织'));
    this.$emit('SetPageActions', [
      {
        text: this.$t('确定'),
        theme: 'success',
        size: 'small',
        icon: 'md-checkmark',
        handle: this.getVsOrg
      },
      {
        text: this.$t('清空'),
        theme: 'warning',
        size: 'small',
        icon: 'ios-trash',
        handle: this.clearAll
      }
    ]);
    this.QueryOrg({});
  },
  methods: {
    QueryOrg(params, callback) {
      QueryOrg(params).then(data => {
        const depList = data.dataResult.depList || [];
        if (callback) {
          callback(
            depList.map(it => {
              return {
                ...it,
                children: [],
                loading: false,
                title: it.orgName
              };
            })
          );
        } else {
          this.orgTree = depList.map(it => {
            return {
              ...it,
              loading: false,
              children: [],
              title: it.orgName
            };
          });
          this.rootOrg = this.orgTree[0];
        }
      });
    },
    // 加载当前组织子节点
    loadData(currentOrg, callback) {
      this.QueryOrg({ orgId: currentOrg.orgId || '' }, callback);
    },
    onTreeChange() {
      const list = this.$refs.orgTree.getSelectedNodes();
      if (!list.length) {
        this.currentOrg = {};
      } else {
        const data = list[0];
        this.currentOrg = data;
      }
      this.$emit('on-select-change', this.currentOrg);
    },
    clickTree(e) {
      if (e.target) {
        try {
          const $target = e.target;
          if ([...$target.classList].includes('ivu-tree-title')) {
            $target.parentElement.firstElementChild.click();
          }
        } catch (err) {
          console.log(err);
        }
      }
    },
    getVsOrg() {
      if (this.currentOrg.orgCode) {
        this.$emit('Close', this.currentOrg);
      } else {
        this.$Message.warning({
          content: this.$t('请选择所属组织'),
          duration: 3
        });
      }
    },
    clearAll() {
      const nothing = null;
      this.$emit('Close', nothing);
    },
    cancel() {
      this.$emit('Close');
    }
  }
};
</script>
<style lang="less">
.org-tree {
  .ivu-tree {
    background: #fff;
    ul li {
      padding: 4px 0;
      margin: 0;
      &:first-child {
        padding-top: 8px;
      }
    }
    .ivu-tree-empty {
      min-height: 60px;
      line-height: 60px;
      text-align: center;
    }
  }
}
</style>
