<script setup lang="ts">
import { computed, nextTick, onUnmounted, PropType, reactive, ref, watch } from 'vue';
import { ILdap } from '@/model/Users/ldap-interface';
import { getErrorTranslate, traduction } from '@/utils/language';
import { UploadFile } from 'element-plus/es/components/upload/src/upload';
import { SecondAuthorityFail } from '../../models/model';
import { importLdapFile, saveLdap, uploadLdapFile } from '../services/ldap.service';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { DomainValidators } from '@/validators/domain-validators';
import { getStoreData, loading, showFailedMessage, showSuccessMessage } from '@/utils/composition';
import { BaseValidators } from '@/validators/base-validators';
import { DOMAIN_NAME } from '@/utils/regular';
import { getMessageId, escapeHeader } from '@/utils/utils';
import Schema from 'async-validator';
import FileUpload from '@/components/FileUpload/FileUpload.vue';
import CertList from './CertList.vue';
import ErrorIcon from '@/components/ErrorIcon/ErrorIcon.vue';
import ClearableIcon from '@/components/ClearableIcon/ClearableIcon.vue';
import { useRouter } from 'vue-router';
import CertificateRedirect from '@/pages/User/Certificate/CertificateRedirect.vue';

const redirectComp = ref();
const $router = useRouter();

const props = defineProps({
  activeName: {
    type: String,
    default: '',
  },
  locked: {
    type: Boolean,
    required: true,
    default: false,
  },
  data: {
    required: true,
    type: Object as PropType<ILdap>,
    default: () => {
      return {
        Controller: {},
        LdapGroup: [],
        Certificate: {},
        Url: {
          control: '',
          cert: '',
          crlCert: '',
        },
      };
    },
  },
});
const isNoPwd = getStoreData('loct', 'nopwd');
const pwdMaxLen = getStoreData('loct', 'pml');
const certListShow = computed(() => {
  const cert = props.data.Certificate;
  const isServerValid = cert.ServerCert && cert.ServerCert.Issuer !== undefined;
  const isRootValid = cert.RootCert && cert.RootCert.Issuer !== undefined;
  return isServerValid || isRootValid || cert?.IntermediateCert?.length > 0;
});

const emits = defineEmits(['reInit']);
const hasUserConfigPrivil = checkPrivil(UserPrivil.userConfig);
const isSystemLocked = computed(() => {
  return getStoreData('glob', 'systemLocked');
});

const changeData = {};
const disabled = ref(true);
const uploadRef = ref();
const ldapFormRef = ref();
const formState = ref(true);

let fileItem: any = null;
let fileObj: any = null;
let uploadUrl = '';
let baseLdapParams = {};

// LDAP绑定数据信息
const ldapParams = reactive({
  address: '',
  port: '',
  domain: '',
  bindId: '',
  bindPwd: '',
  userFolder: '',
  ldapCert: false,
  ldapLevel: '',
  password: '',
});
const secondFailedMsg = ref('');
const uploadFailedMsg = ref('');

const ldapPoperState = reactive({
  address: false,
  domain: false,
  bindId: false,
  bindPwd: false,
  userFolder: false,
});

const ldapTips = {
  address: traduction('COMMON_IPV4_IPV6_DOMIN'),
  domain: traduction('IBMC_DOMAIN_TIP', [255]),
  bindId: traduction('LDAP_BIND_FLAG_TIP'),
  bindPwd: traduction('LDAP_BIND_PASSWORD_TIP'),
  userFolder: traduction('LDAP_USERFOLDER_TIP'),
};

// 自定义输入框组件输入时，同时修改当前组件的绑定值
function resetControlValue(key: string, value: any) {
  formSchema.validate(ldapParams, (errors, fields) => {
    if (errors) {
      formState.value = false;
    } else {
      formState.value = true;
    }
  });
  // 记录变化的字段
  const baseValue = baseLdapParams[key];
  if (baseValue !== value) {
    changeData[key] = true;
  } else {
    delete changeData[key];
  }
  // 计算保存按钮的状态
  computeSaveState();
}

// 端口清空时，触发校验
function triggerValidator(filed: string) {
  ldapFormRef.value.validateField(filed);
}

