<script lang="ts" setup>
import { traduction, getErrorTranslate } from '@/utils/language';
import { reactive, ref, computed, onMounted } from 'vue';
import useStore from '@/stores';
import { IPV4_IP, IP_REGEX_V4, IPV6, DOMAIN_NAME } from '@/utils/regular';
import CaCertificateService from '../../../../services/caCertificate.service';
import { UploadRawFile, UploadFile } from 'element-plus/es/components/upload/src/upload';
import { rangeVerification, strVerification } from '@/validators/validation-functions';
import { getStoreData, loading, showFailedMessage, showSuccessMessage } from '@/utils/composition';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { getMessageId, showElMessage, escapeHeader } from '@/utils/utils';
import { useRouter } from 'vue-router';
import CertificateRedirect from '@/pages/User/Certificate/CertificateRedirect.vue';
import Certificate from './components/ssl/Certificate.vue';

loading(false);
const store = useStore();
const dialogRef = ref();
const hadInit = ref(false);
// 测试按钮是否展示
const showTestBtn = ref(true);
// 保存按钮是否可以点击
const canSave = ref(false);
// 自动更新使能和证书更新按钮是否可用，CA服务器配置好了,且有安全配置权限，以及没有系统锁定
const caCanUpdate = ref(false);
const errorTips = ref('');

const cerUploadRef = ref();
const vaildResult = ref(true);
const loct = localStorage.getItem('loct');
// 客户端证书
const twoWayInfo = reactive([
  {
    id: 'serverSigner',
    label: traduction('SERVICE_WBS_CRE_SIGNER'),
    value: '',
  },
  {
    id: 'serverUser',
    label: traduction('SERVICE_WBS_CRE_USER'),
    value: '',
  },
  {
    id: 'serverDate',
    label: traduction('SERVICE_WBS_CRE_VALID_DATE'),
    value: '',
  },
  {
    id: 'serverSn',
    label: traduction('COMMON_SERIALNUMBER'),
    value: '',
  },
]);
const preData = reactive({
  AutoUpdateEnabled: false,
  CAServerAddr: '',
  CAServerPort: 0,
  CAServerCMPPath: '',
  SubjectInfo: {
    CommonName: '',
    Country: '',
    // 省份
    State: '',
    // 公司
    OrgName: '',
    // 部门
    OrgUnit: '',
    // 城市
    Location: '',
    InternalName: '',
    AlternativeNames: '',
    Email: '',
  },
});
let params: any = reactive({
  SubjectInfo: {},
});
const $router = useRouter();
const certUpdateData = ref();
// 获取locked锁定值
let isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});

const showCert = ref(false);
// 安全配置权限
const isOemSecurityMgmtUser = checkPrivil(UserPrivil.securityConfig);
// 用户配置权限
const hasUserConfig = checkPrivil(UserPrivil.userConfig);

let authorityData: any = null;
const dialogConfig = reactive({
  title: 'COMMON_CER_UPLOAD',
  content: '',
  id: 'uploadCert',
});

const popoverVisible = reactive({
  provinceControl: false,
  cityControl: false,
  companyControl: false,
  departmentControl: false,
});

// 自动更新使能
const autoUpdateEnable = reactive({
  show: false,
  label: traduction('IBMC_AUTOMATIC_ENABLE'),
  value: false,
  initValue: false,
  id: 'autoUpdateEnable',
  disabled: false,
  associated: false,
  valida: 'right',
});

// 证书更新
const autoUpdate = reactive({
  show: false,
  label: traduction('IBMC_CERTIFICATE_UPDATE'),
  value: false,
  initValue: false,
  id: 'autoUpdateEnable',
  disabled: getStoreData('loct', 'ur').indexOf('Administrator') < 0,
  associated: false,
  valida: 'right',
});

// 服务器地址
const ipPoliceControl = reactive({
  label: traduction('ALARM_REPORT_SERVICE_ADDR'),
  value: null as any,
  initValue: '',
  associated: false,
  id: 'ipPoliceControl',
  tip: isOemSecurityMgmtUser ? traduction('COMMON_IPV4_IPV6_DOMIN_CERT_UPDATE') : '',
  disabled: !hasUserConfig,
});

// 端口
const portControl = reactive({
  label: traduction('SERVICE_PORT'),
  value: null as any,
  initValue: '',
  id: 'portControl',
  associated: false,
  tip: isOemSecurityMgmtUser ? traduction('VALIDTOR_RANGE') : '',
  disabled: !isOemSecurityMgmtUser,
});

// 路径
const pathControl = reactive({
  label: traduction('IBMC_CA_SERVER_CMP_PATH'),
  value: null as any,
  initValue: '',
  id: 'pathControl',
  associated: false,
  tip: hasUserConfig ? traduction('IBMC_CA_SERVER_CMP_PATH_TIP') : '',
  disabled: !hasUserConfig,
});

// 证书主题
const dnsBinding = reactive({
  label: traduction('IBMC_CERTIFICATE_SUBJECT'),
  value: '',
  initValue: '',
  id: 'dnsBinding',
  associated: false,
  disabled: !isOemSecurityMgmtUser,
});

// 国家
const productLabel = getStoreData('loct', 'sn');
const countryControl = reactive({
  label: traduction('SERVICE_WBS_DLOG_COUNTRY'),
  id: 'countryControl',
  tip: isOemSecurityMgmtUser
    ? traduction('SERVICE_COUNTRY_FORMAT', { softwareName: productLabel })
    : '',
  value: null as any,
  initValue: '',
  associated: false,
  disabled: !isOemSecurityMgmtUser,
});

// 省份
const provinceControl = reactive({
  id: 'provinceControl',
  label: traduction('SERVICE_WBS_DLOG_PROVINCE'),
  value: null as any,
  tip: traduction('SERVICE_PROVINCE_FORMAT'),
  initValue: '',
  associated: false,
  disabled: !isOemSecurityMgmtUser,
});

