<template>
    <div class="account-dialog">
        <el-dialog
            :title="account == null ? '' : '分配“' + account.username + '”的角色'"
            v-model="visible"
            :before-close="cancel"
            :show-close="false"
        >
            <div class="toolbar">
                <div style="float: left">
                    <el-input placeholder="请输入角色名" size="small" style="width: 150px" v-model="query.name" @clear="clear()" clearable></el-input>
                    <el-button @click="search" type="success" icon="el-icon-search" size="small"></el-button>
                </div>
            </div>
            <el-table :data="allRole" border ref="roleTable" @select="select" style="width: 100%">
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="name" label="角色名称"></el-table-column>
                <el-table-column prop="remark" label="角色描述">
                    <template #default="scope">
                        {{ scope.row.remark ? scope.row.remark : '暂无描述' }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handlePageChange"
                style="text-align: center; margin-top: 20px"
                background
                layout="prev, pager, next, total, jumper"
                :total="total"
                v-model:current-page="query.pageNum"
                :page-size="query.pageSize"
            ></el-pagination>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel()" size="small">取 消</el-button>
                    <el-button type="primary" :loading="btnLoading" @click="btnOk" size="small">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
import { roleApi, accountApi } from '../api';
import { ElMessage } from 'element-plus';
export default defineComponent({
    name: 'RoleEdit',
    props: {
        visible: {
            type: Boolean,
        },
        account: {
            type: [Boolean, Object],
        },
    },
    setup(props: any, { emit }) {
        const roleTable: any = ref(null);
        const state = reactive({
            visible: false,
            btnLoading: false,
            // 所有角色
            allRole: [] as any,
            // 该账号拥有的角色id
            roles: [] as any,
            query: {
                name: null,
                pageNum: 1,
                pageSize: 5,
            },
            total: 0,
        });

        watch(props, (newValue, oldValue) => {
            state.visible = newValue.visible;
            if (newValue.account && newValue.account.id != 0) {
                accountApi.roleIds
                    .request({
                        id: props.account['id'],
                    })
                    .then((res) => {
                        state.roles = res || [];
                        search();
                    });
            } else {
                return;
            }
        });

        const handlePageChange = () => {
            search();
        };

        const select = (val: any, row: any) => {
            let roles = state.roles;
            // 如果账号的角色id存在则为取消该角色(删除角色id列表中的该记录id)，否则为新增角色
            if (roles.includes(row.id)) {
                for (let i = 0; i < roles.length; i++) {
                    let item = roles[i];
                    if (item === row.id) {
                        roles.splice(i, 1);
                        break;
                    }
                }
            } else {
                roles.push(row.id);
            }
        };

        /**
         * 检查是否勾选权限,即是否拥有权限
         */
        const checkSelected = () => {
            // 必须用异步，否则勾选不了
            setTimeout(() => {
                roleTable.value.clearSelection();
                state.allRole.forEach((r: any) => {
                    if (state.roles.includes(r.id)) {
                        roleTable.value.toggleRowSelection(r, true);
                    }
                });
            }, 50);
        };

        const btnOk = async () => {
            let roleIds = state.roles.join(',');
            await accountApi.saveRoles.request({
                id: props.account['id'],
                roleIds: roleIds,
            });
            ElMessage.success('保存成功!');
            cancel();
        };

        /**
         * 取消
         */
        const cancel = () => {
            state.query.pageNum = 1;
            state.query.name = null;
            emit('update:visible', false);
            emit('cancel');
        };

        /**
         * 清空查询框
         */
        const clear = () => {
            state.query.pageNum = 1;
            state.query.name = null;
            search();
        };

        const search = async () => {
            let res = await roleApi.list.request(state.query);
            state.allRole = res.list;
            state.total = res.total;
            checkSelected();
        };

        return {
            ...toRefs(state),
            roleTable,
            search,
            handlePageChange,
            select,
            btnOk,
            cancel,
            clear,
        };
    },
});
</script>
