<script lang="ts" setup>
import useStore from '@/stores';
import { traduction, getErrorTranslate } from '@/utils/language';
import { STR_MATCH_0_255 } from '@/utils/regular';
import { initPasswordRules } from './snmpFunctions';
import { reactive, ref, nextTick, computed } from 'vue';
import { getSnmpData, editSnmpData } from './snmp.server';
import { showElMessage, compareObjectEqual, deepClone } from '@/utils/utils';
import { rangeVerification, strVerification } from '@/validators/validation-functions';
import { UserPrivil } from '@/model/base-enum';
import { checkPrivil } from '@/apps/app-bmc/router/routes';

import Lock from '@/components/Lock/Lock.vue';
import HelpIcon from '@/components/HelpIcon/HelpIcon.vue';
import ErrorIcon from '@/components/ErrorIcon/ErrorIcon.vue';
import LoginRules from '@/components/LoginRules/LoginRules.vue';
import ClearableIcon from '@/components/ClearableIcon/ClearableIcon.vue';
import ComplexPopoverContentOfList from '@/components/ComplexPopoverContent/ComplexPopoverContentOfList.vue';

import GlobalStoreService from '@/services/gloabal-store-service';
import { showFailedMessage } from '@/utils/composition';

const globalStoreService = new GlobalStoreService();
const successMsg = traduction('COMMON_SUCCESS');
const errorMsg = traduction('COMMON_FAILED');
const store = useStore();

const isConfigureUser = checkPrivil(UserPrivil.userConfig);
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});

const disabledState = computed(() => {
  return !isConfigureUser || isSystemLock.value;
});

// 保存按钮状态
const saveBtnState = ref(true);

// 初始值
let preData: any = {};

// 编辑中的数据-显示数据
const editData: any = reactive({
  Enabled: false,
  Port: '',
  SystemContact: '',
  SystemLocation: '',
  SNMPv1v2: {
    SNMPv1Enabled: false,
    SNMPv2Enabled: false,
    LongPasswordEnabled: false,
    LoginRule: [],
    PasswordComplexityCheckEnabled: false,
  },
  SNMPv3: {
    Enabled: false,
  },
  deleteReadChecked: false,
  readOnlyControl: '',
  readConfirmControl: '',
  deleteWriteControl: false,
  readWriteControl: '',
  writeConfirmControl: '',
});

// 密码类型输入框的popover文本(没有开启密码检查的时候才会展示)
const passwordTip = ref('');

// 表单校验结果
const validateResult = {};

// popover显示状态 即是popover的显示状态，同时也是focus状态
const popoverVisible: any = reactive({
  Port: false,
  SystemContact: false,
  SystemLocation: false,
  readOnlyControl: false,
  readConfirmControl: false,
  readWriteControl: false,
  writeConfirmControl: false,
});
// 主form表单的ref对象
const mainFormRef = ref();
const readFormRef = ref();
const readAndWriteFormRef = ref();
let readOnlyControlTemp: any = {};

// 校验规则
const rules = reactive({
  Port: {
    type: 'number',
    required: true,
    isInteger: true,
    min: 1,
    max: 65535,
    message: traduction('SERVICE_PORT_RANGES'),
    validator: rangeVerification,
    trigger: 'blur',
  },
  SystemContact: {
    type: 'text',
    required: false,
    minLength: 0,
    maxLength: 255,
    matchRule: STR_MATCH_0_255,
    containsEmptyString: true,
    message: traduction('VALIDTOR_FORMAT_ERROR'),
    validator: strVerification,
    trigger: 'blur',
  },
  SystemLocation: {
    type: 'text',
    required: false,
    minLength: 0,
    maxLength: 255,
    matchRule: STR_MATCH_0_255,
    containsEmptyString: true,
    message: traduction('VALIDTOR_FORMAT_ERROR'),
    validator: strVerification,
    trigger: 'blur',
  },
  readOnlyControl: {},
  readConfirmControl: {
    type: 'password',
    required: false,
    containsEmptyString: true,
    equals: {
      aimObj: editData,
      aimObjKey: 'readOnlyControl',
    },
    validator: strVerification,
    message: traduction('SERVICE_READ_ONLYS'),
    trigger: 'blur',
  },
  readWriteControl: {},
  writeConfirmControl: {
    type: 'password',
    required: false,
    containsEmptyString: true,
    equals: {
      aimObj: editData,
      aimObjKey: 'readWriteControl',
    },
    validator: strVerification,
    message: traduction('SERVICE_READ_WRITES'),
    trigger: 'blur',
  },
});

