<style lang="scss">
@import '@/styles/index.scss'; //导入样式

.roledlg {
    width: 100%;
    margin: auto;

    &__item {
        width: 100%;
        display: flex;

        &-left {
            flex: 1;
        }

        &-right {
            flex: none;
            width: 100px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-left: 15px;
            text-align: right;
        }
    }
}
</style>

<template>
    <div class="roledlg">
        <el-form :model="dialogData.editData.data" :rules="dialogData.editData.rules" ref="editDataForm" label-width="85px"
            :size="controlSize">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="dialogData.editData.data.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="desc">
                <el-input v-model="dialogData.editData.data.desc" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div style="padding-top: 10px;text-align:right">
            <el-button type="success" @click="hSubmit">确定</el-button>
            <el-button type="warning" @click="hClose">取消</el-button>
        </div>
    </div>
</template>


<script>
import { addRole, updateRole, getRoleById } from "@/api/user"

export default {
    name: 'roledlg',
    props: {
        isUpdate: {
            type: Boolean,
            require: true,
            default: false
        },
        id: {
            type: Number,
            require: true,
            default: 1
        }
    },
    data: function () {
        return {
            dialogData: {
                editData: {
                    data: {
                        id: 0,
                        name: '',
                        desc: '',
                        permission: '',

                    },
                    rules: {
                        name: [
                            { required: true, message: '请输入角色名称', trigger: 'blur' },
                        ]
                    }
                }
            },
        }
    },
    watch: {
    },
    computed: {
        controlSize() {
            return this.$store.getters.controlSize
        }
    },
    mounted() {
        this.$nextTick(function () {
            this.init()
        })
    },
    methods: {
        init() {
            if (this.isUpdate) {
                this.getRoleById()
            }
        },
        hClose() {//关闭对话框
            this.$emit("close")
        },
        getData() {
            this.$emit("get")
        },
        hSubmit() { //对话框确定按钮响应函数
            this.$refs.editDataForm.validate((valid) => {
                if (valid) {
                    if (!this.isUpdate) {
                        this.addRole()
                    } else {
                        this.updateRole()
                    }
                }
            })
        },
        addRole() {//新增
            let paramData = {}

            paramData.name = this.dialogData.editData.data.name
            paramData.desc = this.dialogData.editData.data.desc
            addRole(paramData).then((res) => {
                this.dialogData.editData.data.id = res.data
                this.$message.success('新增成功', '提示')
                this.getData()
            }).catch((err) => {
                this.$message({ message: err, type: 'error' })
            })
        },
        getRoleById() {
            let paramData = {}
            paramData.id = parseInt(this.id)
            getRoleById(paramData).then((res) => {
                this.dialogData.editData.data = res.data
            }).catch((err) => {
                this.$message({ message: err, type: 'error' })
            })
        },
        updateRole() {//修改
            let data = {}
            data.id = parseInt(this.dialogData.editData.data.id)
            data.name = this.dialogData.editData.data.name
            data.desc = this.dialogData.editData.data.desc

            updateRole(data).then(() => {
                this.$message.success('修改成功', '提示')
                this.getData()
                this.hClose()
            }).catch((err) => {
                this.$message({ message: err, type: 'error' })
            })
        }
    }
}

</script>
