<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="800px"
            :before-close="close"
            :close-on-click-modal="false"
        >
            <el-form :model="formData" ref="formData" :rules="rules" label-width="110px">
                <el-form-item label="系统模板名称:" prop="name" class="classify-input">
                    <el-input placeholder="请输入" v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="驱动类型:" prop="driveType">
                    <el-select placeholder="请选择驱动类型" v-model="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="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="启用状态:">
                    <el-switch
                        v-model="formData.statuz"
                        active-text="是"
                        inactive-text="否"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="维保项明细:">
                    <el-scrollbar class="maintenanceTable">
                        <el-table
                            ref="table"
                            :data="multipleTable"
                            style="width: 100%"
                            tooltip-effect="dark"
                            @selection-change="selectionChange"
                            border
                        >
                            <el-table-column type="selection"></el-table-column>
                            <el-table-column
                                prop="opt"
                                label="维保项"
                                min-width="110px;"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column
                                prop="requirement"
                                label="维保要求"
                                min-width="200px;"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                        </el-table>
                    </el-scrollbar>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button @click="toggleSelection([multipleTable[0]])">切换第一</el-button> -->
                <el-button @click="reset()">重 置</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('formData')"
                    :disabled="submitBtndisabled"
                >保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { queryPage } from '@/apps/mobile/api/template-library-maintenance/index';
import { addData, editData } from '@/apps/mobile/api/template-library-template/index';
export default {
    data() {
        return {
            title: '新增',
            submitBtndisabled: false,
            rules: {
                name: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                driveType: [{ required: true, message: '请选择', trigger: 'change' }],
                validTime: [{ required: true, message: '请选择', trigger: 'change' }],
            },
            formData: {
                name: '',
                driveType: null,
                validTime: null,
            }, // 列表数据
            type: Boolean,
            visible: false,
            multipleTable: [],
            driveTypeList: [],
            validTimeList: [],
            driveType: null,
            validTime: null,
            ids: [], //选中的数据ID
            relevanceIds: [], //编辑时关联的维保ID
            templateType: null, //1:系统模板2:企业模板
            id: null,
        };
    },
    methods: {
        open(driveTypeList, validTimeList, type, templateType, data) {
            this.driveTypeList = [...driveTypeList];
            this.validTimeList = [...validTimeList];
            this.type = type;
            this.templateType = templateType;
            console.log(this.templateType);
            if (type === 'edit') {
                this.title = '编辑';
                this.formData = { ...data };
                this.relevanceIds = this.formData.ids;
                this.id = this.formData.id;
                console.log(this.formData, 'this.formData');
                this.driveType = this.formData.driveType;
                this.validTime = this.formData.validTime;
                if (this.driveType) {
                    this.formData.driveType = true;
                }
                if (this.validTime) {
                    this.formData.validTime = true;
                }
            } else {
                this.title = '新增';
            }
            this.visible = true;
        },
        checked(itList) {
            itList.forEach(item => {
                this.$nextTick(() => {
                    this.$refs.table.toggleRowSelection(item, true);
                });
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // this.submitBtndisabled = true;
                    let message = '';
                    let obj = {
                        name: this.formData.name,
                        statuz: this.formData.statuz,
                        driveType: this.driveType,
                        validTime: this.validTime,
                        ids: this.ids,
                        type: this.templateType,
                        amount: this.ids.length,
                    };
                    if (obj.amount <= 0) {
                        this.$message.warning('未勾选维保项');
                        this.submitBtndisabled = false;
                        return false;
                    }
                    if (this.type === 'add') {
                        message = '新增成功';
                        obj.createBy = 0; //创建者ID
                        console.log(obj);
                        addData(obj)
                            .then(res => {
                                if (res.statusCode == "0") {
                                    this.$message.error(res.message);
                                }
                                else {
                                    this.completeOperation(message);
                                }
                            })
                            .catch(err => err);
                    }
                    if (this.type === 'edit') {
                        message = '修改成功';
                        obj.id = this.id;
                        console.log(obj);
                        editData(obj)
                            .then(() => {
                                this.completeOperation(message);
                            })
                            .catch(err => err);
                    }
                    // console.log(obj, 'obj');
                }
            });
        },
        close() {
            this.visible = false;
            this.multipleTable = [];
            this.driveTypeList = [];
            this.validTimeList = [];
            this.driveType = null;
            this.validTime = null;
            this.ids = [];
            this.$refs['formData'].resetFields();
        },
        queryMaintenance() {
            let obj = {
                driveType: this.driveType,
                validTime: this.validTime,
                // statuz: 1,
            };
            queryPage(obj)
                .then(res => {
                    this.multipleTable = [...res.data.records];
                    console.log(this.multipleTable, 'this.multipleTable');
                    if (this.type === 'edit') {
                        let itList = [];
                        console.log(this.ids, 'ids');
                        this.relevanceIds.forEach(item => {
                            let it = this.multipleTable.find(val => {
                                return val.id == item;
                            });
                            if (it) {
                                itList.push(it);
                            }
                        });
                        this.checked(itList); // 默认勾选
                    }
                })
                .catch(err => err);
        },
        selectionChange(data) {
            this.ids = data.map(item => {
                return item.id;
            });
            // console.log(this.ids, 'this.ids');
        },
        /**
         * 将新增、编辑操作完成之后共同需要调用的方法放在此函数里面
         * @param {String} message 提示信息
         */
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
        reset() {
            this.formData = {
                driveType: null,
                validTime: null,
            };
            this.multipleTable = [];
            this.driveType = null;
            this.validTime = null;
            this.ids = [];
            this.$refs['formData'].resetFields();
        },
    },
    watch: {
        driveType(val) {
            if (!val) {
                this.formData.driveType = null;
            } else {
                this.formData.driveType = true;
            }
            if (this.validTime) {
                this.queryMaintenance();
                this.ids = [];
            }
        },
        validTime(val) {
            if (!val) {
                this.formData.validTime = null;
            } else {
                this.formData.validTime = true;
            }
            if (this.driveType) {
                this.queryMaintenance();
                this.ids = [];
            }
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    .el-table {
        line-height: normal;
    }

    ::v-deep .el-input {
        width: auto;
    }

    ::v-deep .el-input .el-input__inner {
        width: 200px;
    }

    .maintenanceTable {
        height: 300px;
    }
}
</style>
