<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="230px" style="overflow-x:hidden">
      <ht-select v-model="selectOrgId" class="org-select" :options="orgList" />
      <org-tree
        class="org-tree"
        @node-click="orgTreeClick"
        @addOrg="addOrg"
        @editOrg="editOrg"
        @hideOrgManager="hideOrgManager"
        :defId="selectOrgId"
        ref="orgTree"
        v-if="reFresh"
      ></org-tree>
    </el-aside>
    <el-main v-if="orgManagerShow">
      <org-manager
        @reloadTree="reloadTree"
        :type="toManageType"
        :orgCode="toManageOrgCode"
        :parentName="selectOrgName"
        :demId="selectOrgId"
        :parentId="selectParentId"
        :treeData="treeData"
      ></org-manager>
    </el-main>
    <el-container v-else>
      <div class="el-tree__empty-block">
        <el-image :src="noDataImg"></el-image>
        <p class="no-data-text">请选择一个组织进行操作~</p>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import orgrequest from '@/api/org.js'
const orgTree = () => import('@/views/uc/org/OrgTree.vue')
const orgManager = () => import('@/views/uc/org/OrgManager.vue')
export default {
  name: 'Organization',
  data() {
    return {
      selectOrgId: '', //选择的组织ID
      selectOrgName: '', //选择的组织Name
      orgList: [], //下拉框待选择的组织
      treeList: [], //树形菜单展示的数组
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      reFresh: true,
      toManageType: 'showInfo', //打开orgManager组件需要传入的参数
      toManageOrgCode: '',
      orgManagerShow: false,
      selectParentId: '',
      noDataImg: require('@/assets/nodata_images/no-org.png'),
      treeData: []
    }
  },
  components: {
    orgTree,
    orgManager
  },
  methods: {
    hideOrgManager() {
      this.orgManagerShow = false
    },
    //树形点击
    orgTreeClick(orgbytree, treeList) {
      this.treeData = []
      if (!orgbytree.code) {
        this.$message({
          type: 'warning',
          message: '请选择维度下的组织'
        })
        return
      }
      this.toManageOrgCode = orgbytree.code
      this.selectOrgName = orgbytree.name
      this.toManageType = 'showInfo'
      this.orgManagerShow = false
      this.treeData = this.filterTreeArray(treeList, orgbytree.id)
      this.$nextTick(() => {
        this.orgManagerShow = true
      })
    },
    /* 過濾掉本級及下級數據 */
    filterTreeArray(tree, bList) {
      return tree
        .filter(item => {
          return bList != item.id
        })
        .map(item => {
          item = Object.assign({}, item)
          if (item.children) {
            item.children = this.filterTreeArray(item.children, bList)
          }
          return item
        })
    },
    //上级数据加载
    getBeforeTree(parentId, children, path) {
      if (path === undefined) {
        path = []
      }
      for (let i = 0; i < children.length; i++) {
        let tmpPath = path.concat()
        if (parentId == children[i].id) {
          tmpPath.push(children[i])
          return tmpPath
        }
        if (children[i].children) {
          let findResult = this.getBeforeTree(
            parentId,
            children[i].children,
            tmpPath
          )
          if (findResult) {
            return findResult
          }
        }
      }
    },
    //加载本级其他项数据
    getOtherNodeTree(nodeId, treeList) {
      this.treeData = []
      if (treeList && treeList.length) {
        treeList.forEach(item => {
          let obj = {
            id: item.id,
            name: item.name,
            parentId: item.parentId,
            children: []
          }
          if (item.children && item.children.length) {
            item.children.forEach(i => {
              if (i.id != nodeId) {
                obj.children.push({
                  id: i.id,
                  name: i.name,
                  parentId: item.parentId
                })
              }
            })
          }
          if (obj.children.length == 0) {
            delete obj.children
          }
          this.treeData.push(obj)
        })
      }
    },
    addOrg(param) {
      let treeData = this.$refs.orgTree.getTreeData()
      // 新建维度下面的组织
      this.selectParentId = param.id
      this.toManageOrgCode = param.code
      this.selectOrgName = param.name
      this.toManageType = 'addOrg'
      this.orgManagerShow = false
      this.treeData = treeData
      this.$nextTick(() => {
        this.orgManagerShow = true
      })
    },
    editOrg(param) {
      this.selectParentId = param.id
      this.toManageOrgCode = param.code
      this.selectOrgName = param.name
      this.toManageType = 'editOrg'
      this.orgManagerShow = false
      this.$nextTick(() => {
        this.orgManagerShow = true
      })
    },
    reloadTree() {
      // 重新加载树
      /*this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });*/
      this.$refs.orgTree.load()
    }
  },
  mounted() {
    orgrequest.getDescAll().then(rep => {
      for (var i = 0; i < rep.length; i++) {
        this.orgList.push({
          key: rep[i].id,
          value: rep[i].demName
        })
        if (rep[i].isDefault === 1) {
          this.selectOrgId = rep[i].id
        }
      }
    })
  },
  watch: {
    selectOrgId(orgId, oldOrgId) {
      this.reFresh = false
      this.$nextTick(() => {
        this.reFresh = true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-aside {
  height: 100%;
  border: 1px solid #eee;
}

.org-select {
  width: 100%;
}

.org-select >>> .el-select {
  width: 100%;
}

.org-select >>> .el-input__inner {
  border-radius: 0;
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.org-tree {
  height: calc(100% - 70px);
  margin-top: 15px;
}

.form-empty {
  position: absolute;
  text-align: center;
  width: 300px;
  font-size: 20px;
  top: 200px;
  left: 50%;
  margin-left: -150px;
  color: #ccc;
}
</style>