<template>
    <!-- 驳回弹框 -->
    <el-dialog
        title="驳回"
        :close-on-click-modal="false"
        :visible.sync="visible"
        :before-close="close"
    >
        <el-form ref="formData" :model="formData" label-width="100px" :rules="rules">
            <el-form-item label="驳回理由:" prop="checkComment">
                <el-input type="textarea" v-model="formData.checkComment" maxLength="20"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            formData: { id: null, checkComment: '' },
            visible: false,
            rules: {
                checkComment: [
                    { required: true, message: '请输入驳回理由', trigger: 'blur' },
                    { max: 20, message: '长度最大20个字符', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        open(id) {
            this.formData.id = id;
            this.visible = true;
        },
        close() {
            this.visible = false;
            this.formData = { id: null, checkComment: '' };
            this.$refs['formData'].resetFields();
        },
        submitForm() {
            this.$refs['formData'].validate(valid => {
                if (valid) {
                    this.$emit('isReject', this.formData);
                    this.$refs['formData'].resetFields();
                    this.visible = false;
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style scoped>
::v-deep .el-textarea__inner {
    min-height: 100px !important;
}
</style>
