<template>
    <div>
        <a-button type="text" @click="show = true">新增</a-button>
        <a-modal
            v-model:visible="show"
            :mask-closable="false"
            @close="this.$refs.form.resetFields()"
            @before-ok="submit"
        >
            <a-form auto-label-width :model="form" ref="form">
                <a-form-item label="名称" field="name" required>
                    <a-input
                        placeholder="请输入名称"
                        v-model="form.name"
                    ></a-input>
                </a-form-item>
                <a-form-item label="code" field="code" required>
                    <a-input
                        placeholder="请输入Code"
                        v-model="form.code"
                    ></a-input>
                </a-form-item>
                <a-form-item label="排序" field="sort" required>
                    <a-input-number
                        placeholder="请输入排序"
                        v-model="form.sort"
                    ></a-input-number>
                </a-form-item>
                <a-form-item label="备注" field="remark" required>
                    <a-input
                        placeholder="请输入备注"
                        v-model="form.remark"
                    ></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
export default {
    props: {
        appId: {
            type: String,
            default: ''
        }
    },
    watch: {
        appId: {
            handler(val) {
                this.form.appId = val
            },
            immediate: true
        }
    },
    data() {
        return {
            show: false,
            form: {
                appId: '',
                name: '',
                code: '',
                sort: '',
                remark: ''
            }
        }
    },
    methods: {
        submit(done) {
            this.$refs.form.validate(errors => {
                if (errors === undefined) {
                    this.$api.sys.roleSubmit(this.form).then(res => {
                        if (res.code === 200) {
                            this.$notification.success(res.msg)
                            this.$emit('ok')
                            done()
                        } else {
                            this.$notification.error(res.msg)
                            done(false)
                        }
                    })
                } else {
                    done(false)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
