<template>
  <div id="certificate">
    <div id="certificateCart">
      <h3 id="cerTitle">{{ $t('SERVICE_WBS_SERVER_CRE_INFO') }}</h3>
      <el-form id="cerContent" label-width="auto" label-position="left">
        <el-form-item :label="$t('ALARM_REPORT_SYSLOG_ISSUED')">
          <span>{{ props.info.issuer }}</span>
        </el-form-item>
        <el-form-item :label="$t('ALARM_REPORT_SYSLOG_USER')">
          <span>{{ props.info.subject }}</span>
        </el-form-item>
        <el-form-item :label="$t('ALARM_REPORT_SYSLOG_EFFECTIVE')">
          <span
            v-if="type === 'client'"
          >{{ props.info.validNotBefore }} {{ props.info.validNotAfter }}</span>
          <span
            v-if="type === 'root'"
          >{{ props.info.validNotBefore }} - {{ props.info.validNotAfter }}</span>
        </el-form-item>
        <el-form-item :label="$t('COMMON_SERIALNUMBER')">
          <span>{{ props.info.serialNumber }}</span>
        </el-form-item>
        <el-form-item
          v-if="type === 'root'"
          class="revoking-upload"
          :label="$t('ALARM_REPORT_SYSLOG_REVOKING_LIST')"
        >
          <div class="certificateInline">
            <span v-if="props.info.crlState">{{ $t('COMMON_CONFIGURED') }}</span>
            <span v-if="!props.info.crlState">{{ $t('ALARM_REPORT_SYSLOG_HAS_NOT_SET') }}</span>
          </div>
          <div v-if="!props.isSystemLock && props.hasPermission" class="certificateInline">
            <el-upload
              id="uploadx"
              class="upload-root-cer"
              :headers="cerInvalid.headers"
              :name="cerInvalid.alias"
              :action="cerInvalid.url"
              :accept="cerInvalid.accept"
              :auto-upload="cerInvalid.autoUpload"
              :show-file-list="false"
              :before-upload="cerInvalid.beforeUpload"
              :on-success="cerInvalid.successItems"
              :on-error="cerInvalid.errorItems"
            >
              <span class="upload-text hover-color">{{ $t('COMMON_UPLOAD') }}</span>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item v-if="props.info.crlState" :label="$t('ALARM_REPORT_SYSLOG_REVOKING_DATE')">
          <span>{{ props.info.listTime }}</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { showFailedMessage } from '@/utils/composition';
import { getErrorTranslate } from '@/utils/language';
import { UploadRawFile } from 'element-plus/es/components/upload/src/upload';
import { PropType, reactive } from 'vue';
import { alertMessage } from '../report.service';
import { escapeHeader } from '@/utils/utils';

interface infoType {
  issuer: string;
  subject: string;
  validNotBefore: string;
  validNotAfter: string;
  serialNumber: string;
  crlState?: boolean;
  listTime?: string;
  crlURL?: string;
}
const props = defineProps({
  info: {
    required: true,
    type: Object as PropType<infoType>,
  },
  type: {
    required: true,
    type: String,
  },
  isSystemLock: {
    required: true,
    type: Boolean,
  },
  hasPermission: {
    required: true,
    type: Boolean,
  },
});
const emit = defineEmits(['update']);
const loct = localStorage.getItem('loct');
const cerInvalid = reactive({
  url: '/UI/Rest/Maintenance/SyslogNotification/ImportCrl',
  alias: 'Content',
  headers: {
    From: 'WebUI',
    'X-CSRF-Token': escapeHeader(loct ? JSON.parse(loct).to : ''),
  },
  autoUpload: true,
  accept: '.crl',
  beforeUpload: (rawFile: UploadRawFile): any => {
    const type = rawFile.name.substring(rawFile.name.lastIndexOf('.'));
    if (!['.crl'].includes(type)) {
      alertMessage({ type: 'error', label: 'COMMON_FILE_SUFFIX_CRL' });
      return false;
    } else if ((rawFile.size as any) > 100 * 1024) {
      alertMessage({ type: 'error', label: 'IBMC_UPLOAD_FILE_1M_ERROR3' });
      return false;
    }
    return true;
  },
  successItems: () => {
    alertMessage({ type: 'success', label: 'COMMON_SUCCESS' });
    emit('update');
  },
  errorItems: (error: any) => {
    const errorCode = JSON.parse(error.message).error[0]?.code;
    if (errorCode) {
      const errorMsg = getErrorTranslate(errorCode);
      showFailedMessage(errorMsg);
    } else {
      showFailedMessage();
    }
  },
});
</script>

<style lang="scss" scoped>
#certificate {
  flex: 1;
  height: 100%;
  margin-top: 16px;
  background-color: var(--o-bg-color-light);
  border-radius: var(--o-border-radius);
  border-top-left-radius: var(--o-border-radius);
  border-top-right-radius: var(--o-border-radius);
  border-bottom-right-radius: var(--o-border-radius);
  border-bottom-left-radius: var(--o-border-radius);
}
#certificateCart {
  height: 100%;
  padding: 14px 25px;
  background-color: var(--o-bg-color-light);
  border-radius: var(--o-border-radius);
  border-top-left-radius: var(--o-border-radius);
  border-top-right-radius: var(--o-border-radius);
  border-bottom-right-radius: var(--o-border-radius);
  border-bottom-left-radius: var(--o-border-radius);
}
.revoking-upload {
  .certificateInline {
    margin-right: 8px;
  }
  .upload-text {
    color: var(--o-color-primary) !important;
    font-size: var(--o-form-label-font-size);
    &:hover {
      color: var(--o-color-primary-secondary) !important;
    }
  }
  :deep(.el-form-item__content) {
    justify-content: flex-start !important;
  }
}
#cerTitle {
  color: var(--o-text-color-primary);
  font-size: 14px;
}
#cerContent span {
  font-size: var(--o-form-label-font-size);
  color: var(--o-text-color-primary);
}
.hover-color:hover {
  color: var(--o-color-primary-secondary);
}
</style>