<script lang="ts" setup>
import { traduction, getErrorTranslate } from '@/utils/language';
import { reactive, ref, computed, watch, nextTick, onMounted } from 'vue';
import useStore from '@/stores';
import { rangeVerification, strVerification } from '@/validators/validation-functions';
import { IRule } from '@/model/Service/vnc-interface';
import { getStoreData, loading, showFailedMessage, showSuccessMessage } from '@/utils/composition';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { STR_MATCH_0_255, IPV4_IP, IPV4_MASK, IP_REGEX_V4, IPV6 } from '@/utils/regular';
import IpInput from '@/components/IpInput/IpInput.vue';
import {
  IAuthorityEnum,
  IInputOption,
  ISwitchOption,
} from '../../User/Security/models/security.datatype';
import {
  factoryEnhanceData,
  isEqual,
  getShowedComps,
  saveParams,
} from '../../User/Security/utils/enhance.utils';
import { Resolution, useHome, WebStyleType } from '@/pages/Home/hooks/useHome';
import ibmaServer from './ibma.server';
const { getResolution, getWebStyle } = useHome();
const resolution = getResolution;
const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: () => {},
  },
});

loading(true);
const store = useStore();
const smsName = store.state.loct.smsName;
const dialogRef = ref();
const multiCommand = ref();
const overMax = ref(false);
// 获取locked锁定值
let systemLockDownEnabled = computed(() => {
  return store.state.glob.systemLocked;
});
// 常规配置权限
const isBaseConfig = checkPrivil(UserPrivil.baseConfig);
let params: any = reactive({
  BMCRelevantAttributes: {},
});
watch(systemLockDownEnabled, () => {
  init();
});
watch(props.formData, () => {});

const hasSecurityConfig = checkPrivil(UserPrivil.securityConfig);
const hasUserConfig = checkPrivil(UserPrivil.userConfig);

let inited = false;
const buttonDisable = ref(true);
const dialogConfig = reactive({
  title: '',
  content: '',
  id: '',
});
const preMuti = ref(0);
const popoverVisible = reactive({
  passwordPeriod: false,
  passwordMinLen: false,
  leastPeriod: false,
  inactivity: false,
  loginFailInput: false,
  expireWarning: false,
});
const etag = ref('');
const isCheck = ref(false);

// 黑匣子功能
const serviceEnable = reactive({
  label: traduction('SYSTEM_LOG_BLACKCLIP'),
  value: false,
  initValue: false,
  id: 'KboxEnabled',
} as ISwitchOption);
// 日志记录至syslog
const syslogEnabled = reactive({
  label: traduction('IBMA_LOG_RECORD_TO_SYSLOG'),
  value: false,
  initValue: false,
  id: 'SyslogEnabled',
  tip: hasSecurityConfig ? traduction('SECUTITY_CFG_USER_MNG_MEG') : '',
} as ISwitchOption);
// 订阅iBMC系统事件
const subscription = reactive({
  label: traduction('IBMA_SYSTEM_EVENT_SUBSCRIBING'),
  value: false,
  initValue: false,
  id: 'BMCEventSubscription',
} as ISwitchOption);

