<template>
    <div>
        <!-- <div class="data_acquire">
            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
        </div> -->
        <div>
            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
                    <el-form-item label="网关名称:" prop="name">
                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="网关ID:" prop="type">
                        <el-select v-model="formdata.id" placeholder="LAN-BOX1" style="width: 200px;">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="网关类型:" prop="type">
                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="innerConfirm">确定</el-button>
                        <el-button @click="innerVisible = false">取 消</el-button>
                    </div>
                </el-dialog>
                <div slot="footer" class="dialog-footer-outer">
                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
                    <el-button @click="outerVisible = false">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TestDataAcquisition',

    data() {
        return {
            input1: "",
            options1:[{
                value:"有线区网关1",
                label:"有线区网关1",
            },{
                value:"无线区网关1",
                label:"无线区网关1",
            }],
            options2:[{
                value:"LAN-BOX1",
                label:"LAN-BOX1",
            },{
                value:"WLAN-BOX1",
                label:"WLAN-BOX1",
            }],
            options3: [{
                value: 'loT Lite网关',
                label: 'loT Lite网关'
            }, {
                value: 'MODBUS网关',
                label: 'MODBUS网关'
            }, {
                value: 'BACNET网关',
                label: 'BACNET网关'
            }, {
                value: 'OPC UA网关',
                label: 'OPC UA网关'
            }, {
                value: 'OPC DA网关',
                label: 'OPC DA网关'
            },
            {
                value: 'loT网关',
                label: 'loT网关'
            }],
            value: '',
            formdata: {
                name: "有线区网关1",
                id:"LAN-BOX1",
                type: "loT网关"
            },
            rules: {
                name: [
                    { required: true, message: '请输入网关名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
            },
            outerVisible: true,
            innerVisible: false,
        };
    },

    mounted() {

    },

    methods: {
        innerConfirm() {
            this.outerVisible = false;
            this.innerVisible = false;
            this.$router.replace("/channelconfig");
        }
    },
};
</script>

<style lang="less" scoped>
.data_acquire {
    font-size: 14px;
}

.inner_content {
    margin-left: 30px;
    width: 280px;
    height: 40px;
    // color: rgba(255, 255, 255, 0);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
</style>