<script lang="ts" setup>
import { IconAlarm } from '@computing/opendesign-icons';
import { traduction, getErrorTranslate } from '@/utils/language';
import { editNetworkData } from '../network.server';
import { nextTick, onUnmounted, reactive, ref, watch } from 'vue';
import { showElMessage, deepClone } from '@/utils/utils';
import { deleteNull } from './NetWorkPortMode/NetworkPortModeFunctions';
import { ipv4Rules, ipv6Rules } from './NetworkProtocols/NetworkProtocolsFunctions';
import { IconCaretDown, IconCaretUp } from '@computing/opendesign-icons';
import { showFailedMessage } from '@/utils/composition';
import IpInput from '@/components/IpInput/IpInput.vue';
import GlobalStoreService from '@/services/gloabal-store-service';

const globalStoreService = new GlobalStoreService();

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
    required: true,
  },
  lock: {
    type: Boolean,
    default: false,
    required: false,
  },
  permission: {
    type: Boolean,
    default: false,
    required: false,
  },
  address: {
    type: String,
    default: '',
    required: false,
  },
  multiSupported: {
    type: Boolean,
    default: false,
    required: true,
  },
});

const emits = defineEmits(['initShowData']);

watch(
  () => props.data,
  (val: any) => {
    nextTick(() => {
      protocolInit(val);
    });
  },
  { deep: true, immediate: true },
);

// 保存按钮状态
const saveBtnState = ref(true);
// 保存确认弹窗的开关
const dialogVisible = ref(false);
// 记录校验结果
let validateRes: any = {};
// 记录最终保存数据 - 以及用于判断保存按钮的状态
let queryParams: any = {};

// 记录原始数据
let preProtocalParams: any = reactive({});
// 展示数据
const protocalParams: any = reactive({});
// ipv6的校验规则
const ipv6RulesData = reactive(ipv6Rules(protocalParams, preProtocalParams));

const popoverSetting = reactive({
  // 是否有
  show: true,
  // popover的类型,是简单的字符串还是比较复杂的自定义内容（自定义的需要传组件）
  type: 'ordinary', // ordinary(简单的字符串)或者complex(复杂的自定义展示组件)
  // popover的类名
  popperClass: 'wrap-el-popover',
  // 展示内容
  content: traduction('IBMC_IP_SAME_NETWORK_SEGMENT'),
  // 展示位置
  placement: 'right',
  // popover触发方式
  trigger: 'focus',
});

const isShowMoreIp = ref(false);

// 点击其他地方的时候隐藏ip列表
window.addEventListener('click', e => {
  isShowMoreIp.value = false;
});

// ip输入框的ref对象
const ipAddressV4RefObj = ref();
const maskCodeV4RefObj = ref();
const gatewayV4RefObj = ref();

// 输入框的ref对象
const ruleFormRef = ref();

// ipv6是否获取焦点
const ipv6InputFocusState = reactive({
  ipAddressV6: false,
  maskCodeV6: false,
  gatewayV6: false,
});

let timer: any = null;

// 清空校验
function clearValidate(type?: 'IPv4' | 'IPv6') {
  if (!type) {
    // IPv4 部分的ip输入框清空校验
    ipAddressV4RefObj.value.clearValidate();
    maskCodeV4RefObj.value.clearValidate();
    gatewayV4RefObj.value.clearValidate();
    // IPv6 部分的输入框清空校验
    ruleFormRef.value.clearValidate(['ipAddressV6', 'maskCodeV6', 'gatewayV6']);
    Object.assign(validateRes, {
      ipAddressV4: true,
      maskCodeV4: true,
      gatewayV4: true,
      ipAddressV6: true,
      maskCodeV6: true,
      gatewayV6: true,
    });
  } else {
    if (type === 'IPv4') {
      ipAddressV4RefObj.value.clearValidate();
      maskCodeV4RefObj.value.clearValidate();
      gatewayV4RefObj.value.clearValidate();
      Object.assign(validateRes, {
        ipAddressV4: true,
        maskCodeV4: true,
        gatewayV4: true,
      });
    } else if (type === 'IPv6') {
      ruleFormRef.value.clearValidate(['ipAddressV6', 'maskCodeV6', 'gatewayV6']);
      Object.assign(validateRes, {
        ipAddressV6: true,
        maskCodeV6: true,
        gatewayV6: true,
      });
    }
  }
}