// 内存占用率计算
const memoryUsageEnabled = reactive({
  label: traduction('IBMA_MEMORY_USAGE_CALCULATION'),
  value: false,
  initValue: false,
  id: 'ActualMemoryUsageEnabled',
  options: [
    { id: 0, label: traduction('IBMC_MEMORY_MODE1'), value: true },
    { id: 1, label: traduction('IBMC_MEMORY_MODE2'), value: false },
  ],
} as any);
// 默认防火墙规则
const fireWall = reactive({
  label: traduction('IBMA_FIREWALL_RULES'),
  value: false,
  initValue: false,
  id: 'FirewallRulesConfigurable',
  valida: 'right',
} as ISwitchOption);
// iBMA用户名
const iBMAUser = reactive({
  id: 'User',
  label: traduction('IBMA_USER', { smsName }),
  value: '',
  tip: traduction('IBMC_USER_TIP', { smsName }),
  initValue: '',
} as IInputOption);
// 并行命令数量
const multiCommandNumber = reactive({
  id: 'MultiCommandNumber',
  label: traduction('IBMA_MULTI_COMMAND_NUMBER'),
  value: '',
  tip: traduction('VALIDTOR_INTGER_RANGE', [1, 10000]),
  initValue: '',
} as IInputOption);
// 网络通道类型
const networkType = reactive({
  id: 'NetworkType',
  label: traduction('IBMA_NETWORK_TYPE'),
  value: '',
  tip: traduction('SECUTITY_CFG_PWD_DAY'),
  initValue: '',
  options: [
    { id: 0, value: 'auto', label: traduction('IBMA_AUTO') },
    { id: 1, value: 'cdev', label: traduction('IBMC_NET_WORK_TYPE1') },
    { id: 2, value: 'veth', label: traduction('IBMC_NET_WORK_TYPE2') },
    { id: 3, value: 'usb', label: 'USB' },
  ],
});
// 网络通道类型
const communicationMode = reactive({
  id: 'communicationMode',
  label: traduction('IBMC_COMMUNICATION_MODE'),
  value: 1,
  initValue: '',
  options: [
    { id: 0, value: 1, label: 'IPv6' },
    { id: 1, value: 2, label: 'IPv4' },
  ],
});
// iBMC通信IP地址
const iBMCIp = reactive({
  id: 'BMCVethIp',
  label: traduction('IBMA_BMC_IP'),
  value: '',
  tip: traduction('IBMA_IPV4_TIP'),
  initValue: '',
} as IInputOption);
// iBMC子网掩码
const iBMCNetMask = reactive({
  id: 'BMCNetmask',
  label: traduction('IBMA_BMC_Net_Mask'),
  value: '',
  tip: traduction('IBMA_MASK_TIP'),
  initValue: '',
} as IInputOption);
// iBMA子网掩码
const netMask = reactive({
  id: 'Netmask',
  label: traduction('IBMA_Net_Mask'),
  value: '',
  tip: traduction('IBMA_MASK_TIP'),
  initValue: '',
} as IInputOption);
// Redfish IP地址
const httpServerIpv4 = reactive({
  id: 'HttpServerIPv4',
  label: traduction('IBMA_IP'),
  value: '',
  tip: traduction('IBMA_IPV4_TIP'),
  initValue: '',
} as IInputOption);
const httpServerIpv6 = reactive({
  id: 'HttpServerIPv6',
  label: traduction('IBMA_IP'),
  value: '',
  tip: traduction('IBMA_IPV6_TIP'),
  initValue: '',
} as IInputOption);
// Redfish端口
const httpServerPort = reactive({
  id: 'HttpServerPort',
  label: traduction('IBMA_HTTP_SERVER_PORT'),
  value: '8090',
  tip: traduction('IBMC_PORT_TIP'),
  initValue: '',
} as IInputOption);
// Socket Server端口
const socketPort = reactive({
  id: 'SocketPort',
  label: traduction('IBMA_SOCKET_PORT'),
  value: '8091',
  tip: traduction('IBMC_PORT_TIP'),
  initValue: '',
} as IInputOption);

const formComponents = [
  serviceEnable,
  subscription,
  memoryUsageEnabled,
  fireWall,
  iBMAUser,
  multiCommandNumber,
  networkType,
  socketPort,
  httpServerPort,
  httpServerIpv4,
  httpServerIpv6,
  netMask,
  iBMCNetMask,
  iBMCIp,
  syslogEnabled,
];
const formComponentsObj = reactive({
  serviceEnable: serviceEnable,
  subscription: subscription,
  memoryUsageEnabled: memoryUsageEnabled,
  fireWall: fireWall,
  iBMAUser: iBMAUser,
  multiCommandNumber: multiCommandNumber,
  networkType: networkType,
  socketPort,
  httpServerPort,
  httpServerIpv4,
  httpServerIpv6,
  netMask,
  iBMCNetMask,
  iBMCIp,
  syslogEnabled,
});

// 表单校验结果
let validateResult = {};
const ruleFormRef = ref();
const { getBasicData, patchBasicData } = ibmaServer(smsName);

// 输入框 发生input 事件
function input(inputItem: IInputOption, value: number, valid: string) {
  if (inputItem.id === 'httpServerPort' || inputItem.id === 'socketPort') {
    inputItem.value = Number(value);
  } else {
    inputItem.value = value;
  }
  nextTick(() => {
    detectChange();
  });
}

function focus(key: string) {
  popoverVisible[key] = true;
}

function blur(key: string) {
  popoverVisible[key] = false;
}

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

// 表单校验发生时 - 控制保存按钮状态 state:校验结果
function validate(key: string, state: boolean) {
  validateResult[key] = state;
  nextTick(() => {
    detectChange();
  });
}

const detectChange = (data?: string): any => {
  if (!inited) {
    return;
  }

  const ipV4List = ['iBMCIp.value', 'iBMCNetMask.value', 'httpServerIpv4.value', 'netMask.value'];
  const idList = ['HttpServerIPv4', 'Netmask', 'BMCNetmask', 'BMCVethIp'];
  for (let key in validateResult) {
    // 任意一个校验失败
    if (!validateResult[key]) {
      if (communicationMode.value === 1 && !ipV4List.includes(key)) {
        buttonDisable.value = true;
        return;
      }
      if (communicationMode.value === 2 && key !== 'httpServerIpv6.value') {
        buttonDisable.value = true;
        return;
      }
    }
  }

  const showedFormComps = getShowedComps(formComponents);
  let isChange = false;
  showedFormComps.forEach(form => {
    if (form.value === null && form.initValue === null) {
      return;
    }
    if (!isEqual(form.value, form.initValue)) {
      if (!idList.includes(form.id) && communicationMode.value === 1) {
        isChange = true;
      }
      if (form.id !== 'HttpServerIPv6' && communicationMode.value === 2) {
        isChange = true;
      }
    }
  });

  buttonDisable.value = !isChange;
};

