<template>
    <el-dialog :title='title' :visible.sync='dialogFormVisible' @close='close'>
        <el-form :model='form' :rules='newUserRules' ref='loginForm'>
            <el-form-item label='用户名' :label-width='formLabelWidth'>
                <el-input v-model='form.name' auto-complete='off'></el-input>
            </el-form-item>
            <el-form-item label='备注' :label-width='formLabelWidth'>
                <el-input v-model='form.remark' auto-complete='off'></el-input>
            </el-form-item>
            <el-form-item label='角色' :label-width='formLabelWidth'>
                <el-checkbox-group v-model='form.roleIds'>
                    <el-checkbox v-for='role in roles' :label='role.id' :key='role.id'>{{role.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div slot='footer' class='dialog-footer'>
            <el-button @click='close'>取消</el-button>
            <el-button type='primary' @click='save()'>保存</el-button>
        </div>
    </el-dialog>
</template>
<script>
import userapi from '@/api/system/user'
import roleapi from '@/api/system/role'
export default {
    name: 'UserAdd',
    data() {
        return {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            roles: null,
            title: null,
            form: {
                id: null,
                name: null,
                remark: null,
                roleIds: []
            },
            newUserRules: {
                username: [{ required: true, trigger: 'blur', validator: this.validateUsername }]
            }
        }
    },
    methods: {
        open(data) {
            let vm = this
            vm.dialogFormVisible = true
            if (!vm.roles) {
                roleapi.query({ criteria: {} }).then(resp => (vm.roles = resp.content))
            }
            if (data) {
                this.title = '编辑用户'
                vm.form.id = data.id
                vm.form.name = data.name
                vm.form.remark = data.remark
                vm.form.roleIds = []
                if (data.roles) {
                    data.roles.forEach(item => vm.form.roleIds.push(item.id))
                }
            } else {
                this.title = '创建用户'
            }
        },
        save() {
            let vm = this
            let url
            if (vm.form.id) {
                userapi.update(vm.form).then(this.saveResult)
            } else {
                userapi.create(vm.form).then(this.saveResult)
            }
        },
        saveResult(resp) {
            if (resp.result == 'success') {
                this.$message.success(this.title + '成功')
                this.dialogFormVisible = false
                this.$emit('confirm')
            } else {
                this.$message.error(this.title + '失败')
            }
        },
        validateUsername() {
            return true
        },
        close() {
            let vm = this
            vm.dialogFormVisible = false
            if (vm.form.id) {
                vm.form.id = null
                vm.form.name = null
                vm.form.remark = null
                vm.form.roleIds = []
            }
            vm.$emit('cancel')
        }
    }
}
</script>
<style lang="css" scoped>
</style>