// 初始化数据加工
function protocolInit(networkProtocol: any) {
  validateRes = {};
  if (JSON.stringify(networkProtocol) === '{}') {
    return;
  }

  // 初始化展示数据
  Object.assign(protocalParams, deepClone(networkProtocol));
  Object.assign(preProtocalParams, deepClone(networkProtocol));

  // 清空IPv4和Ipv6的校验
  clearValidate();
}

// IPv4的模式发生修改
function modelChangeV4() {
  // 自动获取 数据恢复初始化
  if (protocalParams.netModelV4 === 'DHCP') {
    Object.assign(protocalParams, {
      ipAddressV4: preProtocalParams.ipAddressV4,
      maskCodeV4: preProtocalParams.maskCodeV4,
      gatewayV4: preProtocalParams.gatewayV4,
    });
    clearValidate('IPv4');
  } else {
    // 进行校验
    ruleFormRef.value.validateField(['ipAddressV4', 'maskCodeV4', 'gatewayV4']);
  }

  nextTick(() => {
    protocolEnabledEN();
  });
}

// IPv6的模式发生修改
function modelChangeV6() {
  // 自动获取 数据恢复初始化
  if (protocalParams.netModelV6 === 'DHCPv6') {
    Object.assign(protocalParams, {
      ipAddressV6: preProtocalParams.ipAddressV6,
      maskCodeV6: preProtocalParams.maskCodeV6,
      gatewayV6: preProtocalParams.gatewayV6,
    });
    clearValidate('IPv6');
  } else {
    // 进行校验
    ruleFormRef.value.validateField(['ipAddressV6', 'maskCodeV6', 'gatewayV6']);
  }

  nextTick(() => {
    protocolEnabledEN();
  });
}

// 点击确认
function sureSetting() {
  globalStoreService.setValue('isLoading', true);
  if (props.multiSupported) {
    queryParams.PermanentMACAddress = props.address;
  }
  editNetworkData(queryParams)
    .then((data: any) => {
      // 因为网络协议的配置会影响DNS的展示效果，所以这里得到返回数据后进行页面数据重新装填
      emits('initShowData', data);
      saveBtnState.value = !saveBtnState.value;
      dialogVisible.value = false;
      showElMessage('success', traduction('COMMON_SUCCESS'));
      globalStoreService.setValue('isLoading', false);
    })
    .catch((error) => {
      dialogVisible.value = false;
      const errorCode = error?.data.error[0].code;
      showFailedMessage(getErrorTranslate(errorCode) || traduction('COMMON_FAILED'));
      globalStoreService.setValue('isLoading', false);
    });
}

// ipv4部分的请求数据加工
function queryParamsOfIpv4() {
  // IPv4模式
  const { netModelV4, ipAddressV4, maskCodeV4, gatewayV4 } = protocalParams;

  if (netModelV4 !== null && netModelV4 !== preProtocalParams.netModelV4) {
    queryParams.NetworkProtocols.IPv4Config['IPAddressMode'] = netModelV4;
  }

  // IPv4手动配置 3个参数一块下发
  if (protocalParams.netModelV4 === 'Static') {
    if (
      (ipAddressV4 !== null && ipAddressV4 !== preProtocalParams.ipAddressV4) ||
      (maskCodeV4 !== null && maskCodeV4 !== preProtocalParams.maskCodeV4) ||
      (gatewayV4 !== null && gatewayV4 !== preProtocalParams.gatewayV4)
    ) {
      queryParams.NetworkProtocols.IPv4Config['IPAddress'] = ipAddressV4;
      queryParams.NetworkProtocols.IPv4Config['SubnetMask'] = maskCodeV4;
      queryParams.NetworkProtocols.IPv4Config['Gateway'] = gatewayV4;
    }
  }
}

