<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="600px"
            :close-on-click-modal="false"
            :before-close="close"
        >
            <el-form :model="formData" ref="formData" :rules="rules" label-width="100px">
                <el-form-item label="维保项名称:" prop="opt" class="classify-input">
                    <el-input placeholder="请输入" v-model="formData.opt"></el-input>
                </el-form-item>
                <el-form-item label="驱动类型:" prop="driveType">
                    <el-select placeholder="请选择驱动类型" v-model="formData.driveType">
                        <el-option
                            :label="item.value"
                            :value="item.key"
                            v-for="(item, i) in driveTypeList"
                            :key="i"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="维保周期:" prop="validTime">
                    <el-select placeholder="维保周期" v-model="formData.validTime">
                        <el-option
                            :label="item.value"
                            :value="item.key"
                            v-for="(item, i) in validTimeList"
                            :key="i"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="维保要求:" prop="requirement">
                    <el-input type="textarea" placeholder="请输入" v-model="formData.requirement"></el-input>
                </el-form-item>
                <el-form-item label="启用状态:" prop="statuz">
                    <el-switch
                        v-model="formData.statuz"
                        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 { addData, editData } from '@/apps/mobile/api/template-library-maintenance/index';
export default {
    data() {
        return {
            title: '新增',
            submitBtndisabled: false,
            rules: {
                opt: [
                    { required: true, message: '请输入维保项名称', trigger: 'blur' },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                driveType: [{ required: true, message: '请选择驱动类型', trigger: 'blur' }],
                validTime: [{ required: true, message: '请选择维保周期', trigger: 'blur' }],
                requirement: [
                    { required: true, message: '请输入维保要求', trigger: 'blur' },
                    { max: 500, message: '长度最大500个字符', trigger: 'blur' },
                ],
            },
            visible: false,
            formData: {},
            type: null,
            driveTypeList: [],
            validTimeList: [],
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // this.submitBtndisabled = true;
                    let message = '';
                    let obj = this.formData;
                    if (this.type === 'add') {
                        message = '新增成功';
                        //obj.createBy = 0; //创建者ID
                        addData(obj)
                            .then(res => {
                                this.completeOperation(message);
                            })
                            .catch(err => err);
                    }
                    if (this.type === 'edit') {
                        message = '修改成功';
                        let editObj = {
                            id: obj.id,
                            statuz: obj.statuz,
                            opt: obj.opt,
                            driveType: obj.driveType,
                            validTime: obj.validTime,
                            requirement: obj.requirement,
                        };
                        console.log(editObj);
                        editData(editObj)
                            .then(() => {
                                this.completeOperation(message);
                            })
                            .catch(err => err);
                    }
                    console.log(obj, 'obj');
                }
            });
        },
        open(driveTypeList, validTimeList, type, data) {
            this.driveTypeList = [...driveTypeList];
            this.validTimeList = [...validTimeList];
            this.driveTypeList.forEach(item => {
                item.key = Number(item.key);
            });
            console.log(this.driveTypeList, 'this.driveTypeList');
            console.log(this.validTimeList, 'this.validTimeList');
            this.type = type;
            if (type === 'edit') {
                this.title = '编辑';
                this.formData = { ...data };
                this.formData.driveType = Number(this.formData.driveType);
            }
            if (type === 'add') {
                this.title = '新增';
                this.formData = { statuz: 0 };
            }
            this.visible = true;
        },
        close() {
            this.$refs['formData'].resetFields();
            this.type = null;
            this.submitBtndisabled = false;
            this.formData = {};
            this.visible = false;
        },
        /**
         * 将新增、编辑操作完成之后共同需要调用的方法放在此函数里面
         * @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;
    }
}
</style>