function save() {
  params = {
    BMCRelevantAttributes: {},
  };
  const showedFormComps = getShowedComps(formComponents);
  const idList = ['HttpServerPort', 'SocketPort', 'MultiCommandNumber'];
  const ipList = ['HttpServerIPv4', 'Netmask', 'BMCIp', 'BMCNetmask'];
  showedFormComps.forEach(form => {
    if (!isEqual(form.value, form.initValue)) {
      if (idList.includes(form.id)) {
        params[form.id] = Number(form.value);
      } else {
        params[form.id] = form.value;
      }
    }
  });
  if (isCheck.value && multiCommandNumber.initValue !== '') {
    params.MultiCommandNumber = -1;
  }
  if (communicationMode.value === 1) {
    for (let item of ipList) {
      if (params[item]) {
        delete params[item];
      }
    }
    params['HttpServerIp'] = params['HttpServerIPv6'];
    delete params['HttpServerIPv6'];
  } else {
    if (params['HttpServerIPv6']) {
      delete params['HttpServerIPv6'];
    }
    params['HttpServerIp'] = params['HttpServerIPv4'];
    delete params['HttpServerIPv4'];
  }
  if (
    !params['BMCNetmask'] &&
    !params['BMCVethIp'] &&
    params['BMCEventSubscription'] === undefined
  ) {
    delete params.BMCRelevantAttributes;
  }
  if (params['BMCNetmask']) {
    params.BMCRelevantAttributes['BMCNetmask'] = params['BMCNetmask'];
    delete params['BMCNetmask'];
  }
  if (params['BMCVethIp']) {
    params.BMCRelevantAttributes['BMCVethIp'] = params['BMCVethIp'];
    delete params['BMCVethIp'];
  }
  if (params['BMCEventSubscription'] !== undefined) {
    params.BMCRelevantAttributes['BMCEventSubscription'] = params['BMCEventSubscription'];
    delete params['BMCEventSubscription'];
  }
  loading(true);

  patchBasicData(params, etag.value)
    .then(res => {
      showSuccessMessage();
    })
    .catch(error => {
      loading(false);
      const errorCode = error?.data.error[0].code;
      showFailedMessage(getErrorTranslate(errorCode));
    })
    .finally(() => {
      init();
    });
}

function dialogClose(reason: boolean) {
  dialogRef.value.hide();
  if (reason) {
    save();
  }
}

const formRules = reactive({
  loginFailValid: {
    type: 'number',
    required: true,
    isInteger: true,
    min: 1,
    max: 30,
    message: traduction('VALID_VALUE_RANGE_TIP', [1, 30]),
    validator: rangeVerification,
    trigger: 'blur',
  },
  inactivityValid: {
    type: 'number',
    required: true,
    isInteger: true,
    min: 30,
    max: 365,
    validator: (rule: IRule, valueParams: any, callback: any) => {
      let value = valueParams;
      if (value === '') {
        callback(new Error(traduction('VALID_VALUE_RANGE_TIP', [30, 365])));
        return false;
      }
      // 输入的要是数字字符串 或者 数字
      const reg = /(^[\-0-9][0-9]*(.[0-9]+)?)$/;
      if (!reg.test(value)) {
        callback(new Error(traduction('VALID_NUMBER_INFO')));
        return false;
      }
      if (typeof value === 'string') {
        value = Number(value);
      }
      if (value === 0 || (rule.min && rule.max && value >= rule.min && value <= rule.max)) {
        callback();
        return true;
      } else {
        callback(new Error(traduction('VALID_VALUE_RANGE_TIP', [30, 365])));
        return false;
      }
    },
    trigger: 'blur',
  },
  expiresValid: {
    type: 'number',
    required: true,
    isInteger: true,
    min: 7,
    max: 180,
    message: traduction('VALID_VALUE_RANGE_TIP', [7, 180]),
    validator: rangeVerification,
    trigger: 'blur',
  },
  passwordMinLen: {
    type: 'number',
    required: true,
    isInteger: true,
    min: 8,
    max: 20,
    message: traduction('VALIDATOR_PASSWORD_MIN_LEN'),
    validator: rangeVerification,
    trigger: 'blur',
  },
  // 密码有效期与密码最短使用期的校验互相关联，当有一处值更改时，另一处的校验需要重新设置
  periodValid: {
    type: 'number',
    required: true,
    isInteger: true,
    min: 0,
    max: 365,
    validator: (rule: IRule, value: string | number, callback: any) => {},
    trigger: 'blur',
  },
  iBMAUser: {
    type: 'text',
    required: true,
    message: traduction('VALIDTOR_FORMAT_ERROR'),
    matchRule: /^[a-zA-Z\d\-\_]{1,32}$/,
    containsEmptyString: true,
    validator: strVerification,
    trigger: 'change',
  },
  ipV4: {
    type: 'text',
    required: false,
    containsEmptyString: true,
    validator: ipAddressV4,
    trigger: 'blur',
  },
  netMask: {
    type: 'text',
    required: false,
    containsEmptyString: true,
    validator: (rule: any, value: string, callback: any) => {
      // 必传
      if (!value) {
        callback(new Error(traduction('IBMC_IPV6_ADDRES_ERROR_4')));
        return false;
      }

      // 格式校验
      if (!IPV4_MASK.test(value)) {
        callback(new Error(traduction('IBMC_SUB_NET_MASK')));
        return false;
      }

      // 掩码排除0.0.0.0
      if (value === '0.0.0.0') {
        callback(new Error(traduction('IBMC_SUB_NET_MASK')));
        return false;
      }

      callback();
      return true;
    },
    trigger: 'blur',
  },
  ipV4AndIpV6: {
    type: 'text',
    required: false,
    containsEmptyString: true,
    message: traduction('VALIDTOR_FORMAT_ERROR'),
    validator: (rule: any, value: string, callback: any) => {
      return validateIpv6(value, callback);
    },
    trigger: 'change',
  },
  ipV6: {
    type: 'text',
    required: false,
    containsEmptyString: true,
    message: traduction('VALIDTOR_FORMAT_ERROR'),
    validator: (rule: any, value: string, callback: any) => {
      return validateIpv6(value, callback);
    },
    trigger: 'change',
  },
  portRange: {
    type: 'text',
    min: 1024,
    max: 65535,
    required: true,
    isInteger: true,
    message: traduction('IBMC_PORT_LIMIT'),
    validator: rangeVerification,
    trigger: 'change',
  },
  countRange: {
    type: 'text',
    min: 1,
    max: 10000,
    required: true,
    isInteger: true,
    message: traduction('VALIDTOR_FORMAT_ERROR'),
    validator: rangeVerification,
    trigger: 'change',
  },
});

