<template>
  <div class="card-height-full flex-h role-mgr-div">
    <Panel title="系统角色管理" v-if="rightBlock" class="flex-2 full role-mgr-div-panel" v-loading='doLoading'>
      <template slot="buttons">
        <el-button class="blue" icon="el-icon-fa-expand" @click="expandAll">展开</el-button>
        <el-button class="blue" icon="el-icon-fa-refresh" @click="refresh">刷新</el-button>
        <el-button class="blue" icon="el-icon-fa-copy" @click="doAdd">复制</el-button>
        <el-button class="green" :icon="!leftBlock?'el-icon-caret-left':'el-icon-caret-right'" @click="leftBlock=!leftBlock"/>
      </template>
      <el-tree v-if='showRoleTree' ref="roleTree" :default-expand-all="expandedAll" lazy :current-node-key="current.roleUuid"
               :load="loadTree" node-key="uuid" :expand-on-click-node="false" highlight-current @current-change="currentChange">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>
                    <span v-if="data.orgName">
                        <i class="el-icon-fa el-icon-fa-sitemap margin-right-2"/>
                        <span>{{ data.orgName }}</span>
                    </span>
                    <span v-if="data.roleName && data.roleType === '1'">
                        <i class="el-icon-fa el-icon-fa-user-o margin-right-2 "/>
                        <span>{{ data.roleName }}</span>
                    </span>
                    <span v-if="data.roleName && data.roleType === '2'">
                        <i class="el-icon-fa el-icon-fa-folder-open margin-right-2 "/>
                        <span>{{ data.roleName }}</span>
                    </span>
<!--                    <span v-if="data.roleName && data.parRoleUuid !== 'none'">-->
<!--                        <i class="el-icon-fa el-icon-fa-user-o margin-right-2 "/>-->
<!--                        <span>{{ data.roleName }}4</span>-->
<!--                    </span>-->
                  </span>
                  <el-button-group>
                    <el-button icon="el-icon-fa-refresh" @click.stop="refreshNode(node)"/>
                    <el-button :disabled="data.roleType === '1' && (!data.orgName || $store.state.base.sysUser.graUser==='0')"
                               icon="el-icon-fa-plus" @click.stop="addNode(node)"/>
                    <el-button icon="el-icon-fa-minus" @click.stop="removeNode(node)"
                               :disabled="!!data.orgName || $store.state.base.sysUser.graUser==='0'"/>
                  </el-button-group>
                </span>
      </el-tree>
    </Panel>
    <Panel title="角色信息编辑" v-if="leftBlock" class="flex-2 flex-h margin-left-2 full-height">
      <template slot="buttons">
        <el-button :disabled='$store.state.base.sysUser.graUser==="0"' class="blue" @click="submit" icon="el-icon-fa-save" v-show="current.roleUuid">保存
        </el-button>
        <el-button class="green" :icon="rightBlock?'el-icon-caret-left':'el-icon-caret-right'" @click="rightBlock=!rightBlock"/>
      </template>
      <RoleEditor class="full-height" @onsave="onsave" ref="roleEditor" v-show="current.roleUuid" :uuid="current.roleUuid" :org-uuid="current.orgUuid"/>
    </Panel>


    <el-dialog close-on-press-escape append-to-body v-draggable width="80%" :visible.sync="editor.show" title="角色复制">
      <div class="dialog-button">
        <el-button-group>
          <el-button class="blue" plain icon="el-icon-fa-save" @click="doSubmit()">复制</el-button>
        </el-button-group>
      </div>
      <CopyEditor v-if="editor.show" ref="userEditor" :uuid="editor.uuid"/>
    </el-dialog>
  </div>