// 城市
const cityControl = reactive({
  id: 'cityControl',
  label: traduction('SERVICE_WBS_DLOG_CITY'),
  tip: isOemSecurityMgmtUser ? traduction('SERVICE_CITY_FORMAT') : '',
  value: null as any,
  initValue: '',
  associated: false,
  disabled: !isOemSecurityMgmtUser,
});

// 公司
const companyControl = reactive({
  id: 'companyControl',
  label: traduction('SERVICE_WBS_DLOG_COMPONY'),
  value: null as any,
  tip: isOemSecurityMgmtUser ? traduction('SERVICE_COMPANY_FORMAT') : '',
  initValue: '',
  associated: false,
  disabled: !isOemSecurityMgmtUser,
});

// 部门
const departmentControl = reactive({
  id: 'departmentControl',
  label: traduction('SERVICE_WBS_DLOG_DEPARTMENT'),
  value: null as any,
  tip: isOemSecurityMgmtUser ? traduction('SERVICE_DEPARTMENT_FORMAT') : '',
  initValue: '',
  associated: false,
  disabled: !isOemSecurityMgmtUser,
});

// 常用名
const commonNameControl = reactive({
  label: traduction('SERVICE_WBS_DLOG_NAME'),
  id: 'commonNameControl',
  value: null as any,
  initValue: '',
  tip: isOemSecurityMgmtUser
    ? traduction('SERVICE_NAME_FORMAT', { softwareName: productLabel })
    : '',
  show: hasUserConfig,
  associated: false,
  change: () => {
    detectChange();
  },
  disabled: !isOemSecurityMgmtUser,
});

// 内部名
const internalNameControl = reactive({
  label: traduction('IBMC_INTERNAL_NAME'),
  id: 'internalNameControl',
  tip: isOemSecurityMgmtUser ? traduction('SERVICE_NAME_INNER') : '',
  value: null as any,
  initValue: '',
  associated: false,
  disabled: !isOemSecurityMgmtUser,
});

// 使用者可选名SAN
const alternativeNamesControl = reactive({
  label: traduction('IBMC_SUBJECT_ALTERNATIVE_NAME'),
  id: 'alternativeNamesControl',
  tip: isOemSecurityMgmtUser ? traduction('IBMC_SUBJECT_ALTERNATIVE_NAME_FORMAT') : '',
  value: null as any,
  initValue: '',
  associated: false,
  disabled: !isOemSecurityMgmtUser,
});

// 邮件地址
const emailAddressControl = reactive({
  label: traduction('IBMC_EMAIL'),
  id: 'emailAddressControl',
  value: null as any,
  initValue: '',
  associated: false,
  tip: isOemSecurityMgmtUser ? traduction('ALARM_REPORT_EMAIL_TIP') : '',
  disabled: !isOemSecurityMgmtUser,
  changeFn: () => {
    detectChange();
  },
});

const formComponents = [
  autoUpdateEnable,
  ipPoliceControl,
  portControl,
  pathControl,
  countryControl,
  cityControl,
  provinceControl,
  companyControl,
  departmentControl,
  commonNameControl,
  internalNameControl,
  alternativeNamesControl,
  emailAddressControl,
  dnsBinding,
];

const sslFormComponentsObj = reactive({
  autoUpdateEnable: autoUpdateEnable,
  autoUpdate: autoUpdate,
});
const formComponentsObj = reactive({
  ipPoliceControl: ipPoliceControl,
  portControl: portControl,
  pathControl: pathControl,
  countryControl: countryControl,
  cityControl: cityControl,
  provinceControl: provinceControl,
  companyControl: companyControl,
  departmentControl: departmentControl,
  commonNameControl: commonNameControl,
  internalNameControl: internalNameControl,
  alternativeNamesControl: alternativeNamesControl,
  emailAddressControl: emailAddressControl,
  dnsBinding: dnsBinding,
});
const subFormComponentsObj = reactive({
  countryControl: countryControl,
  cityControl: cityControl,
  provinceControl: provinceControl,
  companyControl: companyControl,
  departmentControl: departmentControl,
  commonNameControl: commonNameControl,
  internalNameControl: internalNameControl,
  alternativeNamesControl: alternativeNamesControl,
  emailAddressControl: emailAddressControl,
  dnsBinding: dnsBinding,
});