function ipAddressV4(rule: any, value: string, callback: any) {
  // 必传
  if (!value) {
    callback(new Error(traduction('IBMC_IPV6_ADDRES_ERROR_4')));
    return false;
  }

  // ip格式校验
  if (!IPV4_IP.test(value)) {
    callback(new Error(traduction('IBMC_ENTER_CORRECT_IP')));
    return false;
  }

  // 不能是127开头的
  if (!validate127(value)) {
    callback(new Error(traduction('IBMC_NET_ERROR_IP')));
    return false;
  }
  callback();
  return true;
}

function validate127(value: string) {
  const str = value.split('.')[0];
  return str === '127' ? false : true;
}

function validateIpv6(value: string, callback: any) {
  if (value === '') {
    return false;
  }
  if (value.indexOf(':') > -1) {
    if (!IPV6.test(value)) {
      callback(new Error(traduction('COMMON_FORMAT_ERROR')));
      return false;
    } else {
      callback();
      return true;
    }
  }
  callback(new Error(traduction('COMMON_FORMAT_ERROR')));
  return false;
}

function init() {
  loading(true);
  getBasicData().then((res: any) => {
    etag.value = res.headers.etag;
    initValue(res.data);
  });
}
init();
function initValue(basicData: any) {
  if (basicData?.Attributes) {
    serviceEnable.value = basicData.Attributes.KboxEnabled || false;
    syslogEnabled.value = basicData.Attributes.SyslogEnabled || false;
    subscription.value = basicData.Attributes.BMCRelevantAttributes?.BMCEventSubscription || false;
    memoryUsageEnabled.value = basicData.Attributes.ActualMemoryUsageEnabled || false;
    fireWall.value = basicData.Attributes.FirewallRulesConfigurable || false;
    iBMAUser.value = basicData.Attributes.User || '';
    multiCommandNumber.value =
      basicData.Attributes.MultiCommandNumber === -1 ? '' : basicData.Attributes.MultiCommandNumber;
    isCheck.value = basicData.Attributes.MultiCommandNumber === -1;
    networkType.value = basicData.Attributes.NetworkType || '';
    iBMCIp.value = basicData.Attributes.BMCRelevantAttributes?.BMCVethIp || '';
    iBMCNetMask.value = basicData.Attributes.BMCRelevantAttributes?.BMCNetmask || '';
    netMask.value = basicData.Attributes.Netmask || '';

    httpServerPort.value = String(basicData.Attributes.HttpServerPort) || '';
    socketPort.value = String(basicData.Attributes.SocketPort) || '';
    if (basicData.Attributes.HttpServerIp) {
      if (
        basicData.Attributes.HttpServerIp.indexOf(':') > -1 &&
        IPV6.test(basicData.Attributes.HttpServerIp)
      ) {
        httpServerIpv6.value = basicData.Attributes.HttpServerIp;
        httpServerIpv4.value = '';
      } else {
        httpServerIpv4.value = basicData.Attributes.HttpServerIp;
        httpServerIpv6.value = '';
      }
    } else {
      httpServerIpv4.value = '';
      httpServerIpv6.value = '';
    }
    if (multiCommandNumber.value > 10000) {
      overMax.value = true;
    }
    preMuti.value = 0;
  }
  if (isCheck.value) {
    multiCommand.value.resetField();
  }
  setInitValue();
  detectChange();
  inited = true;
  loading(false);
}
function comModeChange(data: any) {
  if (data === 1) {
    validateResult['httpServerIpv6.value'] = formRules['ipV6'].validator(
      formRules['ipV6'],
      httpServerIpv6.value,
      () => {},
    );
    validate('httpServerIpv6.value', validateResult['httpServerIpv6.value']);
  } else {
    validateResult['httpServerIpv4.value'] = formRules['ipV4'].validator(
      formRules['ipV4'],
      httpServerIpv4.value,
      () => {},
    );
    validateResult['netMask.value'] = formRules['netMask'].validator(
      formRules['netMask'],
      netMask.value,
      () => {},
    );
    validateResult['iBMCIp.value'] = formRules['ipV4'].validator(
      formRules['ipV4'],
      iBMCIp.value,
      () => {},
    );
    validateResult['iBMCNetMask.value'] = formRules['netMask'].validator(
      formRules['netMask'],
      iBMCNetMask.value,
      () => {},
    );
    validate('httpServerIpv4.value', validateResult['httpServerIpv4.value']);
    validate('netMask.value', validateResult['netMask.value']);
    validate('iBMCIp.value', validateResult['iBMCIp.value']);
    validate('iBMCNetMask.value', validateResult['iBMCNetMask.value']);
  }
}

