<template>
    <div class="permission">
        <div class="permission-side">
            <div class="title">权限列表</div>
            <el-tree
                v-loading="treeLoading"
                ref="treeList"
                :data="data"
                :props="{
                    children: 'children',
                    label: 'content'
                }"
                class="treeList"
                default-expand-all
                highlight-current
                :expand-on-click-node="false"
                @node-click="handleNodeClick">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span>
                        <el-button type="text" size="mini" @click="() => openAdd(data)" v-if="data.grade<3">添加下级</el-button>
                        <el-button type="text" size="mini" @click="() => removePermission(data.id)">删除</el-button>
                    </span>
                </span>
            </el-tree>
            <div class="add-btn"@click="openAdd">
                <i class="el-icon-circle-plus-outline"></i> 添加新菜单
            </div>
        </div>

        <div class="permission-from">
            <div class="title">修改权限</div>
            <el-form ref="editForm" :model="editForm" label-width="100px" class="from">
                <el-form-item label="权限名称">
                    <el-input v-model="editForm.name" placeholder="请输入英文" />
                </el-form-item>
                <el-form-item label="权限内容">
                    <el-input v-model="editForm.content" placeholder="请输入中文名"/>
                </el-form-item>
                <el-form-item label="权限等级">
                    <el-input v-model="editForm.grade" :disabled="true"/>
                </el-form-item>
                <el-form-item label="父级 ID">
                    <el-input v-model="editForm.parentId" :disabled="true"/>
                </el-form-item>
                <!--<el-form-item label="树形路径">-->
                    <!--<el-input v-model="editForm.treePath" :disabled="true"/>-->
                <!--</el-form-item>-->
                <el-form-item label="菜单链接">
                    <el-input v-model="editForm.url"/>
                </el-form-item>
                <el-form-item style="text-align: right">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" @click="editSubmit">修改</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-dialog title="添加权限" :visible.sync="dialogVisible" width="550px" center class="dialog-info">
            <div class="add-wrp">
                <el-form ref="addForm" :model="addForm" label-width="80px">
                    <el-form-item label="权限名称">
                        <el-input v-model="addForm.name" placeholder="请输入英文" />
                    </el-form-item>
                    <el-form-item label="权限内容">
                        <el-input v-model="addForm.content" placeholder="请输入中文名"/>
                    </el-form-item>
                    <el-form-item label="权限等级">
                        <el-input v-model="addForm.grade" :disabled="true"/>
                    </el-form-item>
                    <el-form-item label="父级 ID">
                        <el-input v-model="addForm.parentId" :disabled="true"/>
                    </el-form-item>
                    <!--<el-form-item label="树形路径">-->
                        <!--<el-input v-model="addForm.treePath" :disabled="true"/>-->
                    <!--</el-form-item>-->
                    <el-form-item label="菜单链接">
                        <el-input v-model="addForm.url"/>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="addPermission">确 定</el-button>
                </span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/power'
    export default {
        name: "permission",
        data() {
            return {
                treeLoading: false,
                editForm: {},
                data: [],
                dialogVisible: false,
                addForm: {
                    name: "",
                    content: "",
                    grade: "",
                    parent: "",
                    // treePath: "",
                    url: "",
                    children: []
                }
            }
        },
        methods: {
            getList() {
                this.treeLoading = true
                api.getTreeList().then((res) => {
                    console.log(res)
                    this.treeLoading = false
                    this.data = res.results.resultList
                }).catch((err) => {
                    console.log(err)
                })
            },
            handleNodeClick(data) {
                this.editForm = data
            },
            editSubmit() {
                if(this.editForm.id) {
                    delete this.editForm.children
                    api.updatePermission(this.editForm).then(res => {
                        console.log(res)
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.getList()
                        this.dialogVisible = false
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    this.$message({
                        message: '请先选择一项权限',
                        type: 'warning'
                    })
                }
            },
            cancelEdit() {
                this.editForm = {}
            },
            openAdd(data) {
                this.dialogVisible = true
                // this.addForm.parentId = data.id || ''
                // this.addForm.grade = data.grade+1 || '1'
                if(data.grade) {
                    this.addForm.parentId = data.id
                    this.addForm.grade = data.grade + 1
                } else {
                    this.addForm.parentId = ''
                    this.addForm.grade = '1'
                }
            },
            addPermission() {
                api.addPermission(this.addForm).then(res => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.getList()
                    this.dialogVisible = false
                    this.addForm = {
                        name: "",
                        content: "",
                        grade: "",
                        parent: "",
                        // treePath: "",
                        url: "",
                        children: []
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            removePermission(id) {
                this.$confirm('你确定要删除这个权限吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    // center: true
                }).then(() => {
                    api.delPermission({ id }).then((res) => {
                        console.log(res)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList()
                    }).catch(error => {
                        console.log(error)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        created() {
            this.getList()
        }
    }
</script>
<style>
    .treeList .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.permission {
    display: flex;
    height: calc(100vh - 84px);
    &-side {
        width: 360px;
        height: 100%;
        padding-top: 20px;
        border-right: 1px solid rgba(0,0,0,.1);
        position: relative;
        .add-btn {
            background-color: #fff;
            color: #409EFF;
            width: 360px;
            padding: 10px 0px;
            border: 1px solid #ccc;
            position: fixed;
            bottom: 0px;
            text-align: center;
            cursor: pointer;
        }
        .title {
            padding-bottom: 20px;
            padding-left: 30px;
            border-bottom: 1px solid #ccc;
            color: #409EFF;
        }
        .treeList {
            height: calc(100vh - 180px);
            padding: 15px 12px 20px;
            overflow-y: scroll;
        }
        .menu {
            &-list {
                .el-collapse-item {
                    .child {
                        &-item {
                            height: 48px;
                            line-height: 48px;
                            background-color: #fcfcfc;
                            padding-left: 30px;
                            border-top: 1px solid rgba(0,0,0,.1);
                            cursor: pointer;
                        }
                        &-active {
                            color: #409EFF;
                        }
                    }
                }
                .active {
                    background-color: #409EFF;
                }
            }
        }
    }
    &-from {
        flex: 1;
        padding-top: 20px;
        .title {
            padding: 0 30px 20px;
            border-bottom: 1px solid #ccc;
            color: #409EFF;
        }
        .from {
            width: 90%;
            margin-top: 30px;
        }
    }
    .add-wrp {
        padding-right: 10px;
        .el-form-item {
            /*margin-bottom: 10px;*/
        }
        .dialog-footer {
            display: block;
            width: 100%;
            text-align: center;
        }
    }
}
</style>