<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-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
                    </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 options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-dialog width="30%" 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: "",
            options: [{
                value: '选项1',
                label: '测试1'
            }, {
                value: '选项2',
                label: '测试2'
            }, {
                value: '选项3',
                label: '测试3'
            }, {
                value: '选项4',
                label: '测试4'
            }, {
                value: '选项5',
                label: '测试5'
            }],
            value: '',
            formdata: {
                name: "Gateway",
                type: ""
            },
            rules: {
                name: [
                    { required: true, message: '请输入网关名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
            },
            outerVisible: false,
            innerVisible: false
        };
    },

    mounted() {

    },

    methods: {
        innerConfirm(){
            this.outerVisible=false;
            this.innerVisible=false;
        }
    },
};
</script>

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