// 表单校验规则
const rules: any = {
  address: [DomainValidators.ipv46AndDomin('blur', traduction('VALIDTOR_FORMAT_ERROR'))],
  port: [
    BaseValidators.Required({ message: traduction('VALIDTOR_RANGE') }),
    BaseValidators.Integer({ message: traduction('VALIDTOR_RANGE') }),
    BaseValidators.Range({
      message: traduction('VALID_RANGE_VALUE_ERR_MSG', [1, 65535]),
      range: [1, 65535],
    }),
  ],
  domain: [BaseValidators.Pattern({ pattern: DOMAIN_NAME })],
};
const formSchema = new Schema(rules);

// 激活或隐藏poper
function togglePopper(target: string, value: boolean) {
  ldapPoperState[target] = value;
}

// 清除输入框内容
function clearContent(target: string) {}

// LDAP证书上传
const updateData = reactive({
  width: 320,
  action: '',
  headers: {
    From: 'WebUI',
    'X-CSRF-Token': escapeHeader(getStoreData('loct', 'to')),
  },
  method: 'POST',
  name: 'Content',
  data: { Type: 'URI' } as any,
  isAutoUpload: false,
  accept: '.cer,.cert,.pem,.crt',
  disabled: !hasUserConfigPrivil || isSystemLocked.value,
  onAddItem: (file: UploadFile, list: UploadFile[], msg?: any, upload?: any): boolean => {
    const subfix = file.name.split('.').reverse()[0];
    const size = file.size as any;
    // 文件格式错误
    if (updateData.accept.indexOf(subfix) < 0) {
      uploadRef.value?.setError('');
      uploadFailedMsg.value = traduction('LDAP_FORMAT');
      return false;
    }
    // 文件大小超出限制
    if (1024 * 1024 < size) {
      uploadRef.value?.setError('');
      uploadFailedMsg.value = traduction('CONFIG_UPGRADE_FILESIZE_1M');
      return false;
    }

    fileItem = upload;
    fileObj = file;
    uploadRef.value?.clearError();
    uploadFailedMsg.value = '';
    // 只能在回调里面去修改URL地址，在其他方法里面修改不成功。
    uploadUrl = `/UI/Rest/AccessMgnt/LDAP/${props.activeName}/ImportLDAPCertificate`;
    computeSaveState();
    return true;
  },
});

// 重设控制器各个输入框的值
function resetValue(data: ILdap) {
  ldapFormRef.value.resetFields();
  uploadRef.value?.clearError();
  uploadRef.value?.clear();
  secondFailedMsg.value = '';
  uploadFailedMsg.value = '';
  fileItem = null;
  fileObj = null;

  ldapParams.address = data.Controller.IPAddress;
  ldapParams.port = String(data.Controller.Port);
  ldapParams.domain = data.Controller.Domain;
  ldapParams.bindId = data.Controller.BindDN;
  ldapParams.userFolder = data.Controller.Folder;
  ldapParams.ldapCert = data.Certificate.VerificationEnabled;
  ldapParams.ldapLevel = data.Certificate.VerificationLevel;
  ldapParams.password = '';
  ldapParams.bindPwd = '';

  // 清除变化记录对象
  Object.keys(changeData).forEach(key => {
    delete changeData[key];
  });

  // 记录baseParams数据
  const template = {};
  Object.keys(ldapParams).forEach(key => {
    const value = ldapParams[key];
    template[key] = value;
  });
  baseLdapParams = JSON.parse(JSON.stringify(template));

  // 保存按钮置灰
  disabled.value = true;
}

function passwordChagne(value: string) {
  secondFailedMsg.value = '';
  computeSaveState();
}

/**
 * 计算保存按钮的状态, 保存按钮状态与以下4个状态有关
 * 1. 数据是否变化
 * 2. 表单校验是否通过
 * 3. 是否有证书被选择
 * 4. 二次认证密码框是否有效（1. 长度>0, 2. 无二次认证错误）
 * 按钮启用的条件  密码有效 && (表单或文件选择任意一项有变化)
 */