// 表单校验结果
let validateResult = reactive({});
const ruleFormRef = ref();
const ruleFormRefTemp = ref();

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`);
    ruleFormRefTemp.value.validateField(`${key}.value`);
  }
}

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

const detectChange = (data?: string): any => {
  if (!hadInit.value) {
    return;
  }
  if (isEmptyFn()) {
    vaildResult.value = false;
    return;
  }
  for (let key in validateResult) {
    // 任意一个校验失败
    if (!validateResult[key]) {
      vaildResult.value = false;
      return;
    }
  }
  vaildResult.value = true;
};

// 点击证书更新
function updateCertFromCA() {
  loading(true);
  CaCertificateService.updateCertFromCA()
    .then(() => {
      showElMessage('success', traduction('COMMON_SUCCESS'));
    })
    .catch((error: any) => {
      if (error) {
        const errorId = getMessageId(error.data);
        if (errorId instanceof Array && errorId.length > 0) {
          const errorMsg = getErrorTranslate(errorId[0].code as string);
          showElMessage('error', errorMsg);
          loading(false);
          return;
        }
      }
      showElMessage('error', traduction('COMMON_FAILED'));
      loading(false);
    })
    .finally(() => {
      loading(false);
    });
}
function protocolEnabledEN(key: string, value: any) {
  // 没有完成数据初始化前，不让触发对保存按钮的状态计算
  if (!hadInit.value) {
    return;
  }
  validate(
    key + '.value',
    formRules[key].validator(formRules[key], value, () => {}),
  );
  // 必填
  const ipPolice = ipPoliceControl.value;
  const port = portControl.value;
  const path = pathControl.value;
  const country = countryControl.value;
  const commonName = commonNameControl.value;
  // 非必填
  const province = provinceControl.value;
  const city = cityControl.value;
  const company = companyControl.value;
  const department = departmentControl.value;
  const alternativeNames = alternativeNamesControl.value;
  const internalName = internalNameControl.value;
  const emailAddress = emailAddressControl.value;

  params = {
    SubjectInfo: {},
  };
  // 服务器地址
  if (ipPolice !== preData['CAServerAddr']) {
    params['CAServerAddr'] = ipPolice;
  }

  // 端口
  let portNum: any = '';
  if (port || port === 0) {
    portNum = parseInt(port, 10);
  }
  if (portNum !== preData['CAServerPort']) {
    params['CAServerPort'] = portNum;
  }

  // 路径
  if (path !== preData['CAServerCMPPath']) {
    params['CAServerCMPPath'] = path;
  }

  // 标记证书主题是否发生修改
  let flag = false;

  // 国家(C)
  if (country !== preData.SubjectInfo.Country) {
    params.SubjectInfo['Country'] = country;
    flag = true;
  } else {
    params.SubjectInfo['Country'] = preData.SubjectInfo.Country;
  }

  // 省份(S)
  if (province !== preData.SubjectInfo.State) {
    params.SubjectInfo['State'] = province;
    flag = true;
  }

  // 	城市(L)
  if (city !== preData.SubjectInfo.Location) {
    params.SubjectInfo['Location'] = city;
    flag = true;
  }

  // 	公司(O)
  if (company !== preData.SubjectInfo.OrgName) {
    params.SubjectInfo['OrgName'] = company;
    flag = true;
  }

  // 部门(OU)
  if (department !== preData.SubjectInfo.OrgUnit) {
    params.SubjectInfo['OrgUnit'] = department;
    flag = true;
  }

  // 常用名(CN)
  if (commonName !== preData.SubjectInfo.CommonName) {
    params.SubjectInfo['CommonName'] = commonName;
    flag = true;
  } else {
    params.SubjectInfo['CommonName'] = preData.SubjectInfo.CommonName;
  }

  // 内部名(IN)
  if (internalName !== preData.SubjectInfo.InternalName) {
    params.SubjectInfo['InternalName'] = internalName;
    flag = true;
  }

  // 常用名(SAN)
  if (alternativeNames !== preData.SubjectInfo.AlternativeNames) {
    params.SubjectInfo['AlternativeNames'] = alternativeNames;
    flag = true;
  }

  // 邮件地址
  if (emailAddress !== preData.SubjectInfo.Email) {
    params.SubjectInfo['Email'] = emailAddress;
    flag = true;
  }
  // 证书主题没有发生修改则不传SubjectInfo对象
  if (!flag) {
    delete params.SubjectInfo;
  }
  setTimeout(() => {
    // 如果数据没有发生修改
    if (JSON.stringify(params) === '{}') {
      canSave.value = false;
      showTestBtn.value = true;
    } else if (!vaildResult.value) {
      // 如果数据发生修改且存在数据校验不通过的
      canSave.value = false;
      showTestBtn.value = false;
    } else {
      canSave.value = true;
      showTestBtn.value = false;
    }
  }, 0);
}

function save() {
  loading(true);
  if (params.SubjectInfo.AlternativeNames !== undefined) {
    if (params.SubjectInfo.AlternativeNames.length > 0) {
      let sanArr = params.SubjectInfo.AlternativeNames.split(',');
      params.SubjectInfo.AlternativeNames = sanArr;
    } else {
      params.SubjectInfo.AlternativeNames = [];
    }
  }
  CaCertificateService.certUpdateSaveData({ CMPConfig: params })
    .then((response: any) => {
      showElMessage('success', traduction('COMMON_SUCCESS'));
      certUpdateData.value = response['data'];
      initData(certUpdateData.value);
    })
    .catch((error: any) => {
      if (error) {
        const errorId = getMessageId(error.data);
        if (errorId instanceof Array && errorId.length > 0) {
          const errorMsg = getErrorTranslate(errorId[0].code as string);
          showElMessage('error', errorMsg);
          loading(false);
          return;
        }
      }
      showElMessage('error', traduction('COMMON_FAILED'));
      loading(false);
    })
    .finally(() => {
      loading(false);
    });
}

function dialogClose(reason: boolean) {
  dialogRef.value.hide();
  if (reason) {
    save();
  }
}
function validateIp46AndDomin(value: string, cbk: any) {
  if (value === '') {
    return false;
  }
  if (/^[0-9.]+$/.test(value)) {
    if (!IP_REGEX_V4.test(value)) {
      cbk(new Error(traduction('COMMON_FORMAT_ERROR')));
      return false;
    } else {
      cbk();
      return true;
    }
  } else if (value.indexOf(':') > -1) {
    if (!IPV6.test(value)) {
      cbk(new Error(traduction('COMMON_FORMAT_ERROR')));
      return false;
    } else {
      cbk();
      return true;
    }
  } else {
    if (!DOMAIN_NAME.test(value)) {
      cbk(new Error(traduction('COMMON_FORMAT_ERROR')));
      return false;
    } else {
      cbk();
      return true;
    }
  }
}
function validateIp4Exclude(value: string, list: string[], cbk: any) {
  if (value === '') {
    return false;
  }
  if (/^[0-9.]+$/.test(value)) {
    const result = list.includes(value);
    if (result) {
      cbk(new Error(traduction('COMMON_FORMAT_ERROR')));
      return false;
    } else {
      return true;
    }
  }
  return true;
}

function emailValidator(value: string, required: boolean) {
  if (!value && !required) {
    return true;
  }
  if (!value) {
    return false;
  }

  // 不能包含空格
  if (value.indexOf(' ') > -1) {
    return false;
  }

  let iAtPos = 0;
  let lastPos = 0;
  let iAtTimes = 0;
  let i = 0;
  for (const c of value) {
    if (c === '@') {
      iAtPos = i;
      iAtTimes++;
    } else if (c === '.') {
      lastPos = i;
    } else {
      
    }
    i++;
  }

  /**
   * 不能大于255个字符
   * '@'不能是第一个字符
   * '@'和最后一个'.'之间不能少于1个字符
   * 最后一个'.'之后必须还有至少2个字符
   * 最后一个'.'之后的字符个数不能大于63个
   * '@'只能有一个
   */
  if (
    i > 255 ||
    iAtPos < 1 ||
    lastPos - 2 < iAtPos ||
    i - lastPos < 3 ||
    i - lastPos > 64 ||
    iAtTimes !== 1
  ) {
    return false;
  }
  return true;
}

function sanValidator(key: string, value: string): boolean {
  let res = true;
  const URIReg = new RegExp('^(?<protocol>https?):\/\/(?<domain>[^\\s/$.?#].[^\\s]*)$');
  const EMAILReg = new RegExp('^[a-zA-Z0-9][a-zA-Z0-9_\\-.]{0,63}@[a-zA-Z0-9_\\-.]{1,254}\\.[a-zA-Z0-9]{2,64}$');
  switch(key) {
    case 'email':
      res = EMAILReg.test(value);
      break;
    case 'URI':
      res = URIReg.test(value);
      break;
    case 'IP':
      res = IPV6.test(value) || IPV4_IP.test(value);
      break;
    case 'DNS':
      res = DOMAIN_NAME.test(value);
      break;
    default: 
      res = false;
      break;
  };
  return res;
};

const formRules = reactive({
  ipPoliceControl: {
    id: 'ipPoliceControl',
    type: 'string',
    required: true,
    validator: (rule: any, value: string, cbk: any) => {
      return (
        validateIp46AndDomin(value, cbk) &&
        validateIp4Exclude(value, ['255.255.255.255'], cbk)
      );
    },
    containsEmptyString: true,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    trigger: 'blur',
  },
  portControl: {
    id: 'portControl',
    type: 'number',
    isInteger: true,
    required: true,
    min: 1,
    max: 65535,
    containsEmptyNumber: true,
    message: traduction('SERVICE_PORT_RANGES'),
    validator: rangeVerification,
    trigger: 'blur',
  },
  pathControl: {
    id: 'pathControl',
    type: 'string',
    required: true,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    matchRule: /^\/[A-Za-z0-9_\-\=\?\&/]{1,127}$/,
    validator: strVerification,
    containsEmptyString: true,
    trigger: 'blur',
  },
  countryControl: {
    id: 'countryControl',
    type: 'string',
    required: true,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    matchRule: /^[a-zA-Z]{2}$/,
    validator: strVerification,
    containsEmptyString: true,
    trigger: 'blur',
  },
  provinceControl: {
    id: 'provinceControl',
    type: 'string',
    required: false,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    matchRule: /^[a-zA-Z\d\-\.\_\s]{0,128}$/,
    validator: strVerification,
    containsEmptyString: true,
    trigger: 'blur',
  },
  cityControl: {
    id: 'cityControl',
    type: 'string',
    required: false,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    matchRule: /^[a-zA-Z\d\-\.\_\s]{0,128}$/,
    validator: strVerification,
    containsEmptyString: true,
    trigger: 'blur',
  },
  companyControl: {
    id: 'companyControl',
    type: 'string',
    required: false,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    matchRule: /^[a-zA-Z\d\-\.\_\s]{0,64}$/,
    validator: strVerification,
    containsEmptyString: true,
    trigger: 'blur',
  },
  departmentControl: {
    id: 'departmentControl',
    type: 'string',
    required: false,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    matchRule: /^[a-zA-Z\d\-\.\_\s]{0,64}$/,
    validator: strVerification,
    containsEmptyString: true,
    trigger: 'blur',
  },
  commonNameControl: {
    id: 'commonNameControl',
    type: 'string',
    required: true,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    matchRule: /^[ a-zA-Z\d\-\.\_\s]{1,64}$/,
    validator: strVerification,
    containsEmptyString: true,
    trigger: 'blur',
  },
  internalNameControl: {
    id: 'internalNameControl',
    type: 'string',
    required: false,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    matchRule: /^[ a-zA-Z\d\-\.\_\s]{0,64}$/,
    validator: strVerification,
    containsEmptyString: true,
    trigger: 'blur',
  },
  alternativeNamesControl: {
    id: 'alternativeNamesControl',
    type: 'string',
    required: false,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    validator: (rule: any, value: string) => {
      let res = true;
      if (value === '') {
        return res;
      }
      let sanArr = value.split(',');
      if (sanArr.length > 50) {
        return res = false;
      }
      sanArr.forEach((s) => {
        if (s.length > 255) {
          res = false;
        }
        let sArr = <any>[];
        let sliceIndex = s.indexOf(':');
        if (sliceIndex > 0 && sliceIndex < s.length - 1) {
          sArr = [s.slice(0, sliceIndex), s.slice(sliceIndex + 1, s.length)];
          let sKey = sArr[0];
          let sValue = sArr[1];
          if (sanValidator(sKey, sValue) === false) {
            res = false;
          }
        } else {
          res = false;
        }
      });
      return res;
    },
    containsEmptyString: true,
    trigger: 'change',
  },
  emailAddressControl: {
    id: 'emailAddressControl',
    type: 'email',
    required: false,
    message: traduction('IBMC_IPV6_ADDRES_ERROR_4'),
    matchRule: /^[a-zA-Z0-9~`!\?,.:;\-_'"\(\)\{\}\[\]\/<>@#\$%\^&\*\+\|\\=\s]{0,255}$/,
    validator: (rule: any, value: string) => {
      return emailValidator(value, false);
    },
    containsEmptyString: true,
    trigger: 'blur',
  },
});