// 点击恢复默认值
function setDefaultValue() {
  if (preData.Port) {
    editData.Port = '161';
    mainFormRef.value.validateField('Port');
  }
  setSaveBtnState();
}

// 输入框 发生input 事件
function input(key: string, value: string) {
  editData[key] = value;
  // 调用校验方法校验数据是否能通过，因为当前校验方式是blur，在input事件触发时不会触发校验，
  // 但是为了在输入的时候控制保存按钮的状态，需要手动去触发校验函数获取校验结果，进而控制保存按钮状态
  validateResult[key] = rules[key].validator(rules[key], editData[key], () => {});

  // 只读团体名修改的时候，如果确认只读团体名有值，那么被动校验确认只读团体名
  /**
   * 如果是只读团体名输入框，还需要去校验确认只读团体名,下面是需要校验的情形:
   * 1. 当只读团体名输入框有值时
   * 2. 当只读团体名输入框和确认只读团体名输入框都没有值
   */
  if (
    key === 'readOnlyControl' &&
    (editData.readConfirmControl || (!editData.readOnlyControl && !editData.readConfirmControl))
  ) {
    readFormRef.value.validateField('readConfirmControl');
  }

  /**
   * 如果是读写团体名输入框，还需要去校验确认读写团体名,下面是需要校验的情形:
   * 1. 当读写团体名输入框有值时
   * 2. 当读写团体名输入框和确认确认读写团体名输入框都没有值
   */
  if (
    key === 'readWriteControl' &&
    (editData.writeConfirmControl || (!editData.readWriteControl && !editData.writeConfirmControl))
  ) {
    readAndWriteFormRef.value.validateField('writeConfirmControl');
  }
  let flexCondition =
    editData.readWriteControl &&
    editData.readOnlyControl &&
    editData.readWriteControl === editData.readOnlyControl;    
  if (
    (key === 'readWriteControl' || key === 'readOnlyControl') &&
    editData.readWriteControl &&
    editData.readOnlyControl
  ) {
    if (editData.readWriteControl === editData.readOnlyControl) {
      rules.readOnlyControl = {
        type: 'password',
        required: false,
        containsEmptyString: true,
        validator: () => {
          return !flexCondition;
        },
        verificationList: readOnlyControlTemp.verificationList,
        message: traduction('SNMP_READONLY_CONFIRM_TIP'),
        trigger: 'blur',
      };
      readFormRef.value.validateField('readOnlyControl');
    } else if (rules.readOnlyControl['message'] !== traduction('VALIDTOR_FORMAT_ERROR')) {
      rules.readOnlyControl = readOnlyControlTemp;
      readFormRef.value.validateField('readOnlyControl');
    }
  }
  nextTick(() => {
    setSaveBtnState();
  });
}

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

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

function clear(key: string) {
  if (key === 'readOnlyControl' || key === 'readWriteControl') {
    rules.readOnlyControl = readOnlyControlTemp;
    readFormRef.value.validateField('readOnlyControl');
  }
  // 如果没有focus，那么这个地方需要手动调用一次校验
  if (!popoverVisible[key]) {
    if (key === 'readOnlyControl' || key === 'readConfirmControl') {
      readFormRef.value.validateField(key);
    } else if (key === 'readWriteControl' || key === 'writeConfirmControl') {
      readAndWriteFormRef.value.validateField(key);
    } else {
      mainFormRef.value.validateField(key);
    }
  }

  input(key, '');
}

// 登陆规则发生修改
function loginRuleChange(res: any) {
  let { LoginRule } = editData.SNMPv1v2;
  if (LoginRule) {
    LoginRule.splice(0);
    for (let key in res) {
      if (res[key]) {
        LoginRule.push(key);
      }
    }
    setSaveBtnState();
  }
}

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

// 清空中间部分的四个输入框的内容
function clearCenterFourinput() {
  editData.readOnlyControl = '';
  editData.readConfirmControl = '';
  editData.readWriteControl = '';
  editData.writeConfirmControl = '';
}

// 超长口令发生修改
function longPasswordEnabledChange() {
  clearCenterFourinput();
  setPasswordRules();
  setPasswordTip();
  setSaveBtnState();
}