async function computeSaveState() {
  const isChange = Object.keys(changeData).length > 0;
  const isFileSelected = fileItem !== null;
  const isPasswordValid = isNoPwd || ldapParams.password.length > 0;
  disabled.value = !(isPasswordValid && (isFileSelected || (isChange && formState.value)));
}

// 保存LDAP数据
async function saveLdapData(isRedirect: boolean) {
  // 防止用户手动去删除元素的disable属性，导致保存按钮可点击，导致能下发请求
  if (disabled.value) {
    return;
  }
  const param = createParam();
  // 保存数据顺序1. 先保存基础配置。2. 上传证书文件，若第一步失败，则不再进行第二步
  loading(true);
  disabled.value = true;

  if (Object.keys(changeData).length > 0) {
    saveLdapBaseConfig(param).then(
      () => {
        if (fileItem !== null) {
          uploadCertFile();
        } else {
          resolveSuccess();
          if (isRedirect) {
            redirectComp.value.hide();
            $router.push('/navigate/user/certificate/ca-certificate-list');
          }
        }
      },
      () => {
        if (isRedirect) {
          redirectComp.value.hide();
        }
      },
    );
  } else {
    uploadCertFile();
  }
}

// 保存LDAP基础配置
function saveLdapBaseConfig(param: any): Promise<any> {
  return new Promise((resolve, reject) => {
    // 若无基础参数变化，则直接Resolve
    saveLdap(props.data.Url?.control as string, param, ldapParams.password).then(
      () => {
        resolve(true);
      },
      error => {
        loading(false);
        const errorId = getMessageId(error.data)[0]?.code;
        resolveSecondAuthFailed(errorId);
        reject(new Error('false'));
      },
    );
  });
}

// 处理二次认证错误的数据重置操作
function resolveSecondAuthFailed(errorId: string | undefined) {
  if (
    errorId === SecondAuthorityFail.AUTHORIZATIONFAILED ||
    errorId === SecondAuthorityFail.REAUTHFAILED
  ) {
    ldapParams.password = '';
    disabled.value = true;
    nextTick(() => {
      secondFailedMsg.value = traduction('COMMON_SECONDPWD_ERROR');
    });
  }
}

// 处理操作成功后的数据重置流程
function resolveSuccess() {
  loading(false);
  showSuccessMessage();
  disabled.value = true;
  ldapParams.password = '';
  uploadRef.value?.clear();
  emits('reInit');
}

// 上传文件(文件上传分2步，1：上传文件至web目录，2：上传完成后，执行导入操作)
function uploadCertFile() {
  const formData = new FormData();
  formData.append('imgfile', fileObj.raw, fileObj.name);
  uploadLdapFile(formData).then(
    () => {
      importLdapFile(uploadUrl, fileObj.name, ldapParams.password).then(
        () => {
          resolveSuccess();
        },
        error => {
          uploadFailed();
          const errorCode = error?.data?.error[0].code;
          if (
            errorCode === SecondAuthorityFail.REAUTHFAILED ||
            errorCode === SecondAuthorityFail.AUTHORIZATIONFAILED
          ) {
            resolveSecondAuthFailed(errorCode);
          } else {
            // 文件上传失败报错
            showFailedMessage(traduction('SERVICE_WBS_IMPORT_FAILED'));
            uploadFailedMsg.value = getErrorTranslate(errorCode);
            uploadRef.value?.setError('');
          }
        },
      );
    },
    () => {
      uploadFailed();
    },
  );
}

function uploadFailed() {
  ldapParams.password = '';
  loading(false);
  uploadRef.value?.clear();
  uploadRef.value?.clearError();
}

