<template>
    <el-card class="main-card">
        <el-button v-show="!show" size="mini" type="primary" @click="add(form.snmpItem.length)">添加</el-button>

        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-card v-for="(item, index) in form.snmpItem" :key="item.id" ref="card" style="margin-top: 20px">
                <el-form-item label="设备名称" prop="equipmentName">
                    <el-input v-model="item.equipmentName" :disabled="show" placeholder="请输入设备名称" />
                </el-form-item>
                <el-form-item label="设备地址" prop="ipAddress">
                    <el-input v-model="item.ipAddress" :disabled="show" placeholder="请输入设备地址" />
                </el-form-item>
                <el-form-item label="团体名" prop="community">
                    <el-input v-model="item.community" :disabled="show" placeholder="请输入团体名" />
                </el-form-item>
                <el-form-item label="OID" prop="oid">
                    <el-input v-model="item.oid" :disabled="show" placeholder="请输入OID" />
                </el-form-item>
                <el-form-item v-show="!show">
                    <el-button v-if="index + 1 === form.snmpItem.length" size="mini" type="primary" @click="add(form.snmpItem.length)">添加</el-button>
                    <el-button v-if="index !== 0" size="mini" type="danger" @click="del(item, index)">删除</el-button>
                </el-form-item>
            </el-card>

            <el-form-item style="margin-top: 50px; margin-left: 30%">
                <el-button v-show="!show" type="primary" @click="submitForm">确 定</el-button>
                <!--                <el-button @click="cancel">重 置</el-button>-->
                <el-button @click="goBack">返回列表</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import { addSnmp, getSnmp, updateSnmp } from '@/api/snmp/snmp';

export default {
    name: 'SnmpAdd',
    data() {
        return {
            show: false,
            // 表单参数
            form: {
                snmpItem: [
                    {
                        id: null,
                        ipAddress: null,
                        community: null,
                        oid: null,
                        equipmentName: null,
                    },
                ],
            },
            // 表单校验
            rules: {},
        };
    },
    created() {
        /* if (undefined !== this.$route.query.id ) {
         const nid = Number(this.$route.query.id);
         getSnmp(nid).then(response => {
             this.form = response.data;
         })
     }
     this.show = this.$route.query.show || this.show*/
    },
    methods: {
        // 表单重置
        reset() {
            this.form.snmpItem = {
                snmpItem: [
                    {
                        id: null,
                        ipAddress: null,
                        oid: null,
                        equipmentName: null,
                    },
                ],
            };
            this.resetForm('form');
        },
        add(length) {
            if (length >= 10) {
                this.$message({
                    type: 'warning',
                    message: '最多可新增10条!',
                });
            } else {
                this.form.snmpItem.push({
                    id: null,
                    ipAddress: null,
                    oid: null,
                    equipmentName: null,
                });
            }
        },
        del(item, index) {
            this.form.snmpItem.splice(index, 1);
        },
        // 取消按钮
        cancel() {
            this.reset();
        },
        /** 返回按钮 */
        goBack() {
            this.$tab.closePage();
            this.reset();
            this.$router.go(-1);
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.id != null) {
                        /*updateSnmp(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
            });*/
                    } else {
                        console.log(this.form.snmpItem);
                        addSnmp(this.form.snmpItem).then((response) => {
                            this.$modal.msgSuccess('新增成功');
                            this.show = true;
                        });
                    }
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
</style>