// ipv6部分的请求数据加工
function queryParamsOfIpv6() {
  // IPv6模式
  const { netModelV6, ipAddressV6, maskCodeV6, gatewayV6 } = protocalParams;
  let ipv6Address = {};
  if (netModelV6 !== null && netModelV6 !== preProtocalParams.netModelV6) {
    ipv6Address['IPAddressMode'] = netModelV6;
  }

  // IPv6手动配置
  if (netModelV6 === 'Static') {
    if (ipAddressV6 !== null && ipAddressV6 !== preProtocalParams.ipAddressV6) {
      ipv6Address['IPAddress'] = ipAddressV6;
    }
    if (
      maskCodeV6 !== null &&
      ((maskCodeV6 === '' && maskCodeV6 !== preProtocalParams.maskCodeV6) ||
        (maskCodeV6 !== '' && parseInt(maskCodeV6, 10) !== preProtocalParams.maskCodeV6))
    ) {
      ipv6Address['PrefixLength'] = parseInt(maskCodeV6, 10);
    }
    if (gatewayV6 !== null && gatewayV6 !== preProtocalParams.gatewayV6) {
      queryParams.NetworkProtocols.IPv6Config['Gateway'] = gatewayV6;
    }
  }

  if (JSON.stringify(ipv6Address) !== '{}') {
    queryParams.NetworkProtocols.IPv6Config['IPv6Addresses'] = [ipv6Address];
  }
}

function hadValidateError(): boolean {
  for (const key in validateRes) {
    if (protocalParams.netIPVersion === 'IPv4AndIPv6') {
      if (!validateRes[key]) {
        saveBtnState.value = true;
        return false;
      }
    } else if (protocalParams.netIPVersion === 'IPv4') {
      if (['ipAddressV4', 'maskCodeV4', 'gatewayV4'].includes(key) && !validateRes[key]) {
        saveBtnState.value = true;
        return false;
      }
    } else if (protocalParams.netIPVersion === 'IPv6') {
      if (['ipAddressV6', 'maskCodeV6', 'gatewayV6'].includes(key) && !validateRes[key]) {
        saveBtnState.value = true;
        return false;
      }
    }
  }

  return true;
}

// 设置保存按钮的状态
function protocolEnabledEN(): void {
  // 有校验失败的
  if (!hadValidateError()) {
    return;
  }

  queryParams = {
    NetworkProtocols: {
      IPv4Config: {},
      IPv6Config: {},
    },
  };

  const { netIPVersion } = protocalParams;
  if (netIPVersion && netIPVersion !== preProtocalParams.netIPVersion) {
    queryParams.NetworkProtocols['ProtocolMode'] = netIPVersion;
  }

  if (netIPVersion === 'IPv4AndIPv6' || netIPVersion === 'IPv4') {
    queryParamsOfIpv4();
  }

  if (netIPVersion === 'IPv4AndIPv6' || netIPVersion === 'IPv6') {
    queryParamsOfIpv6();
  }

  deleteNull(queryParams.NetworkProtocols);
  deleteNull(queryParams);

  if (JSON.stringify(queryParams) !== '{}') {
    saveBtnState.value = false;
  } else {
    saveBtnState.value = true;
  }
}

function passiveValidate(refObj1: any, refObj2: any) {
  // 使另外两个输入框被动校验
  refObj1.value.validate();
  refObj2.value.validate();
}