// 封装LDAP基础配置参数
function createParam() {
  const result: { [key: string]: any } = {};
  const control: { [key: string]: any } = {};
  const cert: { [key: string]: any } = {};
  if (changeData['address']) {
    control.IPAddress = ldapParams.address;
  }
  if (changeData['port']) {
    control.Port = parseInt(ldapParams.port);
  }
  if (changeData['domain']) {
    control.Domain = ldapParams.domain;
  }
  if (changeData['bindId']) {
    control.BindDN = ldapParams.bindId;
  }
  if (changeData['bindPwd']) {
    control.BindPwd = ldapParams.bindPwd;
  }
  if (changeData['userFolder']) {
    control.Folder = ldapParams.userFolder;
  }
  if (changeData['ldapCert']) {
    cert.VerificationEnabled = ldapParams.ldapCert;
  }
  if (changeData['ldapLevel']) {
    cert.VerificationLevel = ldapParams.ldapLevel;
  }

  // 构造参数对象
  if (Object.keys(control).length > 0) {
    result.Controller = control;
  }
  if (Object.keys(cert).length > 0) {
    result.Certificate = cert;
  }
  return result;
}

const unWatchProps = watch(
  props,
  newVal => {
    const data = newVal.data;
    resetValue(data);
  },
  { deep: true },
);

const unWatchLocked = watch(isSystemLocked, newValue => {
  updateData.disabled = newValue;
});

function redirect(): void {
  $router.push('/navigate/user/certificate/ca-certificate-list');
}

function callback(): void {
  saveLdapData(true);
}

onUnmounted(() => {
  unWatchLocked();
  unWatchProps();
});
</script>