// 删除只读团体名/删除读写团体名 发生勾选改变
function deleteCommunity(key: number) {
  // 删除只读团体名
  if (key === 1) {
    editData.readOnlyControl = '';
    editData.readConfirmControl = '';
    // 清空校验状态
    readFormRef.value.clearValidate('readOnlyControl');
    readFormRef.value.clearValidate('readConfirmControl');
    validateResult['readOnlyControl'] = true;
    validateResult['readConfirmControl'] = true;
  } else {
    // 删除读写团体名
    editData.readWriteControl = '';
    editData.writeConfirmControl = '';
    // 清空校验状态
    readAndWriteFormRef.value.clearValidate('readWriteControl');
    readAndWriteFormRef.value.clearValidate('writeConfirmControl');
    validateResult['readWriteControl'] = true;
    validateResult['writeConfirmControl'] = true;
  }
  setSaveBtnState();
}

// 设置保存按钮状态
function setSaveBtnState() {
  for (let key in validateResult) {
    // 任意一个校验失败
    if (!validateResult[key]) {
      saveBtnState.value = true;
      return;
    }
  }

  // 只读团体名和确认只读团体名不相等  或者  读写团体名和确认读写团体名不相等
  const { readOnlyControl, readConfirmControl, readWriteControl, writeConfirmControl } = editData;
  if (readOnlyControl !== readConfirmControl || readWriteControl !== writeConfirmControl) {
    saveBtnState.value = true;
    return;
  }
  editData.SNMPv1v2.LoginRuleInfo.map((ruleItem: any, index: number) => {
    ruleItem.ID = index;
  });
  // 校验成功后，进行初始值和修改值的对比，看是否发生修改
  saveBtnState.value = compareObjectEqual(preData, editData, ['ID', 'readConfirmControl', 'writeConfirmControl']);
  editData.SNMPv1v2.LoginRuleInfo.forEach((ruleItem: any, index: number) => {
    const id = `Rule${index + 1}`;
    ruleItem.ID = id;
  });
}

// 获取请求参数
function getParams() {
  const params: any = {
    SNMPv1v2: {},
    SNMPv3: {},
  };
  if (editData.Enabled !== preData.Enabled) {
    params.Enabled = editData.Enabled;
  }
  if (editData.Port !== preData.Port) {
    params.Port = Number(editData.Port);
  }
  if (editData.SystemContact !== preData.SystemContact) {
    params.SystemContact = editData.SystemContact;
  }
  if (editData.SystemLocation !== preData.SystemLocation) {
    params.SystemLocation = editData.SystemLocation;
  }
  if (editData.SNMPv1v2.SNMPv1Enabled !== preData.SNMPv1v2.SNMPv1Enabled) {
    params.SNMPv1v2.SNMPv1Enabled = editData.SNMPv1v2.SNMPv1Enabled;
  }
  if (editData.SNMPv1v2.SNMPv2Enabled !== preData.SNMPv1v2.SNMPv2Enabled) {
    params.SNMPv1v2.SNMPv2Enabled = editData.SNMPv1v2.SNMPv2Enabled;
  }
  if (editData.SNMPv1v2.LongPasswordEnabled !== preData.SNMPv1v2.LongPasswordEnabled) {
    params.SNMPv1v2.LongPasswordEnabled = editData.SNMPv1v2.LongPasswordEnabled;
  }
  if (editData.SNMPv3.Enabled !== preData.SNMPv3.Enabled) {
    params.SNMPv3.Enabled = editData.SNMPv3.Enabled;
  }
  if (editData.readOnlyControl !== preData.readOnlyControl) {
    params.SNMPv1v2.ROCommunityName = editData.readOnlyControl;
  }
  if (editData.readWriteControl !== preData.readWriteControl) {
    params.SNMPv1v2.RWCommunityName = editData.readWriteControl;
  }
  if (editData.deleteReadChecked) {
    params.SNMPv1v2.ROCommunityName = '';
  }
  if (editData.deleteWriteControl) {
    params.SNMPv1v2.RWCommunityName = '';
  }

  if (JSON.stringify(editData.SNMPv1v2.LoginRule) !== JSON.stringify(preData.SNMPv1v2.LoginRule)) {
    params.SNMPv1v2.LoginRule = editData.SNMPv1v2.LoginRule;
  }
  deleteNULL(params);
  return params;
}

