<template>
    <div v-if="userName === '系统管理员'">
        <el-container>
            <!--搜索-->
            <el-header class="searchBox">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="权限名称">
                        <el-input v-model="searchForm.authName" placeholder="权限名称"/>
                    </el-form-item>
                    <el-form-item label="权限路径">
                        <el-input v-model="searchForm.authUrl" placeholder="权限路径"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchBtn">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </el-form-item>
                    <el-button style="float: right" type="warning" icon="el-icon-circle-plus-outline" @click="add">
                        立即创建
                    </el-button>
                </el-form>
            </el-header>

            <!--表格-->
            <el-main class="tableBox">
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="id" label="序列号" width="100"/>
                    <el-table-column prop="authName" label="权限名称"/>
                    <el-table-column prop="authUrl" label="权限路径"/>
                    <el-table-column prop="createTime" label="创建时间"/>
                    <el-table-column prop="updateTime" label="更新时间"/>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="text" size="small" @click="dele(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                            :current-page.sync="searchForm['pageNum']"
                            :page-sizes="[20, 50, 100, 300]"
                            :page-size="searchForm['pageSize']"
                            layout="total, sizes, pager"
                            :total="total"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </el-main>
        </el-container>

        <!--新增抽屉-->
        <el-drawer
                ref="addDrawer"
                title="新增权限"
                size="30%"
                :before-close="addHandleClose"
                :with-header="false"
                :visible.sync="addDialog"
                direction="rtl"
                custom-class="demo-drawer"
        >
            <div class="demo-drawer__content">
                <span>新增权限</span>
                <el-form :model="addForm">
                    <el-form-item label="权限名称" label-width="80px">
                        <el-input v-model="addForm.authName" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="权限路径" label-width="80px">
                        <el-input v-model="addForm.authUrl" autocomplete="off"/>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" :loading="loading" @click="$refs.addDrawer.closeDrawer()">{{ loading ?
                        '提交中 ...' : '确 定' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>

        <!--编辑抽屉-->
        <el-drawer
                ref="editDrawer"
                title="编辑权限"
                size="30%"
                :before-close="editHandleClose"
                :with-header="false"
                :visible.sync="editDialog"
                direction="rtl"
                custom-class="demo-drawer"
        >
            <div class="demo-drawer__content">
                <span>编辑权限</span>
                <el-form :model="editForm">
                    <el-form-item label="权限名称" label-width="80px">
                        <el-input v-model="editForm.authName" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="权限路径" label-width="80px">
                        <el-input v-model="editForm.authUrl" autocomplete="off"/>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" :loading="loading" @click="$refs.editDrawer.closeDrawer()">{{ loading ?
                        '提交中 ...' : '确 定' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>
    </div>
    <div v-else style="margin: 50px 30px;text-align: center">您没有当前页面操作权限</div>

</template>

<script>
    import {post, get} from '@/api/common'

    export default {
        name: 'RightList',
        data() {
            return {
                loading: false,
                editDialog: false,
                addDialog: false,
                userName: '',
                searchForm: {
                    authUrl: '',
                    authName: '',
                    pageSize: 20,
                    pageNum: 1
                },
                addForm: {
                    authUrl: '',
                    authName: ''
                },
                editForm: {
                    authUrl: '',
                    authName: ''
                },
                tableData: [],
                total: 5000
            }
        },
        created() {
            var that = this
            that.search()
            let userName = this.$store.state.user.name
            get('/sysUser/page', {name: userName})
                .then((res) => {
                    var list = res.data.list
                    if (list.length === 1 && list[0].sysRoleList[0].description === '管理员角色') {
                        this.userName = '系统管理员'
                    }
                }).catch((err) => {
                console.log(err)
            })
        },
        methods: {
            async search() { // 同步搜索
                await get('/sysAuth/page', this.searchForm)
                    .then((res) => {
                        this.tableData = res.data.list
                        this.total = res.data.total
                    }).catch((err) => {
                        console.log(err)
                    })
            },
            searchBtn() { // 搜索按钮
                this.search()
            },
            reset() { // 重置
                this.searchForm = {
                    authUrl: '',
                    authName: '',
                    pageSize: 20,
                    pageNum: 1
                }
                this.search()
            },
            add() { // 新增
                this.addDialog = true
            },
            addHandleClose(done) { // 新增数据
                if (this.loading) return
                this.$confirm('确定要提交吗？')
                    .then(_ => {
                        done()
                        this.addDialog = true
                        post('/sysAuth/create', this.addForm)
                            .then((res) => {
                                if (res.code === 10000) this.reset()
                                setTimeout(() => {
                                    this.addDialog = false
                                }, 400)
                            })
                            .catch((err) => {
                                console.log(err)
                            })
                    })
                    .catch(_ => {
                        this.addDialog = false
                    })
            },
            edit(e) { // 编辑
                this.editForm = e
                this.editDialog = true
            },
            editHandleClose(done) { // 修改数据
                if (this.loading) return
                this.$confirm('确定要提交吗？')
                    .then(_ => {
                        done()
                        this.editDialog = true
                        post('/sysAuth/update/' + this.editForm.id, this.editForm)
                            .then((res) => {
                                if (res.code === 10000) this.reset()
                                setTimeout(() => {
                                    this.editDialog = false
                                }, 400)
                            })
                            .catch((err) => {
                                console.log(err)
                            })
                    })
                    .catch(_ => {
                        this.editDialog = false
                    })
            },
            dele(e) { // 删除
                this.$confirm('确定要删除么？')
                    .then(_ => {
                        post('/sysAuth/delete', {ids: [e]})
                            .then((res) => {
                                if (res.code === 10000) this.reset()
                            })
                    })
            },
            cancelForm() { // 关闭抽屉
                this.loading = false
                this.editDialog = false
                this.addDialog = false
                clearTimeout(this.timer)
            },
            handleSizeChange(e) { // 单页数量
                this.searchForm.pageSize = e
                this.search()
            },
            handleCurrentChange(e) { // 跳页
                this.searchForm.pageNum = e
                this.search()
            }
        }
    }
</script>

<style scoped lang="scss">
    .searchBox {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: #bfbfbf 0 0 2px;
        height: unset !important;

        form {
            margin: auto;
        }
    }

    .el-header {
        padding: 20px
    }

    .el-form-item {
        margin-bottom: unset
    }

    .tableBox {
        margin-top: 10px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: #bfbfbf 0 0 2px;
    }

    .block {
        margin-top: 20px;
        float: right;
    }

    .demo-drawer__content {
        padding: 20px 5%;
        line-height: 32px;

        .el-form-item {
            margin-top: 20px;
        }

        .demo-drawer__footer {
            position: fixed;
            bottom: 30px;
            width: 27%;
            margin-top: 20px;
            display: flex;

            button {
                flex: 1;
            }
        }

        .el-select {
            display: block;
        }
    }
</style>