</template>
<script>
  import RoleAPI from "@/api/base/usrm/RoleAPI";
  import RoleEditor from "./RoleEditor";
  import CopyEditor from "./RoleCopy";

  export default {
    name: "RoleMgr",
    components: {RoleEditor, CopyEditor},
    data() {
      return {
        leftBlock: true,
        rightBlock: true,
        //显示树
        showRoleTree: true,
        //树遮罩
        //树遮罩
        doLoading: false,
        view: {
          loading: false
        },
        current: {
          data: null,
          orgUuid: null,
          roleUuid: null
        },
        editor: {
          error: {},
          show: false,
          uuid: null,
          visible: false,
          loading: false
        },
        expandedAll: false
      };
    },
    mounted() {
      this.refresh();
    },
    methods: {
      // 角色复制保存
      doSubmit() {
        this.$refs.userEditor.onSubmit(this.current.roleUuid).then(resp => {
          this.doLoading = true;
          this.showRoleTree = false;
          setTimeout(() => {
            this.showRoleTree = true;
            this.doLoading = false;
          });
        });
        this.cancelEditorLoading();
      },
      // 打开新建画面
      doAdd() {
        this.editor.show = true;
      },
      // 关闭加载页面
      cancelEditorLoading() {
        this.editor.show = false;
        this.editor.loading = false;
      },
      // 刷新树节点
      refresh() {
        this.view.loading = true;
        this.current.roleUuid = null;
        RoleAPI.getRoleChildren()
          .then(resp => resp.data)
          .then(data => {
            this.$refs.roleTree.root.children = data;
            this.view.loading = false;
          });
      },
      // 提交角色编辑页信息
      submit() {
        this.$refs.roleEditor.submit();
      },
      // 保存角色编辑页信息
      onsave() {
        if (this.current.data) {
          Object.assign(this.current.data, this.$refs.roleEditor.data);
        }
      },
      //  展开/关闭 全部
      expandAll() {
        if (this.expandedAll) {
          this.saving = true;
          this.showRoleTree = false;
          this.expandedAll = false;
          setTimeout(() => {
            this.showRoleTree = true;
            this.saving = false;
          }, 200);
          return;
        }
        this.expandedAll = true;
        let expandFn = (element, expand) => {
          element.childNodes.forEach(function (element) {
            element.expand(() => {
              expandFn(element);
            });
          }, this);
        };
        expandFn(this.$refs.roleTree.root);
      },
      // 点击菜单树节点
      currentChange(data, node) {
        this.current.roleUuid = null;
        if (data.roleName) {
          this.current.roleUuid = data.uuid;
          this.current.orgUuid = node.parent.data.uuid;
          this.current.data = {};
          this.current.data = data;
        }
      },
      // 加载树内容
      loadTree(node, resolve) {
        let puuid;
        if (node.data) {
          puuid = node.data.uuid;
        }
        RoleAPI.getRoleChildren(puuid).then(resp => {
          resp.data && resolve(resp.data);
        });
      },
      // 新增菜单
      addNode(node) {
        this.view.loading = true;
        let data = node.data;
        let newNode = {
          roleType: "1",
          roleName: "新建角色"
        };
        if (data.roleName) {
          // 表示是角色
          newNode.parRoleUuid = data.uuid;
        } else {
          // 表示是关区
          newNode.orgUuid = data.uuid;
        }
        node.expand(() => {
          RoleAPI.editRoleNode(newNode).then(data => {
            newNode.uuid = data.uuid;
            node.insertChild({data: newNode}); // 让当前节点追加一个新节点
            this.current.roleUuid = data.uuid;
            this.current.orgUuid = newNode.orgUuid;
            this.current.data = newNode;
            this.view.loading = false;
          });
        }, this);
      },
      // 删除菜单
      removeNode(node) {
        // 删除菜单实际要执行的方法
        let action = data => {
          this.view.loading = true;
          RoleAPI.delRoleNode(data.uuid)
            .then(data => {
              node.parent.removeChild(node);
              this.view.loading = false;
            })
            .catch(() => {
              this.view.loading = false;
            });
        };
        // 单出提示,然后执行该方法
        this.confirm(node.data).then(action);
      },
      // 刷新菜单
      refreshNode(node) {
        node.loaded = false;
        node.expand();
      }
    }
  };
</script>
<style lang="scss">
  .role-mgr-div {
    & > .la-panel {
      height: calc(100vh - 117px);

      & > .la-panel__body {
        overflow-y: auto;
      }
    }
  }
</style>