function authorityAction() {
  // 具有安全配置权限可以设置自动更新使能、服务器地址、端口、证书主题
  if (isOemSecurityMgmtUser && !isSystemLock.value) {
    ipPoliceControl.disabled = false;
    portControl.disabled = false;
    pathControl.disabled = false;
    countryControl.disabled = false;
    provinceControl.disabled = false;
    cityControl.disabled = false;
    companyControl.disabled = false;
    departmentControl.disabled = false;
    commonNameControl.disabled = false;
    alternativeNamesControl.disabled = false;
    internalNameControl.disabled = false;
    emailAddressControl.disabled = false;
  } else {
    ipPoliceControl.disabled = true;
    portControl.disabled = true;
    pathControl.disabled = true;
    countryControl.disabled = true;
    provinceControl.disabled = true;
    cityControl.disabled = true;
    companyControl.disabled = true;
    departmentControl.disabled = true;
    commonNameControl.disabled = true;
    alternativeNamesControl.disabled = true;
    internalNameControl.disabled = true;
    emailAddressControl.disabled = true;
  }
}

onMounted(() => {
  authorityAction();
  getData();
});

const saveLog = () => {
  getData();
};

const getData = () => {
  loading(true);
  hadInit.value = false;
  CaCertificateService.getData()
    .then((response: any) => {
      certUpdateData.value = response['data'];
      initData(certUpdateData.value);
    })
    .catch((err: any) => {
      loading(false);
    })
    .finally(() => {
      loading(false);
    });
};

