<template>
    <el-dialog
        v-if="dialogVisible"
        v-el-drag-dialog
        :title="showTitle"
        :visible.sync="dialogVisible"
        width="650px"
        class="custom-dialog"
    >
        <el-form
            v-if="dialogVisible"
            :rules="rules"
            ref="editForm"
            size="mini"
            :model="form"
            label-position="right"
            label-width="120px"
        >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="预警编号" prop="id">
                        <el-input v-model="form.id" placeholder="主键，唯一"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="系统ID" prop="equipinfoId">
                        <el-input v-model="form.equipinfoId" placeholder="请输入系统ID"/>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="数据接入标识" prop="dataId">
                        <el-input v-model="form.dataId" placeholder="请输入数据接入标识"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="预警等级" prop="warningRank">
                        <el-select v-model="form.warningRank" placeholder="请选择预警等级" style="width: 100%;">
                            <el-option
                                v-for="item in options.rankOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="反馈时间" prop="realTime">
                        <el-date-picker
                            v-model="form.realTime"
                            type="datetime"
                            placeholder="选择反馈时间"
                            style="width: 100%;"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报人" prop="fillBy">
                        <el-input v-model="form.fillBy" placeholder="请输入填报人"/>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="有效标记" prop="actived">
                        <el-select v-model="form.actived" placeholder="请选择有效标记" style="width: 100%;">
                            <el-option
                                v-for="item in options.activedOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="删除标记" prop="delFlag">
                        <el-select v-model="form.delFlag" placeholder="请选择删除标记" style="width: 100%;">
                            <el-option
                                v-for="item in options.delFlagOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="创建人" prop="creatorName">
                        <el-input v-model="form.creatorName" placeholder="请输入创建人"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="修改人" prop="updatorName">
                        <el-input v-model="form.updatorName" placeholder="请输入修改人"/>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="企业反馈信息" prop="warnFeedback">
                <el-input v-model="form.warnFeedback" type="textarea" placeholder="请输入企业反馈信息" :rows="3"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false"> 取消 </el-button>
            <el-button type="primary" :loading="loading" @click="onSubmit">
                确定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: "",
            },
            url: {
                type: Object,
                default: () => {
                    return {};
                },
            },
            options: {
                type: Object,
                default: () => {
                    return {
                    };
                },
            },
        },
        data() {
            return {

                dialogVisible: false,

                loading: false,
                form: {
                    id:"",
                    equipinfoId:"",
                    dataId:"",
                    warningRank:"",
                    warnFeedback:"",
                    realTime:"",
                    fillBy:"",
                    actived:"1", // 默认为有效
                    creatorName:"",
                    createTime:"",
                    updatorName:"",
                    updateTime:"",
                },
                editType:"add", //add或edit
                rules: {
                    equipinfoId: [
                        { required: true, message: '请输入系统ID', trigger: 'blur' }
                    ],
                    dataId: [
                        { required: true, message: '请输入数据接入标识', trigger: 'blur' }
                    ],
                    warningRank: [
                        { required: true, message: '请选择预警等级', trigger: 'change' }
                    ],
                    warnFeedback: [
                        { required: true, message: '请输入企业反馈信息', trigger: 'blur' }
                    ],
                    realTime: [
                        { required: true, message: '请选择反馈时间', trigger: 'change' }
                    ],
                    fillBy: [
                        { required: true, message: '请输入填报人', trigger: 'blur' }
                    ]
                }
            };
        },
        computed: {
            showTitle() {
                return this.editType=='edit' ? "编辑" + this.title : "新增" + this.title;
            },
        },
        methods: {
            reset() {
                this.editType='add'
                // this.$refs.elForm.resetFields();
                this.loading=false;
                this.form = this.$options.data().form;
            },
            show(form) {
                this.reset();
                if (form) {
                    this.editType='edit'
                    this.form = { ...this.$options.data().form, ...form };
                }
                this.dialogVisible = true;
            },
            onSubmit() {
                this.$refs.editForm.validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.loading = true;
                    let q;
                    if (this.editType=='edit') {
                        q = this.$axios.put( this.url.edit, this.form);
                    } else {
                        q = this.$axios.post(this.url.add, this.form);
                    }
                    q.then(({ message }) => {
                        this.$message({ type: "info", message: message });
                        this.dialogVisible = false;
                        this.$emit("refresh");
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
.custom-dialog {
    ::v-deep .el-dialog {
        background-color: rgba(4, 0, 79, 0.98);
        border: 1px solid rgba(75, 72, 178, 0.5);
        border-radius: 4px;

        .el-dialog__header {
            background-color: rgba(0, 8, 59, 0.9);
            padding: 15px 20px;
            border-bottom: 1px solid rgba(75, 72, 178, 0.5);

            .el-dialog__title {
                color: #e0e0ff;
                font-weight: bold;
                font-size: 16px;
            }

            .el-dialog__headerbtn .el-dialog__close {
                color: #e0e0ff;
            }
        }

        .el-dialog__body {
            padding: 20px;
            color: #e0e0ff;
        }

        .el-dialog__footer {
            padding: 10px 20px;
            border-top: 1px solid rgba(75, 72, 178, 0.5);
            background-color: rgba(0, 8, 59, 0.7);
        }
    }

    .el-form-item {
        margin-bottom: 15px;

        ::v-deep .el-form-item__label {
            color: #c0c4cc;
            font-size: 13px;
        }

        ::v-deep .el-input__inner {
            background-color: rgba(25, 22, 104, 0.7);
            border-color: rgba(75, 72, 178, 0.5);
            color: #e0e0ff;

            &::placeholder {
                color: rgba(195, 195, 219, 0.5);
            }
        }

        ::v-deep .el-textarea__inner {
            background-color: rgba(25, 22, 104, 0.7);
            border-color: rgba(75, 72, 178, 0.5);
            color: #e0e0ff;

            &::placeholder {
                color: rgba(195, 195, 219, 0.5);
            }
        }

        ::v-deep .el-select .el-input .el-select__caret {
            color: #e0e0ff;
        }
    }

    .dialog-footer {
        text-align: right;

        .el-button {
            background-color: rgba(30, 27, 110, 0.7);
            border-color: rgba(75, 72, 178, 0.5);
            color: #e0e0ff;

            &:hover {
                background-color: rgba(40, 36, 124, 0.8);
            }

            &[type="primary"] {
                background-color: #1976d2;
                border-color: #1565c0;
                color: #ffffff;

                &:hover {
                    background-color: #1e88e5;
                }
            }
        }
    }
}
</style>