function ipv4Input(key: string, value: string) {
  protocalParams[key] = value;
  // 获取校验结果，用于设置保存按钮的状态
  validateRes[key] = ipv4Rules(protocalParams)[key].validator(null, value, () => {});
  switch (key) {
    case 'ipAddressV4': {
      passiveValidate(maskCodeV4RefObj, gatewayV4RefObj);
      break;
    }
    case 'maskCodeV4': {
      passiveValidate(ipAddressV4RefObj, gatewayV4RefObj);
      break;
    }
    case 'gatewayV4': {
      passiveValidate(ipAddressV4RefObj, maskCodeV4RefObj);
      break;
    }
    default: {
      break;
    }
  }
}

function ipv6Input(key: string, value: string) {
  // 实时设置保存按钮状态
  validateRes[key] = ipv6RulesData[key].validator(null, value, () => {});
  // 校验另外两个输入框使用防抖函数减少计算量
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    switch (key) {
      case 'ipAddressV6': {
        // 校验前缀长度和默认网关
        ruleFormRef.value.validateField(['maskCodeV6', 'gatewayV6']);
        break;
      }
      case 'maskCodeV6': {
        // 校验ip地址和默认网关
        ruleFormRef.value.validateField(['ipAddressV6', 'gatewayV6']);
        break;
      }
      case 'gatewayV6': {
        // 校验ip地址和前缀长度
        ruleFormRef.value.validateField(['ipAddressV6', 'maskCodeV6']);
        break;
      }
      default: {
        break;
      }
    }
    timer = null;
  }, 100);
}

// 清空
function clear(key: string) {
  // 如果没有focus，那么这个地方需要手动调用一次校验(因为是blus校验)
  if (!ipv6InputFocusState[key]) {
    ruleFormRef.value.validateField(key);
  }
}

// ip输入框或者普通输入框发生校验 记录校验结果
function validate(key: string, value: boolean) {
  validateRes[key] = value;
  protocolEnabledEN();
}

onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
  }
});
</script>