function setEmptyStr(obj: any) {
  if (typeof obj === 'object' && obj instanceof Object) {
    for (const key of Object.keys(obj)) {
      const value = obj[key];
      if (value === null) {
        obj[key] = '';
      }
    }
  }
}

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

function redirectSsl(): void {
  $router.push('/navigate/user/certificate/ssl-certificate');
}

function callback(): void {
  save();
  redirect();
}

function callbackToSsl(): void {
  save();
  redirectSsl();
}
function cancel() {
  getData();
}


const initData = (certData: any) => {
  const cmpConfig = certData?.CMPConfig;
  if (cmpConfig) {
    const subjectInfo = cmpConfig.SubjectInfo;
    setEmptyStr(subjectInfo);
    (autoUpdateEnable.value = cmpConfig.AutoUpdateEnabled),
    (ipPoliceControl.value = cmpConfig.CAServerAddr),
    (portControl.value = cmpConfig.CAServerPort),
    (pathControl.value = cmpConfig?.CAServerCMPPath),
    (countryControl.value = subjectInfo?.Country),
    (provinceControl.value = subjectInfo?.State),
    (cityControl.value = subjectInfo?.Location),
    (companyControl.value = subjectInfo?.OrgName),
    (departmentControl.value = subjectInfo?.OrgUnit),
    (commonNameControl.value = subjectInfo?.CommonName),
    (internalNameControl.value = subjectInfo?.InternalName),
    (alternativeNamesControl.value = subjectInfo?.AlternativeNames.join(',')),
    (emailAddressControl.value = subjectInfo?.Email);
    Object.assign(preData, cmpConfig);
  }
  let clientCertFlag = false;
  // 客户端证书 的 证书信息
  const clientCertChainInfo = certData?.ClientCertChainInfo;
  if (clientCertChainInfo) {
    const clientCert = clientCertChainInfo.ClientCert;
    const serialNumber = clientCert?.SerialNumber;
    if (serialNumber) {
      clientCertFlag = true;
      twoWayInfo[0].value = clientCert.IssueBy;
      twoWayInfo[1].value = clientCert.IssueTo;
      twoWayInfo[2].value = `${clientCert.ValidFrom} ${clientCert.ValidTo}`;
      twoWayInfo[3].value = serialNumber;
      showCert.value = true;
    }
  }
  ruleFormRef.value?.clearValidate();
  ruleFormRefTemp.value?.clearValidate();
  validateResult = [];
  canSave.value = false;
  vaildResult.value = true;
  showTestBtn.value = true;
  hadInit.value = true;
  let isEmpty = isEmptyFn();
  caCanUpdate.value = clientCertFlag && !isEmpty;
  if (isOemSecurityMgmtUser && !isSystemLock.value && caCanUpdate.value) {
    autoUpdateEnable.disabled = false;
  } else {
    autoUpdateEnable.disabled = true;
  }
  authorityAction();
};

function isEmptyFn(): boolean {
  if (
    commonNameControl.value === '' ||
    countryControl.value === '' ||
    pathControl.value === '' ||
    portControl.value === '' ||
    ipPoliceControl.value === ''
  ) {
    return true;
  }
  return false;
}

// 自动更新使能修改
function autoUpdateEnableChange() {
  // 没有初始化好不执行后续代码
  if (!hadInit.value) {
    return;
  }
  const state = autoUpdateEnable.value;

  if (preData.AutoUpdateEnabled === state) {
    return;
  }

  hadInit.value = false;
  loading(true);
  CaCertificateService.certUpdateSaveData({ CMPConfig: { AutoUpdateEnabled: state } })
    .then((response: any) => {
      showElMessage('success', traduction('COMMON_SUCCESS'));
      certUpdateData.value = response['data'];
      initData(certUpdateData.value);
      loading(false);
    })
    .catch((err: any) => {
      showElMessage('error', traduction('COMMON_FAILED'));
      loading(false);
      // 失败的时候取消开关的修改
      autoUpdateEnable.value = !state;
      hadInit.value = true;
    })
    .finally(() => {
      loading(false);
    });
}
</script>

