<style>
</style>

<template>
    <div class="app-container ">
        <section class="qg-container">
            <h4 class="qg-container__title">部门管理</h4>
            <qg-tree v-if="data && data.length > 0" :data="data" :extended-nodes="extendedNodes"/>
            <div v-else class="qg-empty-panel">
                <svg-icon icon-class="empty"/>
                <p>暂无部门数据</p>
                <el-button type="primary" plain @click="handleAddFirst">添加</el-button>
            </div>
        </section>
        <department-edit-dialog
            ref="departmentEditDialog"
            :type="editType"
            :data="editQuery"
            @success="getOrgTree"
        />
        <qg-user-selector
            ref="userSelector"
            title="授权人员"
            tree-type="role"
            :uc-ajax-prefix="ucAjaxPrefix"
            :headers="headers"
            :params="{
                funId:editQuery.id,
                funCode:'',
                route:'userRange',
                appCode : CTX.UC.replace(/\//g,''), // appCode
                optType : 'USER'
            }"
        />
    </div>
</template>

<script>
    import {
        getOrgTree,
        deleteOrg,
        moveOrg
    } from '@/api/moudles/uc/org';
    import DepartmentEditDialog from './edit.vue';
    import {getToken} from '@/utils/auth';
    import {CTX} from '@/api/config';
    // import checkPermission from '@/utils/permission';

    export default {
        name: 'Organize',
        components: {
            DepartmentEditDialog
        },
        data() {
            return {
                data: [],
                editQuery: {
                    id: '',
                    name: '',
                    code: null,
                    pId: '',
                    pName: ''
                },
                editType: 'ADD',
                CTX,
                headers: {Authorization: getToken()},
                ucAjaxPrefix: process.env.VUE_APP_BASE_API + CTX.UC,
                extendedNodes: [
                    {
                        icon: 'qg-icon-add',
                        tooltip: '新增',
                        hidden: (node, data) => {
                            return !data.manage;
                        },
                        onClick: this.handleAdd
                    }, {
                        icon: 'qg-icon-edit',
                        tooltip: '编辑',
                        hidden: (node, data) => {
                            return !data.manage;
                        },
                        onClick: this.handleEdit
                    }, {
                        icon: 'qg-icon-del',
                        tooltip: '删除',
                        hidden: (node, data) => {
                            return !data.manage;
                        },
                        onClick: this.handleDel
                    }, {
                        icon: 'qg-icon-arrow_up',
                        tooltip: '上移',
                        hidden: (node, data) => {
                            return !node.previousSibling || !data.manage;
                        },
                        onClick: (node, data) => {
                            this.move(data, 'UP');
                        }
                    }, {
                        icon: 'qg-icon-arrow_down',
                        tooltip: '下移',
                        hidden: (node, data) => {
                            return !node.nextSibling || !data.manage;
                        },
                        onClick: (node, data) => {
                            this.move(data, 'DOWN');
                        }
                    }, {
                        icon: 'qg-icon-user',
                        tooltip: '授权',
                        hidden: (node, data) => {
                            return !data.manage;
                        },
                        onClick: this.handleAuth
                    }]
            };
        },
        created() {
            this.getOrgTree();
        },
        methods: {
            getOrgTree() {
                getOrgTree().then(re => {
                    if (re.success) {
                        this.data = [re.data];
                    }
                });
            },
            handleAdd(node, data) {
                this.editType = 'ADD';
                this.editQuery = {
                    name: '',
                    code: null,
                    pId: data.id,
                    pName: data.name
                };
                this.$refs.departmentEditDialog.open();
            },
            handleAddFirst() {
                this.editType = 'ADD';
                this.editQuery = {
                    name: '',
                    code: null,
                    pId: '*',
                    pName: '*'
                };
                this.$refs.departmentEditDialog.open();
            },
            handleEdit(node, data) {
                this.editType = 'EDIT';
                this.editQuery = {
                    id: data.id,
                    name: data.name,
                    code: data.code,
                    pId: data.pid,
                    pName: node.parent && node.parent.data.name
                };
                this.$refs.departmentEditDialog.open();
            },
            handleAuth(node, data) {
                this.editQuery = data;
                this.$refs.userSelector.open();
            },
            handleDel(node, data) {
                this.$confirm('确定要删除该数据吗?').then(() => {
                    const params = {
                        orgId: data.id
                    };
                    deleteOrg(params).then(result => {
                        if (result.success) {
                            this.$message.success('删除成功');
                            this.getOrgTree();
                        } else {
                            this.$message.error(result.msg || '删除失败');
                        }
                    });
                });
            },
            move(data, moveType) {
                const params = {
                    nodeId: data.id,
                    moveType
                };
                moveOrg(params).then(result => {
                    if (result.success) {
                        this.$message.success('移动成功');
                        this.getOrgTree();
                    } else {
                        this.$message.success(result.msg || '移动失败');
                    }
                });
            }
        }
    };
</script>