<template>
    <el-dialog
        v-model="dialogFormVisible"
        :title="title"
        width="500px"
        @close="close"
    >
        <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model.trim="form.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model.trim="form.password" type="password" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model.trim="form.email" />
            </el-form-item>
            <el-form-item label="角色" prop="roles">
                <el-checkbox-group v-model="form.roles">
                    <el-checkbox label="admin" value="admin" />
                    <el-checkbox label="editor" value="editor" />
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import { doEdit } from '@/api/userManagement'

    export default defineComponent({
        name: 'UserManagementEdit',
        emits: ['fetch-data'],
        setup(props, { emit }) {
            const $baseMessage = inject('$baseMessage')

            const state = reactive({
                formRef: null,
                form: {
                    roles: [],
                },
                rules: {
                    username: [
                        {
                            required: true,
                            trigger: 'blur',
                            message: '请输入用户名',
                        },
                    ],
                    password: [
                        {
                            required: true,
                            trigger: 'blur',
                            message: '请输入密码',
                        },
                    ],
                    email: [
                        {
                            required: true,
                            trigger: 'blur',
                            message: '请输入邮箱',
                        },
                    ],
                    roles: [
                        {
                            required: true,
                            trigger: 'blur',
                            message: '请选择角色',
                        },
                    ],
                },
                title: '',
                dialogFormVisible: false,
            })

            const showEdit = (row) => {
                if (!row) {
                    state.title = '添加'
                } else {
                    state.title = '编辑'
                    state.form = JSON.parse(JSON.stringify(row))
                }
                state.dialogFormVisible = true
            }
            const close = () => {
                state['formRef'].resetFields()
                state.form = {
                    roles: [],
                }
                state.dialogFormVisible = false
            }
            const save = () => {
                state['formRef'].validate(async (valid) => {
                    if (valid) {
                        const { msg } = await doEdit(state.form)
                        $baseMessage(msg, 'success', 'vab-hey-message-success')
                        emit('fetch-data')
                        close()
                    }
                })
            }

            return {
                ...toRefs(state),
                showEdit,
                close,
                save,
            }
        },
    })
</script>
