<template>
    <div class="roles">
        <sum-head title="角色管理" text="" sum="" ></sum-head>

        <div class="filter-container">
            <el-input placeholder="角色名称/分配列表" v-model="listQuery.keyword" size="small" style="width: 200px;" class="filter-item" />
            <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>

            <el-button class="filter-item add" size="small" type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button>
        </div>

        <el-table
                v-loading="listLoading"
                :data="data.resultList"
                element-loading-text="Loading"
                size="small"
                border>
            <el-table-column label="角色ID" align="center" width="200">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <!--<el-table-column label="角色英文名" align="center" width="150">-->
                <!--<template slot-scope="scope">-->
                    <!--<span>{{ scope.row.name  }}</span>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="角色名称" align="center" width="150">
                <template slot-scope="scope">
                    <span>{{ scope.row.content  }}</span>
                </template>
            </el-table-column>
            <el-table-column label="分配列表（管理员姓名）" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.userName }}</span>
                    <!--<el-tag v-for="(item,i) in scope.row.permissionList" :key="i" style="margin-right: 5px">{{ item.permissionId }}</el-tag>-->
                </template>
            </el-table-column>
            <el-table-column label="描述" align="center" width="200">
                <template slot-scope="scope">
                    {{ scope.row.description }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="editRole(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="delRole(scope.row.id, scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <role-info ref="roleInfo" :action="action" :data="treeData" @updateList="getList"></role-info>
    </div>
</template>

<script>
import SumHead from '@/components/SumHead'
import roleInfo from './components/roleInfo'

import api from '@/api/power'
export default {
    name: "roles",
    components: {
        SumHead,
        roleInfo
    },
    data() {
        return {
            listQuery: {
                pageNumber: 1,
                pagePage: 10,
                // orderDirection: '',
                // orderProperty: '',
                keyword: undefined
            },
            data: {},
            listLoading: false,
            action: 'add',
            treeData: []
        }
    },
    methods: {
        getList() {
            this.listLoading = true
            api.getRoleList(this.listQuery).then((res) => {
                console.log(res)
                this.data = res.results
                this.listLoading = false
            }).catch(error => {
                console.log(error)
            })
        },
        getTreeList() {
            api.getTreeList().then((res) => {
                console.log(res)
                this.treeData = res.results.resultList
            }).catch((err) => {
                console.log(err)
            })
        },
        addRole() {
            this.action = 'add'
            this.$refs.roleInfo.open()
        },
        editRole(data) {
            this.action = 'edit'
            delete data.userName
            this.$refs.roleInfo.open(data)
        },
        delRole(id, index) {
            this.$confirm('你确定要删除这个角色吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.delRole({ id }).then((res) => {
                    console.log(res)
                    this.data.resultList.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(error => {
                    console.log(error)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    created() {
        this.getList()
        this.getTreeList()
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .roles {
        position: relative;
        padding: 5px 16px 0;
        margin-bottom: 30px;

        .filter-container {
            padding: 10px 0 10px 12px;
            .filter-item {
                width: 90px;
                margin-right: 20px;
            }
            .add {
                float: right;
                width: 100px;
            }
        }
        .pagination-container {
            margin: 20px 0 30px;
            float: right;
        }
    }
</style>
