<template>
    <div class="dns">
        <div class="configuration-title">Network Settings</div>
        <div class="configuration-text">Manage network settings of the device.</div>
        <Form :model="formServerSettings" label-position="left" :label-width="280">
            <div class="configuration-subtitle"></div>
            <div class="configuration-form-item">
                <FormItem label="LAN Interface">
                    <Select v-model="formServerSettings.LANInterface" style="width: 300px;">
                        <Option value="0">eth0</Option>
                        <Option value="1">eth1</Option>
                    </Select>
                </FormItem>
                <FormItem label="LAN Settings">
                    <Checkbox v-model="formServerSettings.LANSettings">Enable</Checkbox>
                </FormItem>
                <FormItem label="MAC Address">
                    <Input v-model="formServerSettings.MACAddress" style="width: 300px;"/>
                </FormItem>
            </div>
            <div class="configuration-subtitle">IPv4 Configuration</div>
            <div class="configuration-form-item">
                <FormItem label="Obtain an IP address automatically">
                    <Checkbox v-model="formServerSettings.UseDHCP1">Use DHCP</Checkbox>
                </FormItem>
                <FormItem label="IPv4 Address">
                    <Input v-model="formServerSettings.IPv4Address" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Subnet Mask">
                    <Input v-model="formServerSettings.SubnetMask" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Default Gateway">
                    <Input v-model="formServerSettings.DefaultGateway1" style="width: 300px;"/>
                </FormItem>
            </div>
            <div class="configuration-subtitle">IPv6 Configuration</div>
            <div class="configuration-form-item">
                <FormItem label="IPv6 Settings">
                    <Checkbox v-model="formServerSettings.IPv6Settings">Enable</Checkbox>
                </FormItem>
                <FormItem label="Obtain an IP address automatically">
                    <Checkbox v-model="formServerSettings.UseDHCP2">Use DHCP</Checkbox>
                </FormItem>
                <FormItem label="IPv6 Address">
                    <Input v-model="formServerSettings.IPv6Address" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Subnet Prefix length">
                    <Input v-model="formServerSettings.SubnetPrefixLength" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Default Gateway">
                    <Input v-model="formServerSettings.DefaultGateway2" style="width: 300px;"/>
                </FormItem>
            </div>
            <div class="configuration-subtitle">VLAN Configuration</div>
            <div class="configuration-form-item">
                <FormItem label="VLAN Settings">
                    <Checkbox v-model="formServerSettings.VLANSettings">Enable</Checkbox>
                </FormItem>
                <FormItem label="VLAN ID">
                    <Input v-model="formServerSettings.VLANID" style="width: 300px;"/>
                </FormItem>
                <FormItem label="VLAN Priority">
                    <Input v-model="formServerSettings.VLANPriority" style="width: 300px;"/>
                </FormItem>
            </div>
        </Form>
        <div class="configuration-btn-right">
            <Button type="primary" style="margin-right: 10px;">Save</Button>
            <Button type="primary">Reset</Button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Network",
        data() {
            return {
                formServerSettings: {
                    LANInterface: '0',
                    LANSettings: true,
                    MACAddress: '02:04:06:08:0A:8E',
                    UseDHCP1: false,
                    IPv4Address: '192.168.0.203',
                    SubnetMask: '255.255.255.0',
                    DefaultGateway1: '192.168.0.1',
                    IPv6Settings: true,
                    UseDHCP2: false,
                    IPv6Address: '',
                    SubnetPrefixLength: 0,
                    DefaultGateway2: '',
                    VLANSettings: false,
                    VLANID: 0,
                    VLANPriority: 0,
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .configuration-btn-right {
        border-top: 1px solid #000;
    }
    .configuration-form-item  {
        padding-left: 40px;
    }
</style>