<template>
  <div>
    <div id="ssl">
      <div class="ssl-title">{{ $t('IBMC_SSL_CERTIFICATE_UPDATE') }}</div>
      <el-form
        id="securityEnhanceForm"
        label-width="auto"
        label-position="left"
        :model="sslFormComponentsObj"
        :rules="formRules"
        :validate-on-rule-change="false"
      >
        <!-- 自动更新使能 -->
        <el-form-item :label="autoUpdateEnable.label" class="small-item">
          <el-switch
            :id="autoUpdateEnable.id"
            v-model="autoUpdateEnable.value"
            :disabled="autoUpdateEnable.disabled"
            class="switchLineHeight"
            @change="autoUpdateEnableChange()"
          ></el-switch>
          <div id="sslMsg">{{ $t('IBMC_AUTO_UPDATE_ENABLE_ICON_TIP') }}</div>
        </el-form-item>
        <!-- 证书更新 -->
        <el-form-item :label="autoUpdate.label">
          <el-button
            id="cerButton"
            :disabled="!isOemSecurityMgmtUser || isSystemLock || !caCanUpdate"
            plain
            @click="updateCertFromCA()"
          >
            {{ $t('IBMC_CERTIFICATE_UPDATE') }}
          </el-button>
          <div id="sslMsg">{{ $t('IBMC_UDATE_CERT_ICON_TIP') }}</div>
        </el-form-item>
      </el-form>
    </div>
    <div id="ca">
      <div class="ca-title">{{ $t('IBMC_CA_SERVER_CONFIGURATION') }}</div>
      <el-form
        id="securityEnhanceForm"
        ref="ruleFormRef"
        label-width="auto"
        label-position="left"
        :model="formComponentsObj"
        :rules="formRules"
        :validate-on-rule-change="true"
        @validate="validate"
      >
        <!-- 服务器地址 -->
        <el-form-item
          :label="ipPoliceControl.label"
          class="item red-star"
          :rules="formRules.ipPoliceControl"
          prop="ipPoliceControl.value"
        >
          <el-popover
            v-model:visible="popoverVisible[ipPoliceControl.id]"
            popper-class="no-wrap-popover"
            placement="right"
            :content="ipPoliceControl.tip"
            trigger="focus"
            trigger-keys
          >
            <template #reference>
              <el-input
                v-model="ipPoliceControl.value"
                v-addId.input="ipPoliceControl.id"
                v-clearable
                clearable
                type="text"
                maxlength="67"
                :disabled="ipPoliceControl.disabled || isSystemLock.value"
                @focus="focus(ipPoliceControl.id)"
                @blur="blur(ipPoliceControl.id)"
                @input="protocolEnabledEN(ipPoliceControl.id, ipPoliceControl.value)"
                @clear="clear(ipPoliceControl.id)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>
        <!-- 端口 -->
        <el-form-item
          :label="portControl.label"
          class="item red-star"
          :rules="formRules.portControl"
          prop="portControl.value"
        >
          <el-popover
            v-model:visible="popoverVisible[portControl.id]"
            popper-class="no-wrap-popover"
            placement="right"
            :content="portControl.tip"
            trigger="focus"
            trigger-keys
          >
            <template #reference>
              <el-input
                v-model="portControl.value"
                v-addId.input="portControl.id"
                v-clearable
                clearable
                type="text"
                :disabled="portControl.disabled || isSystemLock.value"
                @focus="focus(portControl.id)"
                @blur="blur(portControl.id)"
                @input="protocolEnabledEN(portControl.id, portControl.value)"
                @clear="clear(portControl.id)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>
        <!-- 路径 -->
        <el-form-item
          :label="pathControl.label"
          class="item red-star"
          :rules="formRules.pathControl"
          prop="pathControl.value"
        >
          <el-popover
            v-model:visible="popoverVisible[pathControl.id]"
            popper-class="no-wrap-popover"
            placement="right"
            :content="pathControl.tip"
            trigger="focus"
            trigger-keys
          >
            <template #reference>
              <el-input
                v-model="pathControl.value"
                v-addId.input="pathControl.id"
                v-clearable
                clearable
                type="text"
                :disabled="pathControl.disabled || isSystemLock.value"
                @focus="focus(pathControl.id)"
                @blur="blur(pathControl.id)"
                @input="protocolEnabledEN(pathControl.id, pathControl.value)"
                @clear="clear(pathControl.id)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>
        <!-- 证书主题 -->
        <el-form-item :label="dnsBinding.label">
          <div class="container">
            <el-form
              id="securityEnhanceForm"
              ref="ruleFormRefTemp"
              label-width="auto"
              label-position="left"
              :model="subFormComponentsObj"
              :rules="formRules"
              :validate-on-rule-change="false"
              @validate="validate"
            >
              <!-- 国家 -->
              <el-form-item
                :label="countryControl.label"
                class="item inner-red-star"
                :rules="formRules.countryControl"
                prop="countryControl.value"
              >
                <el-popover
                  v-model:visible="popoverVisible[countryControl.id]"
                  popper-class="no-wrap-popover"
                  placement="right"
                  :content="countryControl.tip"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="countryControl.value"
                      v-addId.input="countryControl.id"
                      v-clearable
                      clearable
                      type="text"
                      :disabled="countryControl.disabled || isSystemLock.value"
                      @focus="focus(countryControl.id)"
                      @blur="blur(countryControl.id)"
                      @input="protocolEnabledEN(countryControl.id, countryControl.value)"
                      @clear="clear(countryControl.id)"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>

              <!-- 省份-->
              <el-form-item
                :label="provinceControl.label"
                class="item"
                :rules="formRules.provinceControl"
                prop="provinceControl.value"
              >
                <el-popover
                  v-model:visible="popoverVisible[provinceControl.id]"
                  popper-class="no-wrap-popover"
                  placement="right"
                  :content="provinceControl.tip"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="provinceControl.value"
                      v-addId.input="provinceControl.id"
                      v-clearable
                      clearable
                      type="text"
                      :disabled="provinceControl.disabled || isSystemLock.value"
                      @focus="focus(provinceControl.id)"
                      @blur="blur(provinceControl.id)"
                      @input="protocolEnabledEN(provinceControl.id, provinceControl.value)"
                      @clear="clear(provinceControl.id)"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>
              <!-- 城市-->
              <el-form-item
                :label="cityControl.label"
                class="item"
                :rules="formRules.cityControl"
                prop="cityControl.value"
              >
                <el-popover
                  v-model:visible="popoverVisible[cityControl.id]"
                  popper-class="no-wrap-popover"
                  placement="right"
                  :content="cityControl.tip"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="cityControl.value"
                      v-addId.input="cityControl.id"
                      v-clearable
                      clearable
                      type="text"
                      :disabled="cityControl.disabled || isSystemLock.value"
                      @focus="focus(cityControl.id)"
                      @blur="blur(cityControl.id)"
                      @input="protocolEnabledEN(cityControl.id, cityControl.value)"
                      @clear="clear(cityControl.id)"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>
              <!-- 公司 -->
              <el-form-item
                :label="companyControl.label"
                class="item"
                :rules="formRules.companyControl"
                prop="companyControl.value"
              >
                <el-popover
                  v-model:visible="popoverVisible[companyControl.id]"
                  popper-class="no-wrap-popover"
                  placement="right"
                  :content="companyControl.tip"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="companyControl.value"
                      v-addId.input="companyControl.id"
                      v-clearable
                      clearable
                      type="text"
                      :disabled="companyControl.disabled || isSystemLock.value"
                      @focus="focus(companyControl.id)"
                      @blur="blur(companyControl.id)"
                      @input="protocolEnabledEN(companyControl.id, companyControl.value)"
                      @clear="clear(companyControl.id)"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>
              <!-- 部门 -->
              <el-form-item
                :label="departmentControl.label"
                class="item"
                :rules="formRules.departmentControl"
                prop="departmentControl.value"
              >
                <el-popover
                  v-model:visible="popoverVisible[departmentControl.id]"
                  popper-class="no-wrap-popover"
                  placement="right"
                  :content="departmentControl.tip"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="departmentControl.value"
                      v-addId.input="departmentControl.id"
                      v-clearable
                      clearable
                      type="text"
                      :disabled="departmentControl.disabled || isSystemLock.value"
                      @focus="focus(departmentControl.id)"
                      @blur="blur(departmentControl.id)"
                      @input="protocolEnabledEN(departmentControl.id, departmentControl.value)"
                      @clear="clear(departmentControl.id)"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>

              <!-- 常用名 -->
              <el-form-item
                :label="commonNameControl.label"
                class="item inner-red-star"
                :rules="formRules.commonNameControl"
                prop="commonNameControl.value"
              >
                <el-popover
                  v-model:visible="popoverVisible[commonNameControl.id]"
                  popper-class="no-wrap-popover"
                  placement="right"
                  :content="commonNameControl.tip"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="commonNameControl.value"
                      v-addId.input="commonNameControl.id"
                      v-clearable
                      clearable
                      type="text"
                      :disabled="commonNameControl.disabled || isSystemLock.value"
                      @focus="focus(commonNameControl.id)"
                      @blur="blur(commonNameControl.id)"
                      @input="protocolEnabledEN(commonNameControl.id, commonNameControl.value)"
                      @clear="clear(commonNameControl.id)"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>
              <!-- 内部名 -->
              <el-form-item
                :label="internalNameControl.label"
                class="item"
                :rules="formRules.internalNameControl"
                prop="internalNameControl.value"
              >
                <el-popover
                  v-model:visible="popoverVisible[internalNameControl.id]"
                  popper-class="no-wrap-popover"
                  placement="right"
                  :content="internalNameControl.tip"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="internalNameControl.value"
                      v-addId.input="internalNameControl.id"
                      v-clearable
                      clearable
                      type="text"
                      :disabled="internalNameControl.disabled || isSystemLock.value"
                      @focus="focus(internalNameControl.id)"
                      @blur="blur(internalNameControl.id)"
                      @input="protocolEnabledEN(internalNameControl.id, internalNameControl.value)"
                      @clear="clear(internalNameControl.id)"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>
              <!-- 邮件地址 -->
              <el-form-item
                :label="emailAddressControl.label"
                class="item"
                :rules="formRules.emailAddressControl"
                prop="emailAddressControl.value"
              >
                <el-popover
                  v-model:visible="popoverVisible[emailAddressControl.id]"
                  popper-class="no-wrap-popover"
                  placement="right"
                  :content="emailAddressControl.tip"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="emailAddressControl.value"
                      v-addId.input="emailAddressControl.id"
                      v-clearable
                      clearable
                      type="text"
                      :disabled="emailAddressControl.disabled || isSystemLock.value"
                      @focus="focus(emailAddressControl.id)"
                      @blur="blur(emailAddressControl.id)"
                      @input="protocolEnabledEN(emailAddressControl.id, emailAddressControl.value)"
                      @clear="clear(emailAddressControl.id)"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>
              <!-- SAN -->
              <el-form-item
                :label="alternativeNamesControl.label"
                class="item"
                :rules="formRules.alternativeNamesControl"
                prop="alternativeNamesControl.value"
              >
                <el-popover
                  v-model:visible="popoverVisible[alternativeNamesControl.id]"
                  popper-class="no-wrap-popover"
                  placement="right"
                  :content="alternativeNamesControl.tip"
                  trigger="focus"
                  trigger-keys
                >
                  <template #reference>
                    <el-input
                      v-model="alternativeNamesControl.value"
                      v-addId.input="alternativeNamesControl.id"
                      v-clearable
                      clearable
                      type="text"
                      :disabled="alternativeNamesControl.disabled || isSystemLock.value"
                      @focus="focus(alternativeNamesControl.id)"
                      @blur="blur(alternativeNamesControl.id)"
                      @input="protocolEnabledEN(alternativeNamesControl.id, alternativeNamesControl.value)"
                      @clear="clear(alternativeNamesControl.id)"
                    >
                      <template #suffix>
                        <ErrorIcon />
                        <ClearableIcon />
                      </template>
                    </el-input>
                  </template>
                </el-popover>
              </el-form-item>
            </el-form>
          </div>
        </el-form-item>
        <el-form-item id="cerRedirect" :label="$t('ALARM_REPORT_SYSLOG_SERVICE_ROOT_AUTH')">
          <CertificateRedirect
            ref="redirectComp"
            :need-save="!(isSystemLock || !canSave)"
            message="CERTIFICATE_TO_CA"
            @callback="callback()"
            @redirect="redirect()"
          />
        </el-form-item>
        <el-form-item id="clientCert" :label="$t('TWO_FACTORS_CLIENT_CERTIFICATE')">
          <CertificateRedirect
            ref="redirectSslComp"
            :need-save="!(isSystemLock || !canSave)"
            message="CERTIFICATE_TO_SSL"
            @callback="callbackToSsl()"
            @redirect="redirectSsl()"
          />
        </el-form-item>
        <el-form-item :label="$t(' ')">
          <!-- 保存按钮 -->
          <el-button
            v-if="isOemSecurityMgmtUser"
            id="authorityButton"
            type="primary"
            :disabled="isSystemLock || !canSave"
            @click="save()"
          >
            {{ $t('COMMON_SAVE') }}
          </el-button>
          <!-- 取消按钮 -->
          <el-button
            v-if="!showTestBtn && isOemSecurityMgmtUser"
            id="cancelButton"
            :disabled="isSystemLock"
            @click="cancel()"
          >
            {{ $t('COMMON_CANCEL') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ssl-title {
  display: block;
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 16px;
  color: #282b33;
  line-height: 16px;
}
.ca-title {
  display: block;
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 16px;
  color: #282b33;
  line-height: 16px;
}

#sslMsg {
  display: inline-block;
  color: #8d98aa;
  letter-spacing: 0;
  line-height: 16px;
  margin-left: 8px;
}

#ssl {
  background: var(--o-bg-color-base);
  border-radius: 4px;
  padding: 24px;

  .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;
  }
  .el-form-item {
    &:last-child {
      margin-bottom: 0px;
    }
  }
  #cerButton {
    padding: 7px 16px;
  }
  .el-button.is-disabled,
  .el-button.is-disabled:hover,
  .el-button.is-disabled:active,
  .el-button.is-disabled:focus {
    background-color: var(--o-bg-color-placeholder) !important;
    border-color: var(--o-color-placeholder);
  }
}
#cerRedirect {
  height: 16px;
  :deep(.el-form-item__label-wrap) {
    .el-form-item__label {
      padding-top: 0px;
    }
  }
}
#clientCert {
  height: 16px;
  :deep(.el-form-item__label-wrap) {
    .el-form-item__label {
      padding-top: 0px;
    }
  }
}
.uploadBtn {
  margin-top: 16px;
  #cerShowBox {
    :deep(td) {
      line-height: 16px !important;
    }
  }
}
.small-item {
  height: 16px;
  :deep(.el-form-item__label-wrap) {
    .el-form-item__label {
      padding-top: 0px;
    }
  }
  :deep(.el-form-item__content) {
    height: 16px;
  }
}
#ca {
  background: var(--o-bg-color-base);
  border-radius: 4px;
  margin-top: 16px;
  padding: 24px;

  .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;
  }
  .el-form-item {
    &:last-child {
      margin-bottom: 0px;
    }
  }
}
.container {
  width: 100%;
  padding: 24px;
  background: var(--o-bg-color-light);
}
</style>
<style lang="scss">
#ca {
  .small-item {
    height: 16px;
    .el-form-item__label {
      padding-top: 0;
      padding-bottom: 0;
    }

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

  .item {
    .el-input {
      width: 264px;
    }
    margin-bottom: var(--o-form-item-gap);
    &:last-child {
      margin-bottom: 0px;
    }
  }
}

#clientCert {
  .el-form-item__content {
    display: block;
  }
}

.cer-file-upload {
  .el-form-item__content {
    position: relative;
    #uploadx {
      position: absolute;
      right: 0 !important;
      top: 0 !important;
      width: 100%;
      .el-upload {
        width: 100%;
        justify-content: flex-end;
        text-align: end;
      }
      span {
        position: relative;
        top: -4px;
        right: 24px;
      }
    }
  }
}

.red-star {
  &:before {
    content: '*';
    position: absolute;
    font-size: 12px;
    margin-left: -6px;
    color: var(--o-color-danger);
    margin-right: 0px;
    margin-top: 8px;
  }
}
#uploadx {
}

.inner-red-star {
  &:before {
    content: '*';
    position: absolute;
    font-size: 12px;
    margin-left: -6px;
    color: var(--o-color-danger);
    margin-right: 0px;
  }
}
</style>