<template>
  <div class="root-container">
    <div class="right-container ldap-container">
      <el-form
        ref="ldapFormRef"
        :model="ldapParams"
        :rules="rules"
        :validate-on-rule-change="false"
        label-position="left"
        label-width="auto"
      >
        <!-- 基本属性 -->
        <el-form-item class="title" :label="$t('COMMON_BASE_ATTR')"></el-form-item>

        <!-- LDAP服务器地址 -->
        <el-form-item :label="$t('LDAP_SERVER_ADDR')" prop="address">
          <el-popover
            :content="ldapTips.address"
            :visible="ldapPoperState.address"
            :teleported="false"
            popper-class="ldap-popover"
            placement="right"
            trigger="focus"
            trigger-keys
          >
            <template #reference>
              <el-input
                id="ldapServer"
                v-model="ldapParams.address"
                v-clearable
                clearable
                type="text"
                :disabled="props.locked || !hasUserConfigPrivil"
                @input="resetControlValue('address', $event)"
                @clear="clearContent('address')"
                @focus="togglePopper('address', true)"
                @blur="togglePopper('address', false)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>

        <!-- LDAPS端口 -->
        <el-form-item :label="$t('LDAP_PORT')" prop="port">
          <el-input
            id="ldapPort"
            v-model="ldapParams.port"
            v-clearable
            type="text"
            clearable
            :maxlength="5"
            :disabled="props.locked || !hasUserConfigPrivil"
            @input="resetControlValue('port', $event)"
            @clear="triggerValidator('port')"
          >
            <template #suffix>
              <ErrorIcon />
              <ClearableIcon />
            </template>
          </el-input>
        </el-form-item>

        <!-- 域名 -->
        <el-form-item :label="$t('COMMON_DOMAIN')" prop="domain">
          <el-popover
            :visible="ldapPoperState.domain"
            :teleported="false"
            popper-class="ldap-popover"
            placement="right-start"
            trigger="focus"
            trigger-keys
          >
            <div class="popper-content">
              <div class="item">{{ $t('IBMC_DOMAIN_TIP1') }}</div>
              <div class="item">{{ $t('IBMC_DOMAIN_TIP2', [255]) }}</div>
              <div class="item">{{ $t('IBMC_DOMAIN_TIP3') }}</div>
              <div class="item">{{ $t('IBMC_DOMAIN_TIP4') }}</div>
              <div class="item">{{ $t('IBMC_DOMAIN_TIP5') }}</div>
            </div>
            <template #reference>
              <el-input
                id="ldapDomain"
                v-model="ldapParams.domain"
                v-clearable
                clearable
                type="text"
                :maxlength="255"
                :disabled="props.locked || !hasUserConfigPrivil"
                @input="resetControlValue('domain', $event)"
                @clear="clearContent('domain')"
                @focus="togglePopper('domain', true)"
                @blur="togglePopper('domain', false)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>

        <!-- 绑定标识名 -->
        <el-form-item :label="$t('COMMON_BIND_ID')">
          <el-popover
            :content="ldapTips.bindId"
            :visible="ldapPoperState.bindId"
            :teleported="false"
            popper-class="ldap-popover"
            placement="right"
            trigger="focus"
            trigger-keys
          >
            <template #reference>
              <el-input
                id="ldapBindName"
                v-model="ldapParams.bindId"
                v-clearable
                clearable
                type="text"
                :disabled="props.locked || !hasUserConfigPrivil"
                @input="resetControlValue('bindId', $event)"
                @clear="clearContent('bindId')"
                @focus="togglePopper('bindId', true)"
                @blur="togglePopper('bindId', false)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>

        <!-- 绑定密码 -->
        <el-form-item :label="$t('COMMON_BIND_PWD')">
          <el-popover
            :content="ldapTips.bindPwd"
            :visible="ldapPoperState.bindPwd"
            :teleported="false"
            popper-class="ldap-popover"
            placement="right"
            trigger="focus"
            trigger-keys
          >
            <template #reference>
              <el-input
                id="ldapBindPassword"
                v-model="ldapParams.bindPwd"
                v-clearable
                clearable
                type="password"
                autocomplete="new-password"
                :maxlength="20"
                :disabled="props.locked || !hasUserConfigPrivil"
                @input="resetControlValue('bindPwd', $event)"
                @clear="clearContent('bindPwd')"
                @focus="togglePopper('bindPwd', true)"
                @blur="togglePopper('bindPwd', false)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>

        <!-- 用户应用文件夹 -->
        <el-form-item :label="$t('LDAP_GROUP_FOLDER')">
          <el-popover
            :content="ldapTips.userFolder"
            :visible="ldapPoperState.userFolder"
            :teleported="false"
            popper-class="ldap-popover"
            placement="right"
            trigger="focus"
            trigger-keys
          >
            <template #reference>
              <el-input
                id="ldapUserFolder"
                v-model="ldapParams.userFolder"
                v-clearable
                clearable
                type="text"
                :disabled="props.locked || !hasUserConfigPrivil"
                @input="resetControlValue('userFolder', $event)"
                @clear="clearContent('userFolder')"
                @focus="togglePopper('userFolder', true)"
                @blur="togglePopper('userFolder', false)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>

        <!-- 证书验证 -->
        <el-form-item class="title" :label="$t('LDAP_CERT_VERIFY')"></el-form-item>

        <!-- LDAP证书验证使能 -->
        <el-form-item :label="$t('LDAP_CERT_VERIFY_ENABLE')" class="special-el-form-item">
          <el-switch
            :id="'ldapSwitch'"
            v-model="ldapParams.ldapCert"
            :disabled="props.locked || !hasUserConfigPrivil"
            @change="resetControlValue('ldapCert', ldapParams.ldapCert)"
          ></el-switch>
        </el-form-item>

        <!-- 证书校验级别 -->
        <el-form-item :label="$t('LDAP_CERT_VERIFY_LEVEL')" class="special-el-form-item">
          <el-radio-group
            v-model="ldapParams.ldapLevel"
            :disabled="props.locked || !hasUserConfigPrivil"
            @change="resetControlValue('ldapLevel', ldapParams.ldapLevel)"
          >
            <el-radio v-addId.radio="'certLevelDemand'" label="Demand"></el-radio>
            <el-radio v-addId.radio="'certLevelAllow'" label="Allow"></el-radio>
          </el-radio-group>
          <span v-if="ldapParams.ldapLevel === 'Allow'" class="level-warning">
            {{ $t('LDAP_LEVEL_TIP') }}
          </span>
        </el-form-item>

        <!-- 证书校验级别 -->
        <el-form-item :label="$t('LDAP_CERT_UPLOAD')" class="ldap-cert-container">
          <CertificateRedirect
            ref="redirectComp"
            :need-save="!disabled && !props.locked"
            message="CERTIFICATE_TO_CA"
            @callback="callback()"
            @redirect="redirect()"
          />
        </el-form-item>

        <!-- LDAP证书 -->
        <el-form-item
          v-if="false"
          :label="$t('LDAP_CERT_UPLOAD')"
          class="ldap-cert-container"
          :class="{ valid: certListShow }"
          :error="uploadFailedMsg"
        >
          <FileUpload ref="uploadRef" :data="updateData" />
          <span class="file-support">{{ $t('LDAP_FORMAT') }}</span>
        </el-form-item>

        <!-- 证书列表 -->
        <el-form-item
          v-if="false && certListShow"
          :label="' '"
          :class="{ 'file-error': uploadFailedMsg !== '' }"
          class="ldap-certs-box"
        >
          <div class="ldap-certs">
            <CertList
              :server-cert="data.Certificate.ServerCert"
              :middle-cert="data.Certificate.IntermediateCert"
              :root-cert="data.Certificate.RootCert"
              :crl-state="data.Certificate.CrlVerification"
              :action="data.Url?.crlCert"
              @re-init="emits('reInit')"
            />
          </div>
        </el-form-item>

        <!-- 登录密码 -->
        <el-form-item v-if="!isNoPwd" prop="password" :error="secondFailedMsg">
          <template #label>
            <span class="login-pwd">{{ $t('COMMON_LOGIN_PASSWORD') }}</span>
          </template>
          <el-input
            id="ldapSecondPassword"
            v-model="ldapParams.password"
            v-clearable
            clearable
            type="password"
            autocomplete="new-password"
            :maxlength="pwdMaxLen"
            :placeholder="$t('COMMON_PASSWORD_PLACEHOLDER')"
            :disabled="props.locked || !hasUserConfigPrivil"
            @input="passwordChagne"
          >
            <template #suffix>
              <ErrorIcon />
              <ClearableIcon />
            </template>
          </el-input>
        </el-form-item>

        <!-- 保存 -->
        <el-form-item v-privil.userConfig :label="' '" class="save-btn">
          <el-button
            :id="'saveLdap'"
            type="primary"
            :disabled="disabled || props.locked"
            @click="saveLdapData(false)"
          >
            {{ $t('COMMON_SAVE') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.right-container {
  border-radius: 0 4px 4px 4px;
}
.ldap-container {
  padding-top: 16px;
}
.level-warning {
  margin-left: 8px;
  color: var(--o-color-major);
  vertical-align: middle;
  line-height: 16px;
}
.ldap-certs-box {
  margin-bottom: 16px !important;
  &.file-error {
    margin-top: 24px;
  }
}
.ldap-certs {
  width: 100%;
}
.file-support {
  position: absolute;
  margin-left: 12px;
  color: var(--o-text-color-tertiary);
}
.login-pwd::before {
  content: '*';
  position: absolute;
  font-size: 12px;
  margin-left: -6px;
  color: var(--o-form-require-color);
  margin-right: 0;
}
:deep(.el-input) {
  width: 320px;
}

:deep(.el-select) {
    width: 320px;
}

:deep(.el-radio-group) {
  vertical-align: middle;
}
:deep(.el-form-item.title) {
  margin-bottom: 16px !important;
  height: 24px;
  .el-form-item__label {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--o-text-color-primary);
    line-height: 24px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
:deep(.el-form-item.is-required) {
  .el-form-item__label::before {
    position: absolute;
    font-size: 16px;
    margin-left: -10px;
    margin-top: 2px;
  }
}
:deep(.ldap-cert-container) {
  &.valid {
    margin-bottom: 16px !important;
  }
  height: 16px;
  .el-form-item__label-wrap {
    .el-form-item__label {
      padding-top: 0px;
    }
  }
  .el-form-item__content {
    position: relative;
    display: block;
  }
}

:deep(.el-form) {
  .el-form-item {
    margin-bottom: 24px;

    .el-form-item__label {
      padding-right: 24px;
      font-size: 12px;
    }
  }

  .save-btn {
    margin-bottom: 0;
  }

  .special-el-form-item {
    height: 16px;
    .el-form-item__label {
      padding-top: 0;
      padding-bottom: 0;
    }

    .el-form-item__content {
      .el-radio {
        height: auto;
      }
    }
  }
}
</style>

<style>
.wid-320 {
  min-width: 270px !important;
  max-width: 270px !important;
}
.ldap-popover.el-popover {
  width: auto !important;
  max-width: 382px !important;
}
</style>
