<template>
    <div class="check">
        <form-option title="角色管理">
            <el-form :inline="true" :model="formData" ref="form" label-width="80px">
                <el-form-item label="角色名称:" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-button class="ml" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
                <el-button type="primary" icon="el-icon-search" @click="handleQueryData">查询</el-button>
            </el-form>
        </form-option>
        <div class="custom-table">
            <div class="tool">
                <el-button type="primary" icon="el-icon-plus" @click="handleAddRole">新增</el-button>
            </div>
            <el-table :data="list" border v-loading="loading">
                <el-table-column prop="name" show-overflow-tooltip align="center" label="角色名称" />
                <el-table-column prop="member_total" label="成员数量" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleUsers(scope.row)">{{ scope.row.member_total }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="describle" label="描述" align="center" show-overflow-tooltip />
                <el-table-column prop="date" label="更新时间" align="center" show-overflow-tooltip />
                <el-table-column prop="action" label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button type="text" size="small" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page :page="query.page" :size="query.size" :total="total" @pageChange="pageChange"></Page>
        </div>

        <user-dialog v-if="showUserDialog" :show.sync="showUserDialog" :role.sync="showUserRole" @close="closeUserDialog"></user-dialog>

        <role-edit-dialog :show.sync="showEditRoleDialog" :id.sync="showUserRoleId" @close="closeRoleDialog"></role-edit-dialog>
    </div>
</template>

<script>
import FormOption from "@/component/FormOption";
import UserDialog from './components/UserDialog.vue';
import RoleEditDialog from './components/RoleEditDialog.vue';

import { getRoles, removeRole } from '@/api/role';
import { formatDate, notEmpty } from '@/utils/tool';

export default {
    components: {
        FormOption,
        UserDialog,
        RoleEditDialog,
    },
    data() {
        return {
            formData: {
                name: "",
            },
            query: {
                page: 1,
                size: 10,
                sort: 'create_time desc',
            },
            total: 0,
            list: [],
            loading: false,
            showUserDialog: false,
            showUserRole: null,
            showUserRoleId: null,
            showEditRoleDialog: false,
        };
    },
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.size);
            return page > 0 ? page : 1;
        },
    },
    mounted() {
        this.handleQuery();
    },
    methods: {
        handleQueryData() {
            this.query.page = 1;
            this.handleQuery();
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.handleQuery();
        },
        pageChange(page, size) {
            this.query.page = page;
            this.query.size = size;
            this.handleQuery();
        },
        handleQuery() {
            this.loading = true;
            let query = '';
            if (notEmpty(this.formData.name)) {
                query = `name==*${this.formData.name.trim()}*`;
            }
            this.query.query = query;
            getRoles(this.query).then(res => {
                this.total = res.total || 0;
                const list = res.data || [];
                list.map(item => {
                    let date = '';
                    if (item.update_time) {
                        date = formatDate(item.update_time, true);
                    }
                    item.date = date;
                })
                this.list = list;
                this.loading = false;
            });
        },
        closeUserDialog() {
            this.showUserRole = null;
        },
        handleUsers(row) {
            this.showUserRole = row;
            this.showUserDialog = true;
        },
        closeRoleDialog() {
            this.showUserRole = null;
            this.handleQuery();
        },
        handleAddRole() {
            this.showUserRoleId = 0;
            this.showEditRoleDialog = true;
        },
        handleEdit(id) {
            this.showUserRoleId = id;
            this.showEditRoleDialog = true;
        },
        handleRemove(row) {
            if (row.member_total > 0) {
                this.$notify({
                    title: '不能删除',
                    message: '成员数量为0时才能执行删除操作!',
                    type: 'warning'
                });
                return;
            }
            this.$confirm(`确定要删除角色 ${row.name}？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeRole(row.id).then(result => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.handleQuery();
                });
            }).catch(() => {
                    
            });
        },
    },
};
</script>

<style lang="scss">
.check {
    .option .el-select .el-input__inner {
        padding-right: 15px;
    }
}
</style>