<template>
  <!-- 网络协议 -->
  <div id="netwotkProtocol" class="box">
    <div class="part-title">{{ $t('IBMC_NETWORK_PROTOCOL') }}</div>
    <div class="row">
      <span class="key check-mode network-page-label">{{ $t('IBMC_CHOOSE_PROTOCOL') }}</span>

      <div class="content">
        <!--  IPv4 - IPv6  - IPv4/IPv6  -->
        <div class="radio-box">
          <el-radio
            v-model="protocalParams.netIPVersion"
            v-addId.radio="'portIPv4'"
            :disabled="lock || !permission"
            label="IPv4"
            size="large"
            @change="protocolEnabledEN"
          >
            IPv4
          </el-radio>
          <el-radio
            v-model="protocalParams.netIPVersion"
            v-addId.radio="'portIPv6'"
            :disabled="lock || !permission"
            label="IPv6"
            size="large"
            @change="protocolEnabledEN"
          >
            IPv6
          </el-radio>
          <el-radio
            v-model="protocalParams.netIPVersion"
            v-addId.radio="'portIPv4AndIPv6'"
            :disabled="lock || !permission"
            label="IPv4AndIPv6"
            size="large"
            @change="protocolEnabledEN"
          >
            IPv4/IPv6
          </el-radio>
        </div>

        <div class="bg-box">
          <!-- IPv4 -->
          <div
            v-show="
              protocalParams.netIPVersion === 'IPv4' ||
                protocalParams.netIPVersion === 'IPv4AndIPv6'
            "
            class="ipv ipv4-box"
          >
            <div class="ipv-title">IPv4</div>
            <div class="radio-box">
              <el-radio
                v-model="protocalParams.netModelV4"
                v-addId.radio="'DHCPIpv4'"
                :disabled="lock || !permission"
                label="DHCP"
                size="large"
                @change="modelChangeV4"
              >
                {{ $t('IBMC_IP_ADDRESS_AUTOMATICALLY') }}
              </el-radio>
              <el-radio
                v-model="protocalParams.netModelV4"
                v-addId.radio="'StaticIpv4'"
                :disabled="lock || !permission"
                label="Static"
                size="large"
                @change="modelChangeV4"
              >
                {{ $t('IBMC_IP_CONFIGURATION') }}
              </el-radio>
            </div>
            <el-form class="setting-box" label-width="auto" label-position="left">
              <!-- IP地址 -->
              <el-form-item :label="$t('COMMON_IPADRESS')">
                <IpInput
                  ref="ipAddressV4RefObj"
                  :disabled="protocalParams.netModelV4 === 'DHCP' || lock || !permission"
                  :id-str="'ipV4'"
                  :rule="ipv4Rules(protocalParams).ipAddressV4"
                  :input-style="{ width: '320px' }"
                  :value="protocalParams.ipAddressV4"
                  @input="ipv4Input('ipAddressV4', $event)"
                  @validate="validate('ipAddressV4', $event)"
                />
              </el-form-item>

              <!-- 掩码 -->
              <el-form-item :label="$t('IBMC_IP_ADDRESS02')">
                <IpInput
                  ref="maskCodeV4RefObj"
                  :disabled="protocalParams.netModelV4 === 'DHCP' || lock || !permission"
                  :id-str="'ipMaskCode'"
                  :rule="ipv4Rules(protocalParams).maskCodeV4"
                  :input-style="{ width: '320px' }"
                  :value="protocalParams.maskCodeV4"
                  @input="ipv4Input('maskCodeV4', $event)"
                  @validate="validate('maskCodeV4', $event)"
                />
              </el-form-item>

              <!-- 默认网关 -->
              <el-form-item :label="$t('IBMC_IP_ADDRESS03')">
                <IpInput
                  ref="gatewayV4RefObj"
                  :disabled="protocalParams.netModelV4 === 'DHCP' || lock || !permission"
                  :id-str="'ipGateway'"
                  :rule="ipv4Rules(protocalParams).gatewayV4"
                  :input-style="{ width: '320px' }"
                  :popover-setting="popoverSetting"
                  :value="protocalParams.gatewayV4"
                  @input="ipv4Input('gatewayV4', $event)"
                  @validate="validate('gatewayV4', $event)"
                />
              </el-form-item>

              <!-- MAC地址 -->
              <el-form-item :label="$t('NET_MAC_ADDRESS')" class="mac-position">
                <div id="netMacAddress">{{ protocalParams.addMacV4 }}</div>
              </el-form-item>
            </el-form>
          </div>

          <!-- IPv6 -->
          <div
            v-show="
              protocalParams.netIPVersion === 'IPv6' ||
                protocalParams.netIPVersion === 'IPv4AndIPv6'
            "
            class="ipv ipv6-box"
          >
            <div class="ipv-title">IPv6</div>
            <div class="radio-box">
              <el-radio
                v-model="protocalParams.netModelV6"
                v-addId.radio="'DHCPv6Ipv6'"
                :disabled="lock || !permission"
                label="DHCPv6"
                size="large"
                @change="modelChangeV6"
              >
                {{ $t('IBMC_IP_ADDRESS_AUTOMATICALLY') }}
              </el-radio>
              <el-radio
                v-model="protocalParams.netModelV6"
                v-addId.radio="'StaticIpv6'"
                :disabled="lock || !permission"
                label="Static"
                size="large"
                @change="modelChangeV6"
              >
                {{ $t('IBMC_IP_CONFIGURATION') }}
              </el-radio>
            </div>

            <el-form
              ref="ruleFormRef"
              class="setting-box setting-box-ipv6"
              :model="protocalParams"
              :rules="ipv6RulesData"
              label-width="auto"
              label-position="left"
              :validate-on-rule-change="false"
              @validate="validate"
            >
              <!-- IP地址 -->
              <el-form-item prop="ipAddressV6" :label="$t('COMMON_IPADRESS')">
                <el-input
                  v-model="protocalParams.ipAddressV6"
                  v-addId.input="'ipAddressIdV6'"
                  v-clearable
                  clearable
                  :disabled="protocalParams.netModelV6 === 'DHCPv6' || lock || !permission"
                  @input="ipv6Input('ipAddressV6', $event)"
                  @focus="ipv6InputFocusState.ipAddressV6 = true"
                  @blur="ipv6InputFocusState.ipAddressV6 = false"
                  @clear="clear('ipAddressV6')"
                >
                  <template #suffix>
                    <ErrorIcon />
                    <ClearableIcon />
                  </template>
                </el-input>
              </el-form-item>

              <!-- 前缀长度 -->
              <el-form-item prop="maskCodeV6" :label="$t('IBMC_IP_ADDRESS11')">
                <el-popover
                  v-model:visible="ipv6InputFocusState.maskCodeV6"
                  placement="right"
                  popper-class="wrap-el-popover"
                  :teleported="false"
                  :content="$t('IBMC_IP_DEFAULT_PRE')"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="protocalParams.maskCodeV6"
                      v-addId.input="'maskCodeIdV6'"
                      v-clearable
                      clearable
                      type="number"
                      :disabled="protocalParams.netModelV6 === 'DHCPv6' || lock || !permission"
                      @input="ipv6Input('maskCodeV6', $event)"
                      @focus="ipv6InputFocusState.maskCodeV6 = true"
                      @blur="ipv6InputFocusState.maskCodeV6 = false"
                      @clear="clear('maskCodeV6')"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>

              <!-- 默认网关 -->
              <el-form-item prop="gatewayV6" :label="$t('IBMC_IP_ADDRESS03')">
                <el-popover
                  v-model:visible="ipv6InputFocusState.gatewayV6"
                  placement="right"
                  popper-class="wrap-el-popover"
                  disabled="true"
                  :teleported="false"
                  :content="$t('IBMC_IP_SAME_NETWORK_SEGMENT')"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="protocalParams.gatewayV6"
                      v-addId.input="'gatewayIdV6'"
                      v-clearable
                      clearable
                      :disabled="protocalParams.netModelV6 === 'DHCPv6' || lock || !permission"
                      @input="ipv6Input('gatewayV6', $event)"
                      @focus="ipv6InputFocusState.gatewayV6 = true"
                      @blur="ipv6InputFocusState.gatewayV6 = false"
                      @clear="clear('gatewayV6')"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>

              <!-- 链路本地地址 -->
              <el-form-item :label="$t('IBMC_IP_ADDRESS10')" class="mac-position">
                <div id="addressIdV6">{{ protocalParams.addressValueV6 }}</div>
              </el-form-item>

              <!-- IP地址段 -->
              <el-form-item
                v-if="protocalParams.ipAddressShow"
                :label="protocalParams.iPAddresslabel[0].IP"
                class="ip-address-two"
              >
                <div id="iPAddrees2">
                  <span id="iPAddrees2Value">
                    {{ protocalParams.iPAddresslabel[0].IPAddressValue }}
                  </span>
                  <!-- 更多 -->
                  <span
                    v-if="protocalParams.iPAddresslabel.length > 1"
                    id="moreTitleId"
                    class="more-ip"
                    @click.stop="isShowMoreIp = !isShowMoreIp"
                  >
                    {{ $t('IBMC_MORE') }}
                    <span class="icon-box">
                      <IconCaretUp v-show="isShowMoreIp" />
                      <IconCaretDown v-show="!isShowMoreIp" />
                    </span>
                  </span>

                  <!-- 点击更多的展开内容 -->
                  <div
                    v-if="isShowMoreIp && protocalParams.iPAddresslabel.length > 1"
                    id="expandId"
                    class="more-ip-content"
                    @click.stop=""
                  >
                    <DataList
                      :data-list="protocalParams.iPAddresslabel"
                      :fields="{ key: 'IP', value: 'IPAddressValue' }"
                      :columns-num="1"
                    />
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <el-button
          v-if="permission"
          id="modeButton"
          :disabled="saveBtnState || lock"
          type="primary"
          @click="dialogVisible = true"
        >
          {{ $t('COMMON_SAVE') }}
        </el-button>
      </div>
    </div>

    <!-- 点击保存的弹窗 -->
    <div v-if="dialogVisible" v-reqKeepAlive.dialog>
      <el-dialog v-model="dialogVisible" :title="$t('ALARM_OK')" :close-on-click-modal="false">
        <div class="content">
          <el-icon>
            <IconAlarm />
          </el-icon>
          <span id="networkProtocolsTipText" class="text">{{ $t('IBMC_NETWORK_CONFIG_TIP') }}</span>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button id="networkProtocolsSave" size="small" type="primary" @click="sureSetting">
              {{ $t('NETWORK_PORT_CHANGE_OK') }}
            </el-button>
            <el-button id="networkProtocolsCancel" size="small" @click="dialogVisible = false">
              {{ $t('COMMON_CANCEL') }}
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  margin-top: 8px;
  padding: 16px;
  border: 1px solid #dfe5ef;
  background-color: var(--o-bg-color-base);
  border-radius: 4px;

  .part-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--o-text-color-primary);
    line-height: 24px;
    margin-bottom: 16px;
  }

  .row {
    display: flex;
    align-items: flex-start;

    .key {
      color: var(--o-text-color-secondary);
      font-size: 12px;
      width: 135px;
    }

    .check-mode {
      margin-right: 24px;
    }

    .content {
      flex: 1;

      .radio-box {
        .el-radio.el-radio--large {
          height: auto;
          min-width: 70px;
        }
      }

      .bg-box {
        margin: 16px 0 24px;
        display: flex;

        .ipv {
          flex: 1;
          padding: 24px 24px 0;
          border-radius: 4px;
          background-color: var(--o-bg-color-light);

          .ipv-title {
            font-size: 16px;
            line-height: 24px;
            color: var(--o-text-color-primary);
            font-weight: bold;
            margin-bottom: 24px;
          }

          .el-form-item {
            margin-bottom: 24px;
          }

          :deep(.mac-position) {
            height: 16px;
            .el-form-item__label-wrap {
              .el-form-item__label {
                padding: 0 24px 0 0;
              }
            }

            .el-form-item__content {
              line-height: 16px;
            }
          }

          .setting-box {
            margin-top: 24px;
            display: table;

            #iPAddrees2 {
              display: flex;
              align-items: center;
              position: relative;

              .more-ip {
                margin-left: 8px;
                color: var(--o-color-primary);
                cursor: pointer;
                display: flex;
                align-items: center;
                user-select: none;

                &:hover {
                  color: var(--o-color-primary-secondary);
                }

                .icon-box {
                  display: inline-block;
                  width: 16px;
                  height: 16px;
                }
              }

              .more-ip-content {
                padding: 8px 16px 0;
                position: absolute;
                z-index: 99;
                top: 24px;
                left: 0;
                border: 1px solid var(--o-color-primary);
                border-radius: 4px;
                background: var(--o-bg-color-base);

                :deep(.data-list-table .tr) {
                  .key {
                    padding-right: 8px;
                  }

                  .value {
                    white-space: nowrap;
                  }

                  .td {
                    padding-bottom: 8px;
                  }
                }
              }
            }
          }

          .setting-box-ipv6 {
            .el-input {
              width: 320px;
            }
          }

          :deep(.ip-address-two) {
            height: 16px;
            .el-form-item__label {
              padding-top: 0;
              padding-bottom: 0;
              line-height: 16px;
            }

            .el-form-item__content {
              line-height: 16px;
            }
          }
        }

        .ipv4-box {
          margin-right: 16px;
        }
      }
    }
  }

  :deep(.el-dialog) {
    width: 432px;

    .content {
      display: flex;

      .el-icon {
        margin-right: 16px;
        font-size: 28px;
      }

      .text {
        padding-top: 5px;
      }
    }
  }

  :deep(.el-form-item__content .el-popper) {
    min-width: 155px !important;
  }
}
</style>