function deleteNULL(obj: any) {
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key) && JSON.stringify(obj[key]) === '{}') {
      delete obj[key];
    }
  }
  return obj;
}

// 点击保存
function submitForm() {
  editSnmpData(getParams())
    .then((data: any) => {
      // 重置内容
      data.deleteReadChecked = false;
      data.deleteWriteControl = false;
      if (!isConfigureUser) {
        data.readOnlyControl = '';
        data.readWriteControl = '';
        data.readConfirmControl = '';
        data.writeConfirmControl = '';
      }
      initData(data);
      saveBtnState.value = true;
      showElMessage('success', successMsg);
    })
    .catch((err: any) => {
      // 重置内容
      editData.deleteReadChecked = false;
      editData.deleteWriteControl = false;
      if (!isConfigureUser) {
        editData.readOnlyControl = '';
        editData.readWriteControl = '';
        editData.readConfirmControl = '';
        editData.writeConfirmControl = '';
      }
      saveBtnState.value = true;
      const errorCode = err?.data?.error?.[0]?.code;
      if (errorCode) {
        showFailedMessage(getErrorTranslate(errorCode));
      } else {
        showElMessage('error', errorMsg);
      }
    });
}

// 设置password输入框的校验规则
function setPasswordRules() {
  const passwordRule = initPasswordRules(
    editData.SNMPv1v2.PasswordComplexityCheckEnabled,
    editData.SNMPv1v2.LongPasswordEnabled,
  );
  rules.readOnlyControl = deepClone(passwordRule);
  readOnlyControlTemp = deepClone(passwordRule);
  rules.readWriteControl = deepClone(passwordRule);
}

// 设置password输入框的tip信息，只有在关闭密码检查的情况下才展示,否则是展示开启密码检查的内容
function setPasswordTip() {
  if (!editData.SNMPv1v2.PasswordComplexityCheckEnabled) {
    if (editData.SNMPv1v2.LongPasswordEnabled) {
      passwordTip.value = traduction('IBMC_SNMP_COMMUNITY_LONG_TIP');
    } else {
      passwordTip.value = traduction('IBMC_SNMP_COMMUNITY_TIP');
    }
  }
}

// 初始化展示数据
function initData(data: any) {
  let port = data.Port;
  if (port || port === 0) {
    data.Port = port.toString();
  }
  if (!(data.SNMPv1v2.LoginRule instanceof Array)) {
    data.SNMPv1v2.LoginRule = [];
  }
  if (data?.SNMPv1v2?.ROCommunityName && isConfigureUser) {
    editData.readOnlyControl = data.SNMPv1v2.ROCommunityName;
    editData.readConfirmControl = data.SNMPv1v2.ROCommunityName;
  }
  if (data?.SNMPv1v2?.RWCommunityName && isConfigureUser) {
    editData.readWriteControl = data.SNMPv1v2.RWCommunityName;
    editData.writeConfirmControl = data.SNMPv1v2.RWCommunityName;
  }
  Object.assign(editData, { ...data });
  preData = deepClone(editData);
  setPasswordRules();
  setPasswordTip();
  globalStoreService.setValue('isLoading', false);
}

// 获取数据
function getData() {
  globalStoreService.setValue('isLoading', true);
  getSnmpData()
    .then((data: any) => {
      initData(data);
    })
    .catch(() => {
      globalStoreService.setValue('isLoading', false);
    });
}

// 获取数据
nextTick(()=>{
  getData();
});
</script>