// 记录后台返回值，以后用来做判断是否进行了更改
function setInitValue(): void {
  for (const form of formComponents) {
    if (form.value !== undefined) {
      form.initValue = form.value;
    } else if (typeof form.value === 'object') {
      form.initValue = Object.assign({}, form.value);
    } else {
      form.initValue = form.value;
    }
  }
}
function isInfinity() {
  if (isCheck.value) {
    preMuti.value = multiCommandNumber.value;
    multiCommandNumber.value = '';
    detectChange();
    multiCommand.value.resetField();
    validateResult['multiCommandNumber.value'] = true;
  } else {
    multiCommandNumber.value = preMuti.value;
    detectChange();
  }
}
</script>

<template>
  <div id="securityEnhance">
    <el-form
      id="securityEnhanceForm"
      ref="ruleFormRef"
      label-width="auto"
      label-position="left"
      :model="formComponentsObj"
      :rules="formRules"
      :validate-on-rule-change="false"
      @validate="validate"
    >
      <!-- 黑匣子功能 -->
      <el-form-item :label="serviceEnable.label" class="small-item">
        <el-switch
          :id="serviceEnable.id"
          v-model="serviceEnable.value"
          class="switchLineHeight"
          :disabled="systemLockDownEnabled || !isBaseConfig"
          @change="detectChange()"
        ></el-switch>
        <div class="black-box-tip">{{ $t('IBMC_BLACK_BOX_TIP') }}</div>
      </el-form-item>
      <!-- 日志记录至syslog -->
      <el-form-item :label="syslogEnabled.label" class="small-item">
        <el-switch
          :id="syslogEnabled.id"
          v-model="syslogEnabled.value"
          class="switchLineHeight"
          :disabled="systemLockDownEnabled || !isBaseConfig"
          @change="detectChange()"
        ></el-switch>
      </el-form-item>
      <!-- 订阅iBMC系统事件 -->
      <el-form-item :label="subscription.label" class="small-item">
        <el-switch
          :id="subscription.id"
          v-model="subscription.value"
          class="switchLineHeight"
          :disabled="systemLockDownEnabled || !isBaseConfig"
          @change="detectChange()"
        ></el-switch>
      </el-form-item>
      <!-- 内存占用率计算 -->
      <el-form-item :label="memoryUsageEnabled.label" class="small-item">
        <el-radio-group
          :id="memoryUsageEnabled.id"
          v-model="memoryUsageEnabled.value"
          class="switchLineHeight"
          :disabled="systemLockDownEnabled || !isBaseConfig"
          @change="detectChange()"
        >
          <el-radio v-for="item in memoryUsageEnabled.options" :key="item.id" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 默认防火墙规则 -->
      <el-form-item :label="fireWall.label" class="small-item">
        <el-switch
          :id="fireWall.id"
          v-model="fireWall.value"
          class="switchLineHeight"
          :disabled="systemLockDownEnabled || !isBaseConfig"
          @change="detectChange()"
        ></el-switch>
      </el-form-item>
      <!-- iBMA用户名 -->
      <el-form-item
        :label="iBMAUser.label"
        class="item"
        :rules="formRules.iBMAUser"
        prop="iBMAUser.value"
      >
        <el-popover
          v-model:visible="popoverVisible[iBMAUser.id]"
          popper-class="wrap-popover"
          placement="right"
          :content="iBMAUser.tip"
          trigger="focus"
          trigger-keys
        >
          <template #reference>
            <el-input
              v-model="iBMAUser.value"
              v-addId.input="iBMAUser.id"
              v-clearable
              clearable
              type="text"
              :placeholder="$t('IBMA_INPUT_TEXT')"
              :disabled="systemLockDownEnabled || !isBaseConfig"
              @focus="focus(iBMAUser.id)"
              @blur="blur(iBMAUser.id)"
              @input="input(iBMAUser, $event, 'iBMAUser')"
              @clear="clear(iBMAUser.id)"
            >
              <template #suffix>
                <ErrorIcon />
                <ClearableIcon />
              </template>
            </el-input>
          </template>
        </el-popover>
      </el-form-item>
      <!-- 并行命令数量 -->
      <el-form-item
        ref="multiCommand"
        :label="multiCommandNumber.label"
        class="item multi"
        :rules="overMax ? '' : formRules.countRange"
        prop="multiCommandNumber.value"
      >
        <el-popover
          v-model:visible="popoverVisible[multiCommandNumber.id]"
          popper-class="no-wrap-popover"
          placement="right"
          :content="multiCommandNumber.tip"
          trigger="focus"
          trigger-keys
        >
          <template #reference>
            <el-input
              v-model="multiCommandNumber.value"
              v-addId.input="multiCommandNumber.id"
              v-clearable
              clearable
              type="text"
              :placeholder="$t('IBMA_INPUT_TEXT')"
              :disabled="isCheck || systemLockDownEnabled || !isBaseConfig || overMax"
              @focus="focus(multiCommandNumber.id)"
              @blur="blur(multiCommandNumber.id)"
              @input="input(multiCommandNumber, $event, 'countRange')"
              @clear="clear(multiCommandNumber.id)"
            >
              <template #suffix>
                <ErrorIcon />
                <ClearableIcon />
              </template>
            </el-input>
          </template>
        </el-popover>
        <el-checkbox
          v-model="isCheck"
          :label="$t('IBMA_INFINITY')"
          size="large"
          class="checkBox"
          :disabled="systemLockDownEnabled || !isBaseConfig"
          @change="isInfinity"
        />
      </el-form-item>
      <!-- Redfish端口 -->
      <el-form-item
        :label="httpServerPort.label"
        class="item"
        :rules="formRules.portRange"
        prop="httpServerPort.value"
      >
        <el-popover
          v-model:visible="popoverVisible[httpServerPort.id]"
          popper-class="no-wrap-popover"
          placement="right"
          :content="httpServerPort.tip"
          trigger="focus"
          trigger-keys
        >
          <template #reference>
            <el-input
              v-model="httpServerPort.value"
              v-addId.input="httpServerPort.id"
              v-clearable
              clearable
              type="text"
              :placeholder="$t('IBMA_INPUT_TEXT')"
              :disabled="systemLockDownEnabled || !isBaseConfig"
              @focus="focus(httpServerPort.id)"
              @blur="blur(httpServerPort.id)"
              @input="input(httpServerPort, $event, 'portRange')"
              @clear="clear(httpServerPort.id)"
            >
              <template #suffix>
                <ErrorIcon />
                <ClearableIcon />
              </template>
            </el-input>
          </template>
        </el-popover>
      </el-form-item>
      <!-- Socket Server端口 -->
      <el-form-item
        :label="socketPort.label"
        class="item"
        :rules="formRules.portRange"
        prop="socketPort.value"
      >
        <el-popover
          v-model:visible="popoverVisible[socketPort.id]"
          popper-class="no-wrap-popover"
          placement="right"
          :content="socketPort.tip"
          trigger="focus"
          trigger-keys
        >
          <template #reference>
            <el-input
              v-model="socketPort.value"
              v-addId.input="socketPort.id"
              v-clearable
              clearable
              type="number"
              :placeholder="$t('IBMA_INPUT_TEXT')"
              :disabled="systemLockDownEnabled || !isBaseConfig"
              @focus="focus(socketPort.id)"
              @blur="blur(socketPort.id)"
              @input="input(socketPort, $event, 'portRange')"
              @clear="clear(socketPort.id)"
            >
              <template #suffix>
                <ErrorIcon />
                <ClearableIcon />
              </template>
            </el-input>
          </template>
        </el-popover>
      </el-form-item>
      <!-- 网络类型 -->
      <el-form-item :label="networkType.label" class="small-item">
        <el-radio-group
          :id="networkType.id"
          v-model="networkType.value"
          class="switchLineHeight"
          :disabled="systemLockDownEnabled || !isBaseConfig"
          @change="detectChange()"
        >
          <el-radio v-for="item in networkType.options" :key="item.id" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- iBMA通信方式 -->
      <el-form-item :label="communicationMode.label" class="noneBottom small-item">
        <el-radio-group
          :id="communicationMode.id"
          v-model="communicationMode.value"
          class="switchLineHeight"
          :disabled="systemLockDownEnabled || !isBaseConfig"
          @change="comModeChange"
        >
          <el-radio v-for="item in communicationMode.options" :key="item.id" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="' '" class="changeIP">
        <!-- IPv4 -->
        <div
          v-if="communicationMode.value === 2"
          class="IPv4"
          :class="{ small: resolution === Resolution.SMALL }"
        >
          <div class="iBMA">
            <!-- Redfish IP地址 -->
            <el-form-item
              id="iBMAIp"
              :label="httpServerIpv4.label"
              class="item"
              :rules="formRules.ipV4AndIpV6"
              prop="httpServerIpv4.value"
            >
              <el-popover
                v-model:visible="popoverVisible[httpServerIpv4.id]"
                popper-class="no-wrap-popover"
                placement="right"
                :content="httpServerIpv4.tip"
                trigger="focus"
                trigger-keys
              >
                <template #reference>
                  <IpInput
                    ref="ipAddressV4RefObj"
                    :id-str="'ipV4'"
                    :input-style="{ width: '320px' }"
                    :value="httpServerIpv4.value"
                    :rule="formRules.ipV4"
                    :disabled="systemLockDownEnabled || !isBaseConfig"
                    @input="input(httpServerIpv4, $event, 'ipV4')"
                    @validate="validate('httpServerIpv4.value', $event)"
                    @focus="focus(httpServerIpv4.id)"
                    @blur="blur(httpServerIpv4.id)"
                  />
                </template>
              </el-popover>
            </el-form-item>
            <!-- iBMA子网掩码 -->
            <el-form-item
              id="iBMAMask"
              :label="netMask.label"
              class="item"
              :rules="formRules.netMask"
              prop="netMask.value"
            >
              <el-popover
                v-model:visible="popoverVisible[netMask.id]"
                popper-class="no-wrap-popover"
                placement="right"
                :content="netMask.tip"
                trigger="focus"
                trigger-keys
              >
                <template #reference>
                  <IpInput
                    ref="ipAddressV4RefObj"
                    :id-str="'ipV4'"
                    :input-style="{ width: '320px' }"
                    :value="netMask.value"
                    :rule="formRules.netMask"
                    :disabled="systemLockDownEnabled || !isBaseConfig"
                    @input="input(netMask, $event, 'netMask')"
                    @validate="validate('netMask.value', $event)"
                    @focus="focus(netMask.id)"
                    @blur="blur(netMask.id)"
                  />
                </template>
              </el-popover>
            </el-form-item>
          </div>
          <div class="iBMC">
            <!-- iBMC通信IP地址 -->
            <el-form-item
              id="iBMCIp"
              :label="iBMCIp.label"
              class="item"
              :rules="formRules.ipV4"
              prop="iBMCIp.value"
            >
              <el-popover
                v-model:visible="popoverVisible[iBMCIp.id]"
                popper-class="no-wrap-popover"
                placement="right"
                :content="iBMCIp.tip"
                trigger="focus"
                trigger-keys
              >
                <template #reference>
                  <IpInput
                    ref="ipAddressV4RefObj"
                    :id-str="'ipV4'"
                    :input-style="{ width: '320px' }"
                    :value="iBMCIp.value"
                    :rule="formRules.ipV4"
                    :disabled="systemLockDownEnabled || !isBaseConfig"
                    @input="input(iBMCIp, $event, 'ipV4')"
                    @validate="validate('iBMCIp.value', $event)"
                    @focus="focus(iBMCIp.id)"
                    @blur="blur(iBMCIp.id)"
                  />
                </template>
              </el-popover>
            </el-form-item>
            <!-- iBMC子网掩码 -->
            <el-form-item
              id="iBMCMask"
              :label="iBMCNetMask.label"
              class="item"
              :rules="formRules.netMask"
              prop="iBMCNetMask.value"
            >
              <el-popover
                v-model:visible="popoverVisible[iBMCNetMask.id]"
                popper-class="no-wrap-popover"
                placement="right"
                :content="iBMCNetMask.tip"
                trigger="focus"
                trigger-keys
              >
                <template #reference>
                  <IpInput
                    ref="ipAddressV4RefObj"
                    :id-str="'ipV4'"
                    :input-style="{ width: '320px' }"
                    :value="iBMCNetMask.value"
                    :disabled="systemLockDownEnabled || !isBaseConfig"
                    :rule="formRules.netMask"
                    @input="input(iBMCNetMask, $event, 'netMask')"
                    @focus="focus(iBMCNetMask.id)"
                    @blur="blur(iBMCNetMask.id)"
                    @validate="validate('iBMCNetMask.value', $event)"
                  />
                </template>
              </el-popover>
            </el-form-item>
          </div>
        </div>
        <!-- IPv6 -->
        <div v-else class="IPv6" :class="{ small: resolution === Resolution.SMALL }">
          <div class="iBMA">
            <!-- Redfish IP地址 -->
            <el-form-item
              id="iBMAIp"
              :label="httpServerIpv6.label"
              class="item"
              :rules="formRules.ipV4AndIpV6"
              prop="httpServerIpv6.value"
            >
              <el-popover
                v-model:visible="popoverVisible[httpServerIpv6.id]"
                popper-class="no-wrap-popover"
                placement="right"
                :content="httpServerIpv6.tip"
                trigger="focus"
                trigger-keys
              >
                <template #reference>
                  <el-input
                    v-model="httpServerIpv6.value"
                    v-addId.input="httpServerIpv6.id"
                    v-clearable
                    clearable
                    type="text"
                    :placeholder="$t('IBMA_INPUT_TEXT')"
                    :disabled="systemLockDownEnabled || !isBaseConfig"
                    @focus="focus(httpServerIpv6.id)"
                    @blur="blur(httpServerIpv6.id)"
                    @input="input(httpServerIpv6, $event, 'ipV4AndIpV6')"
                    @clear="clear(httpServerIpv6.id)"
                    @validate="validate('httpServerIpv6.value', $event)"
                  >
                    <template #suffix>
                      <ErrorIcon />
                      <ClearableIcon />
                    </template>
                  </el-input>
                </template>
              </el-popover>
            </el-form-item>
          </div>
        </div>
      </el-form-item>

      <div class="redFish">
        <div class="redFishPort"></div>
      </div>

      <!-- 保存按钮 -->
      <el-form-item label=" " class="noneBottom">
        <el-tooltip :content="$t('IBMA_HELP_DOCUMENT')" trigger-keys placement="top">
          <el-button
            id="authorityButton"
            type="primary"
            :disabled="buttonDisable || systemLockDownEnabled || !isBaseConfig"
            @click="save()"
          >
            {{ $t('COMMON_SAVE') }}
          </el-button>
        </el-tooltip>
      </el-form-item>
    </el-form>
  </div>
  <Dialog ref="dialogRef" :config="dialogConfig" @close="dialogClose"></Dialog>
