<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="500px"
            :before-close="close"
            :close-on-click-modal="false"
        >
            <el-form :model="formData" ref="formData" :rules="rules" label-width="90px">
                <el-form-item label="敏感词:" prop="keyword" class="classify-input">
                    <el-input placeholder="请输入" v-model="formData.keyword"></el-input>
                </el-form-item>
                <el-form-item label="启用状态:" prop="status">
                    <el-switch
                        v-model="formData.status"
                        active-text="开"
                        inactive-text="关"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('formData')"
                    :disabled="submitBtndisabled"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addsensitiveWord, editsensitiveWord } from '@/apps/mobile/api/SensitiveWordLibrary/index';
export default {
    data() {
        return {
            type: null,
            title: '新增',
            formData: {
                status: 0,
            },
            visible: false,
            submitBtndisabled: false,
            rules: {
                keyword: [
                    { required: true, message: '请输入敏感词', trigger: 'blur' },
                    { max: 10, message: '长度最大10个字符', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        open(type, data) {
            this.type = type;
            if (type === 'edit') {
                this.title = '编辑';
                this.formData = Object.assign({ ...data });
            } else {
                this.title = '新增';
                this.formData = {};
                this.formData = { status: 1 };
            }
            this.visible = true;
        },
        close() {
            this.type = null;
            this.$refs['formData'].resetFields();
            this.submitBtndisabled = false;
            this.visible = false;
        },

        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // this.submitBtndisabled = true;
                    let message = '';
                    let obj = { ...this.formData };
                    if (this.type === 'add') {
                        console.log(obj);
                        addsensitiveWord(obj)
                            .then(res => {
                                if (res.statusCode === '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message.warning(res.message);
                                }
                            })
                            .catch(err => err);
                    }
                    if (this.type === 'edit') {
                        let editObj = {
                            id: obj.id,
                            status: obj.status,
                            keyword: obj.keyword,
                        };
                        editsensitiveWord(editObj)
                            .then(res => {
                                if (res.statusCode === '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message.warning(res.message);
                                }
                            })
                            .catch(err => err);
                    }
                }
            });
        },

        /**
         * 将新增、编辑操作完成之后共同需要调用的方法放在此函数里面
         * @param {String} message 提示信息
         */
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    ::v-deep .el-input__inner {
        width: 200px;
    }

    ::v-deep .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    ::v-deep .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    ::v-deep .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }

    ::v-deep .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }
}
</style>