<template>
  <div id="snmpView" class="snmp-box">
    <!-- 内容区域 -->
    <div class="snmp-content">
      <!-- 主要内容区域 -->
      <div class="content-details">
        <el-form
          ref="mainFormRef"
          :model="editData"
          :rules="rules"
          label-position="left"
          label-width="auto"
          :validate-on-rule-change="false"
          @validate="validate"
        >
          <!-- SNMP使能 -->
          <el-form-item :label="$t('SERVICE_SNMP_ENABLE')" class="item switch-item">
            <el-switch
              id="snmpEnable"
              v-model="editData.Enabled"
              :disabled="disabledState"
              @change="setSaveBtnState"
            />
          </el-form-item>

          <!-- 端口 -->
          <el-form-item prop="Port" :label="$t('SERVICE_PORT')" class="item have-right-text-item">
            <el-popover
              v-model:visible="popoverVisible.Port"
              popper-class="no-wrap-popover"
              placement="top"
              :content="$t('VALIDTOR_RANGE')"
              trigger="focus"
              trigger-keys
            >
              <template #reference>
                <el-input
                  v-model="editData.Port"
                  v-addId.input="'portSnmp'"
                  v-clearable
                  clearable
                  type="text"
                  :disabled="disabledState"
                  @focus="focus('Port')"
                  @blur="blur('Port')"
                  @input="input('Port', $event)"
                  @clear="clear('Port')"
                >
                  <template #suffix>
                    <ErrorIcon />
                    <ClearableIcon />
                  </template>
                </el-input>
              </template>
            </el-popover>

            <!-- 恢复默认值 -->
            <div
              v-if="isConfigureUser && !isSystemLock"
              id="resetPortId"
              class="right-default-tip"
              @click="setDefaultValue"
            >
              {{ $t('SERVICE_DEFAULT_VALUE') }}
            </div>
          </el-form-item>

          <!-- 联系人 -->
          <el-form-item
            prop="SystemContact"
            :label="$t('SERVICE_SNMP_CONTACT')"
            class="item have-popper-item"
          >
            <el-popover
              v-model:visible="popoverVisible.SystemContact"
              popper-class="no-wrap-popover"
              placement="right"
              :content="$t('ALARM_REPORT_EMAIL_SUBJECT_TIP')"
              trigger="focus"
              trigger-keys
            >
              <template #reference>
                <el-input
                  v-model="editData.SystemContact"
                  v-addId.input="'productSnmp'"
                  v-clearable
                  clearable
                  type="text"
                  :disabled="disabledState"
                  @focus="focus('SystemContact')"
                  @blur="blur('SystemContact')"
                  @input="input('SystemContact', $event)"
                  @clear="clear('SystemContact')"
                >
                  <template #suffix>
                    <ErrorIcon />
                    <ClearableIcon />
                  </template>
                </el-input>
              </template>
            </el-popover>
          </el-form-item>

          <!-- 位置 -->
          <el-form-item
            prop="SystemLocation"
            :label="$t('SERVICE_SNMP_LOCATION')"
            class="item have-popper-item"
          >
            <el-popover
              v-model:visible="popoverVisible.SystemLocation"
              popper-class="no-wrap-popover"
              placement="right"
              :content="$t('ALARM_REPORT_EMAIL_SUBJECT_TIP')"
              trigger="focus"
              trigger-keys
            >
              <template #reference>
                <el-input
                  v-model="editData.SystemLocation"
                  v-addId.input="'locationSnmp'"
                  v-clearable
                  clearable
                  type="text"
                  :disabled="disabledState"
                  @focus="focus('SystemLocation')"
                  @blur="blur('SystemLocation')"
                  @input="input('SystemLocation', $event)"
                  @clear="clear('SystemLocation')"
                >
                  <template #suffix>
                    <ErrorIcon />
                    <ClearableIcon />
                  </template>
                </el-input>
              </template>
            </el-popover>
          </el-form-item>

          <!-- SNMPv1 SNMPv2 -->
          <el-form-item :label="$t('SERVICE_SNMP_CHOOSE')" class="item have-warn-item">
            <el-checkbox
              v-model="editData.SNMPv1v2['SNMPv1Enabled']"
              v-addId.checkbox="'snmpV1'"
              :label="$t('SERVICE_SNMP_V1')"
              :disabled="disabledState"
              size="large"
              @change="setSaveBtnState"
            ></el-checkbox>
            <el-checkbox
              v-model="editData.SNMPv1v2['SNMPv2Enabled']"
              v-addId.checkbox="'snmpV2'"
              :label="$t('SERVICE_SNMP_V2')"
              :disabled="disabledState"
              size="large"
              @change="setSaveBtnState"
            ></el-checkbox>
          </el-form-item>

          <!-- 勾选SNMPv1或者SNMPv2 展示的警告信息 -->
          <el-form-item
            v-if="editData.SNMPv1v2['SNMPv1Enabled'] || editData.SNMPv1v2['SNMPv2Enabled']"
            label=""
            class="have-warn-item warn-text"
          >
            <span id="snmpAlert">{{ $t('SERVICE_REDUCE_SECURITY') }}</span>
          </el-form-item>

          <!-- 特殊配置部分 -->
          <el-form-item label="" class="special-part">
            <div class="table-box">
              <!-- 超长口令 -->
              <div class="long-password tr">
                <div class="key-box td">
                  <div class="key-help">
                    <span class="key">{{ $t('SERVICE_OUT_PASSWORD') }}</span>
                    <HelpIcon
                      :append-to-body="true"
                      :placement="'top'"
                      :pop-class="'no-wrap-popover'"
                      :tips="$t('IBMC_SNMP_LONG_PASSWORD_TIP')"
                    />
                  </div>
                </div>
                <span class="td">
                  <el-switch
                    id="snmpLongId"
                    v-model="editData.SNMPv1v2.LongPasswordEnabled"
                    :disabled="disabledState"
                    @change="longPasswordEnabledChange"
                  />
                </span>
              </div>

              <!-- 删除只读团体名 -->
              <div class="tr read-tr">
                <span class="td">{{ $t('SERVICE_DELETE_READONLY') }}</span>
                <span class="td">
                  <el-switch
                    id="deleteReadId"
                    v-model="editData.deleteReadChecked"
                    :disabled="disabledState"
                    @change="deleteCommunity(1)"
                  />
                </span>
              </div>

              <!-- 只读团体名/确认只读团体名 -->
              <div class="tr input-tr">
                <div class="td"></div>
                <div class="td">
                  <el-form
                    ref="readFormRef"
                    :model="editData"
                    :rules="rules"
                    label-position="left"
                    label-width="auto"
                    :validate-on-rule-change="false"
                    @validate="validate"
                  >
                    <!-- 只读团体名 -->
                    <el-form-item prop="readOnlyControl" :label="$t('SERVICE_READYONLY_NAME')">
                      <el-popover
                        v-model:visible="popoverVisible.readOnlyControl"
                        popper-class="no-wrap-popover"
                        placement="right-start"
                        trigger="focus"
                        trigger-keys
                      >
                        <!-- 没有开启密码检查-popover内容 -->
                        <span v-if="!editData.SNMPv1v2.PasswordComplexityCheckEnabled">
                          {{ passwordTip }}
                        </span>
                        <!-- 开启密码检查-popover内容 -->
                        <ComplexPopoverContentOfList
                          v-if="editData.SNMPv1v2.PasswordComplexityCheckEnabled"
                          :data="rules.readOnlyControl['verificationList']"
                        />

                        <template #reference>
                          <el-input
                            v-model="editData.readOnlyControl"
                            v-addId.input="'snmpReadOnly'"
                            v-clearable
                            clearable
                            type="password"
                            class="no-line"
                            autocomplete="new-password"
                            :disabled="editData.deleteReadChecked || disabledState"
                            :show-password="isConfigureUser"
                            @focus="focus('readOnlyControl')"
                            @blur="blur('readOnlyControl')"
                            @input="input('readOnlyControl', $event)"
                            @clear="clear('readOnlyControl')"
                          >
                            <template #suffix>
                              <ErrorIcon />
                              <ClearableIcon />
                            </template>
                          </el-input>
                        </template>
                      </el-popover>
                    </el-form-item>

                    <!-- 确认只读团体名 -->
                    <el-form-item prop="readConfirmControl" :label="$t('SERVICE_READYONLY_NAME1')">
                      <el-input
                        v-model="editData.readConfirmControl"
                        v-addId.input="'snmpReadConfirm'"
                        v-clearable
                        clearable
                        type="password"
                        class="no-line"
                        autocomplete="new-password"
                        :disabled="editData.deleteReadChecked || disabledState"
                        :show-password="isConfigureUser"
                        @input="input('readConfirmControl', $event)"
                        @focus="focus('readConfirmControl')"
                        @blur="blur('readConfirmControl')"
                        @clear="clear('readConfirmControl')"
                      >
                        <template #suffix>
                          <ErrorIcon />
                          <ClearableIcon />
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </div>

              <!-- 删除读写团体名 -->
              <div class="tr read-tr">
                <span class="td">{{ $t('SERVICE_DELETE_READ_WRITE') }}</span>
                <span class="td">
                  <el-switch
                    id="deleteWrite"
                    v-model="editData.deleteWriteControl"
                    :disabled="disabledState"
                    @change="deleteCommunity(2)"
                  />
                </span>
              </div>

              <!-- 读写团体名/确认读写团体名 -->
              <div class="tr input-tr">
                <div class="td"></div>
                <div class="td">
                  <el-form
                    ref="readAndWriteFormRef"
                    :model="editData"
                    :rules="rules"
                    label-position="left"
                    label-width="auto"
                    :validate-on-rule-change="false"
                    @validate="validate"
                  >
                    <!-- 读写团体名 -->
                    <el-form-item prop="readWriteControl" :label="$t('SERVICE_READY_WRITE_NAME')">
                      <el-popover
                        v-model:visible="popoverVisible.readWriteControl"
                        popper-class="no-wrap-popover"
                        placement="right-start"
                        trigger="focus"
                        trigger-keys
                      >
                        <!-- 没有开启密码检查-popover内容 -->
                        <span v-if="!editData.SNMPv1v2.PasswordComplexityCheckEnabled">
                          {{ passwordTip }}
                        </span>
                        <!-- 开启密码检查-popover内容 -->
                        <ComplexPopoverContentOfList
                          v-if="editData.SNMPv1v2.PasswordComplexityCheckEnabled"
                          :data="rules.readWriteControl['verificationList']"
                        />

                        <template #reference>
                          <el-input
                            v-model="editData.readWriteControl"
                            v-addId.input="'snmpReadWrite'"
                            v-clearable
                            clearable
                            type="password"
                            class="no-line"
                            autocomplete="new-password"
                            :disabled="editData.deleteWriteControl || disabledState"
                            :show-password="isConfigureUser"
                            @focus="focus('readWriteControl')"
                            @blur="blur('readWriteControl')"
                            @input="input('readWriteControl', $event)"
                            @clear="clear('readWriteControl')"
                          >
                            <template #suffix>
                              <ErrorIcon />
                              <ClearableIcon />
                            </template>
                          </el-input>
                        </template>
                      </el-popover>
                    </el-form-item>

                    <!-- 确认读写团体名 -->
                    <el-form-item
                      prop="writeConfirmControl"
                      :label="$t('SERVICE_READY_WRITE_NAME1')"
                    >
                      <el-input
                        v-model="editData.writeConfirmControl"
                        v-addId.input="'snmpWriteConfirm'"
                        v-clearable
                        clearable
                        type="password"
                        class="no-line"
                        autocomplete="new-password"
                        :disabled="editData.deleteWriteControl || disabledState"
                        :show-password="isConfigureUser"
                        @input="input('writeConfirmControl', $event)"
                        @focus="focus('writeConfirmControl')"
                        @blur="blur('writeConfirmControl')"
                        @clear="clear('writeConfirmControl')"
                      >
                        <template #suffix>
                          <ErrorIcon />
                          <ClearableIcon />
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </div>

              <!--  登录规则 -->
              <div class="tr login-rule">
                <div class="td">{{ $t('SERVICE_VNC_LOGIN_RULE') }}</div>
                <div class="td">
                  <LoginRules
                    :check-list="editData.SNMPv1v2['LoginRule']"
                    :rule-data-list="editData.SNMPv1v2['LoginRuleInfo']"
                    @login-rule-change="loginRuleChange"
                  />
                </div>
              </div>
            </div>
          </el-form-item>

          <!--  SNMPv3 -->
          <el-form-item label="" class="snmp-3">
            <el-checkbox
              v-model="editData.SNMPv3['Enabled']"
              v-addId.checkbox="'snmpV3'"
              :disabled="disabledState"
              :label="$t('SERVICE_SNMP_V3')"
              size="large"
              @change="setSaveBtnState"
            ></el-checkbox>
          </el-form-item>
          <el-form-item label="" class="snmp-3-text">
            <span class="key">{{ $t('SERVICE_ENGINE') }}</span>
            <span id="snmpEngine">{{ editData.SNMPv3['EngineID'] }}</span>
          </el-form-item>

          <!-- 保存 -->
          <el-form-item v-if="isConfigureUser">
            <el-button id="snmpButton" :disabled="saveBtnState" type="primary" @click="submitForm">
              {{ $t('COMMON_SAVE') }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-title {
  padding: 16px 0;
  font-size: 18px;
  color: var(--o-text-color-primary);
  line-height: 24px;
  font-weight: bolder;
}

.snmp-box {
  padding-right: 24px;
  color: var(--o-text-color-secondary);
  position: relative;

  :deep(#lock) {
    margin-right: 0;
  }

  .snmp-content {
    padding: 24px;
    border-radius: 4px;
    background-color: var(--o-bg-color-base);

    .content-details {
      display: flex;
      flex-direction: column;

      .item {
        margin-bottom: 24px;

        .right-warn-tip {
          margin-left: 8px;
          color: var(--o-color-major);
        }

        .right-default-tip {
          margin-left: 8px;
          color: var(--o-color-primary);
          cursor: pointer;

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

        .el-input,
        .el-select {
          width: var(--el-select-and-input-width);
        }
      }

      :deep(.have-popper-item) {
        .el-form-item__content {
          display: inline-block;
          width: 320px;
          max-width: 320px;
        }
      }

      .have-warn-item {
        margin-bottom: 0px;
        display: flex;
        align-items: center;
        height: 16px;

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

        :deep(.el-form-item__content) {
          line-height: 16px;

          .el-checkbox {
            height: 16px;
          }
        }
      }

      .warn-text {
        margin-top: 4px;
        :deep(.el-form-item__content) {
          line-height: 16px;
          color: var(--o-color-major);
        }
      }

      .special-part {
        margin-top: 8px;
        margin-bottom: 0;

        > :deep(.el-form-item__content) {
          padding: 24px;
          border-radius: 4px;
          background-color: var(--o-bg-color-light);

          .table-box {
            display: table;

            .tr {
              display: table-row;

              .td {
                display: table-cell;
                padding-bottom: 24px;
                line-height: 1;

                .el-form-item:nth-child(1) {
                  margin-bottom: 16px;
                }
              }

              > .td:nth-child(1) {
                padding-right: 24px;
              }
            }

            .read-tr {
              .td {
                padding-bottom: 16px;
              }
            }

            .input-tr {
              .el-form {
                width: 600px;
                .el-form-item__content {
                  flex-direction: column;
                  align-items: start;

                  .el-form-item__error {
                    position: relative;
                    padding-bottom: 0;
                    top: 0;
                  }
                }
              }
            }

            .login-rule {
              .td {
                padding-bottom: 0;
              }
            }
          }

          .long-password {
            margin-bottom: 24px;

            .key-box {
              .key-help {
                display: flex;
                align-items: center;

                .key {
                  color: var(--o-text-color-secondary);
                  font-size: var(--o-form-label-font-size);
                  line-height: 16px;
                  pointer-events: none;
                  margin-right: 4px;
                }
              }
            }
          }
        }
      }

      :deep(.el-form-item__label) {
        white-space: nowrap;
      }

      .el-form-item:nth-last-child(1) {
        margin-bottom: 0;
      }

      :deep(.have-right-text-item) {
        .el-form-item__content {
          display: flex;
          align-items: center;
        }
      }

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

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

      :deep(.el-form-item__label::before) {
        display: none;
      }

      .rule-item {
        :deep(.el-form-item__label-wrap) {
          margin-right: 0 !important;
          display: flex;
          flex-direction: column;

          .el-form-item__label {
            padding-top: 0;
          }
        }
      }

      .snmp-3 {
        margin-top: 8px;
        margin-bottom: 0;
      }

      .snmp-3-text {
        margin-bottom: 24px;

        :deep(.el-form-item__content) {
          padding: 16px 24px;
          border-radius: 4px;
          background-color: var(--o-bg-color-light);
          .key {
            margin-right: 24px;
          }
        }
      }
    }

    :deep(.el-input__inner::-webkit-input-placeholder) {
      font-size: 12px !important;
    }

    .el-input {
      width: 320px;
    }
  }
}
.no-line {
  :deep(.el-input__password) {
    &::after{
      display: none;
    }
  }
  &:hover {
    :deep(.el-input__password) {
      &::after{
        display: block;
      }
    }
  }
  :deep(.el-input__wrapper.is-focus) {
    .el-input__password {
      &::after{
        display: block;
      }
    }
  }
}
#snmpReadConfirmBox,#snmpReadOnlyBox,#snmpReadWriteBox,#snmpWriteConfirmBox{
  :deep(.el-input__suffix-inner){
    margin-right: 32px;
  }
  :deep(.el-input__inner){
    padding-right: 40px !important;
  }
  :deep(.el-input__password) {
    right: -40px;
    &::after {
      content: '';
      position: absolute;
      right: 24px;
      width: 1px;
      height: 16px;
      background-color: #EBEFF6;
    }

  }
}
</style>