</template>

<style lang="scss" scoped>
#securityEnhance {
  background: var(--o-bg-color-base);
  border-radius: 0 4px 4px;

  .el-select {
    width: 264px;
  }

  .input-top-text {
    display: block;
  }

  .margin-text {
    margin-left: 8px;
  }

  .lock-tip {
    color: var(--o-color-major);
    margin-left: 8px;
  }
  :deep(.el-form-item__label::before) {
    display: none;
  }
}
</style>
<style lang="scss">
.wrap-popover {
  width: 376px !important;
}
#securityEnhance {
  .small-item {
    height: 16px;
    .el-radio-group {
      height: 16px;
      .el-radio {
        height: 16px;
      }
    }
    .el-form-item__label {
      padding-top: 0;
      padding-bottom: 0;
    }

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

  .changeIP {
    margin-top: 8px;

    .IPv4 {
      display: flex;
      width: 100%;
      .iBMA {
        width: calc(50% - 16px);
        background-color: var(--o-bg-color-light);
        padding: 16px 24px;
        border-radius: 4px;
        height: 112px;
        #iBMAMask {
          margin-top: 16px;
        }
      }
      .iBMC {
        width: calc(50%);
        margin-left: 16px;
        padding: 16px 24px;
        background-color: var(--o-bg-color-light);
        border-radius: 4px;
        height: 112px;
        #iBMCMask {
          margin-top: 16px;
        }
      }
    }

    .IPv6 {
      .el-form-item__label-wrap {
        margin-right: 0px !important;
      }
      display: flex;
      width: 100%;
      .iBMA {
        width: calc(50% - 16px);
        background-color: var(--o-bg-color-light);
        padding: 16px 24px;
        border-radius: 4px;
        height: 64px;
        #iBMAMask {
          margin-top: 16px;
        }
      }
    }
    .small {
      display: block;
      .iBMA {
        width: calc(100% - 16px);
      }
      .iBMC {
        width: calc(100% - 16px);
        margin-left: 0px;
        margin-top: 8px;
      }
    }
  }
  .item {
    .el-input {
      width: 320px;
    }
  }
  .multi {
    .el-input {
      margin-right: 8px;
    }
  }
  .noneBottom {
    margin-bottom: 0px;
  }
  .numberItem {
    height: 32px;
    .el-input-number {
      width: 147px !important;
      .el-input__inner {
        padding-right: 39px !important;
      }
    }
    .checkBox {
      padding-left: 16px;
      height: 32px;
    }
  }
  .black-box-tip {
    padding-left: 8px;
    color: var(--o-text-color-tertiary);
  }
}
.netMask {
  display: flex;
  .ibmaNetMask {
    margin-left: 124px;
  }
}
.redFish {
  display: flex;
  .redFishPort {
    margin-left: 124px;
  }
}
</style>
