
<template>
    <div>
        <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div>
        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
            <div class="form_content">
                <div>
                    <p class="netWay">网络方式</p>
                    <el-radio v-model="radio" label="1">有线</el-radio>
                    <el-radio v-model="radio" label="2">WIFI</el-radio>
                    <el-divider></el-divider>
                </div>
                <div v-if="radio==1?true:false">
                <h2>有线</h2>
                <el-form :model="form" :label-position="labelPosition" label-width="80px">
                    <div class="wired">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="网口:" :label-width="formLabelWidth">
                                    <el-select v-model="form.region" placeholder="ETHO" style="width: 200px;height:30px">
                                        <el-option label="区域一" value="aa"></el-option>
                                        <el-option label="区域二" value="aa1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="默认网关:" :label-width="formLabelWidth">
                                    <el-row>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.
                                        </el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="子网掩码:" :label-width="formLabelWidth">
                                    <el-row>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input2"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input3"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input4"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="IP地址:" :label-width="formLabelWidth">
                                    <el-row>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.
                                        </el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="首选DNS:" :label-width="formLabelWidth">
                                    <el-row>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input2"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input3"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input4"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="默认网关:" :label-width="formLabelWidth">
                                    <el-row>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.
                                        </el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="MAC地址:" :label-width="formLabelWidth">
                                    <el-row>
                                        <el-col :span="24" class="mac">
                                            <el-input style="width: 200px;height:30px" /><el-button style="width: 80px; height: 30px;">复制</el-button>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>

                <div v-if="radio==2?true:false">
                <h2>WIFI</h2>
                <el-form :label-position="labelPosition" label-width="80px">
                    <div class="wifi">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="网口:" :label-width="formLabelWidth">
                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="密码:" :label-width="formLabelWidth">
                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="子网掩码:" :label-width="formLabelWidth">
                                    <el-row>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input2"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input3"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input4"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="IP地址:" :label-width="formLabelWidth">
                                    <el-row>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.
                                        </el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="默认网关:" :label-width="formLabelWidth">
                                    <el-row>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.
                                        </el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                        <el-col :span="1">.</el-col>
                                        <el-col :span="5">
                                            <el-input v-model="input1"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
                <div slot="footer" class="dialog-footer footer">
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>

                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'TestHelloWorld',
    data() {
        return {
            labelPosition: "left",
            input1: 192,
            input2: 168,
            input3: 1,
            input4: 1,
            radio: '2',
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '80px'
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .wired,
/deep/ .wifi {
    .el-row {
        .el-col-12:last-child {
            padding-right: 134px;
        }

        .el-col-12:first-child {
            padding-right: 138px;
        }

        .el-input__inner {
            height: 30px;
            text-align: center;
            padding: 0;
        }

        .el-row {
            display: flex;
            align-items: flex-end;

            .el-col-1 {
                text-align: center;
                line-height: 20px;
                height: 20px;
            }

            .mac {
                display: flex;
            }
        }
    }
}
.netWay {
    margin-bottom:20px;
    width: 80px;
    color: rgba(16, 16, 16, 1);
    font-size: 20px;
    text-align: left;
}
.footer{
    position:absolute;
    left:360px;
    bottom:20px;
}
</style>
