<template>
    <el-container class="container">
        <el-aside class="depart-tree" style="width: 400px;">
            <el-tree
                :data="menus"
                :render-content="renderContent"
                :highlight-current="true"
                :expand-on-click-node="false"
                @node-click="nodeClick"
                node-key="id"
                default-expand-all>
            </el-tree>
            <el-button size="mini" type="text" @click="addRootMenu" class="btn-add">添加</el-button>
        </el-aside>
        <el-main class="users">
            <el-table :data="departUsers" :show-header="false">
                <el-table-column prop="username" label="用户名"></el-table-column>
            </el-table>
            <el-dialog :visible.sync="dialogVisible" title="添加菜单">
                <el-form :model="menu" ref="form" size="small">
                    <el-form-item label="部门名称" prop="departName"
                                  :rules="[{required: true, message: '请填写部门名', trigger: 'blur'}]">
                        <el-input v-model="menu.departName"></el-input>
                    </el-form-item>
                    <el-form-item label="部门代码" prop="departCode">
                        <el-input v-model="menu.departCode"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="dialogVisible = false" size="small">取消</el-button>
                    <el-button type="primary" @click="addMenu" :loading="loading" size="small">保存</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>
<script>
    import axios from 'axios'

    export default {
        created() {
            this.getData();
        },
        data() {
            return {
                dialogVisible: false,
                curr: null,
                loading: false,
                menus: [],
                menu: {
                    departName: '',
                    departCode: ''
                },
                departUsers: []
            }
        },
        methods: {
            addRootMenu() {
                this.menu = {
                    parentId: 0,
                    departName: '',
                    departCode: ''
                };
                /*  if (this.menus && this.menus.length > 0) {
                      this.menu.sort = this.menus[this.menus.length - 1].extra.sort + 1;
                  } else {
                      this.menu.sort = 1;
                  }*/
                this.dialogVisible = true;
            },
            showAddDialog(node, data) {
                this.menu = {
                    parentId: node.data.extra.id,
                    departName: '',
                    departCode: ''
                };
                if (node.childNodes && node.childNodes.length > 0) {
                    this.menu.sort = node.childNodes[node.childNodes.length - 1].data.extra.sort + 1;
                } else {
                    this.menu.sort = 1;
                }
                this.dialogVisible = true;
            },
            addMenu() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$http.post({
                            url: this.menu.id ? '/departInfo/update' : '/departInfo/save',
                            data: this.menu
                        }).then(res => {
                            this.loading = false;
                            if (res.success) {
                                this.$message.success('保存成功');
                                this.dialogVisible = false;
                                this.getData();
                            } else {
                                this.$message.warning('添加失败')
                            }
                        })
                    }
                });
            },
            showEditDialog(node, data) {
                this.menu = {
                    id: data.extra.id,
                    departName: data.extra.departName,
                    departCode: data.extra.departCode,
                };
                this.dialogVisible = true;
            },
            moveUp(node, data) {
                const formData = d => {
                    let formData = new FormData();
                    for (let key in d) {
                        if (d.hasOwnProperty(key)) {
                            formData.append(key, d[key]);
                        }
                    }
                    return formData;
                };
                if (node.previousSibling) {
                    axios.all([axios.post(this.$baseUrl + '/departInfo/update', formData({
                        id: node.data.id,
                        sort: node.previousSibling.data.extra.sort
                    })), axios.post(this.$baseUrl + '/departInfo/update', formData({
                        id: node.previousSibling.data.id,
                        sort: node.data.extra.sort
                    }))]).then(axios.spread((acct, perms) => {
                        this.getData();
                    }));
                }
            },
            moveDown(node, data) {
                const formData = d => {
                    let formData = new FormData();
                    for (let key in d) {
                        if (d.hasOwnProperty(key)) {
                            formData.append(key, d[key]);
                        }
                    }
                    return formData;
                };
                if (node.nextSibling) {
                    axios.all([axios.post(this.$baseUrl + '/departInfo/update', formData({
                        id: node.data.id,
                        sort: node.nextSibling.data.extra.sort
                    })), axios.post(this.$baseUrl + '/departInfo/update', formData({
                        id: node.nextSibling.data.id,
                        sort: node.data.extra.sort
                    }))]).then(axios.spread((acct, perms) => {
                        this.getData();
                    }));
                }
            },
            remove(node, data) {
                this.$confirm('确定删除菜单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    this.$http.post({
                        url: '/departInfo/del',
                        data: {
                            id: data.id
                        }
                    }).then(res => {
                        if (res.success) {
                            this.$message.success('删除成功');
                            this.getData();
                        } else {
                            this.$message.error('删除失败');
                        }
                    })
                }).catch(() => {
                });
            },
            nodeClick(data, node, component) {
                this.$http.get({
                    url: '/departInfo/departUsers',
                    data: {
                        departId: data.id
                    }
                }).then(res => {
                    if (res.success) {
                        this.departUsers = res.data
                    }
                })
            },
            getData() {
                this.$http.get({
                    url: '/departInfo/departTree'
                }).then(res => {
                    if (res.success) {
                        const parse = (trees) => {
                            trees.sort((a, b) => {
                                return a.extra.sort - b.extra.sort;
                            });
                            return trees.map(i => {
                                let t = {
                                    id: i.id,
                                    label: i.name,
                                    parentId: i.parentId,
                                    extra: i.extra
                                };
                                if (i.children instanceof Array) {
                                    t.children = parse(i.children);
                                }
                                return t;
                            });
                        };
                        this.menus = parse(res.data);
                    }
                })
            },
            renderContent(h, { node, data, store }) {
                return (
                    <span class="custom-tree-node">
                        <span>{node.label}</span>
                        <span class="url">{data.extra.href}</span>
                        <span class="opt">
                            <el-button size="mini" type="text" on-click={ () => this.moveUp(node, data) } class="up">上移</el-button>
                            <el-button size="mini" type="text" on-click={ () => this.moveDown(node, data) }>下移</el-button>
                            <el-button size="mini" type="text" on-click={ () => this.showEditDialog(node, data) }>编辑</el-button>
                            <el-button size="mini" type="text" on-click={ () => this.showAddDialog(node, data) }>添加</el-button>
                            <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
                        </span>
                    </span>
                );
            }
        }
    }
</script>
<style lang="less">
    .container {
        display: flex;
        .depart-tree {
            width: 400px;
        }
        .btn-add {
            margin-left: 20px;
        }
        .users{
            flex-grow: 1;
        }
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        .url {
            flex-grow: 1;
            text-align: right;
            margin-right: 20px;
            color: #999;
        }
        .opt {
            opacity: 0;
        }
    }

    .custom-tree-node:hover {
        .opt {
            opacity: 1;
        }
    }

</style>

