<script setup lang="ts">
import { PropType, computed } from 'vue';
import { IconDelete } from '@computing/opendesign-icons';
import { getStoreData } from '@/utils/composition';

interface ICrlConfig {
  headers: object;
  alias: string;
  url: string;
  data: any;
  accept: string;
  autoUpload: boolean;
  beforeUpload: object;
  successItems: object;
  errorItems: object;
}

interface IshowData {
  id?: string;
  crlValidFrom?: string;
  crlValidTo?: string;
  crlTimeRange?: string;
  isImportCrl?: boolean;
  subject: string;
  issuer: string;
  serialNumber: string;
  time: string;
  validFrom: string;
  validTo: string;
  crlConfig: ICrlConfig;
}

const propsData = defineProps({
  showData: {
    type: Object as PropType<IshowData>,
    required: true,
    default: () => {
      return {
        crlValidFrom: '',
        crlValidTo: '',
        crlTimeRange: '',
        isImportCrl: false,
        subject: '',
        issuer: '',
        serialNumber: '',
        time: '',
        validFrom: '',
        validTo: '',
        crlConfig: {
          headers: {},
          alias: '',
          url: '',
          data: {},
          accept: '',
          autoUpload: false,
          beforeUpload: () => {},
          successItems: () => {},
          errorItems: () => {},
        },
      };
    },
  },
  // 系统锁定
  isSystemLock: {
    type: Boolean,
    required: true,
    default: true,
  },
  // 是否有安全配置权限
  securityConfig: {
    type: Boolean,
    required: true,
    default: false,
  },
});

const emits = defineEmits(['delCert', 'delCrlCertify']);
const interChassisEnabled = computed(() => getStoreData('glob', 'interChassisEnabled'));

function delCert() {
  emits('delCert');
}

function delCrlCertify() {
  emits('delCrlCertify');
}
</script>

<template>
  <div class="card-item-box">
    <div class="top">
      <div class="img">
        <img src="@/assets/common/image/certificate.svg" />
      </div>
      <div class="top-content">
        <div class="row">
          <div id="issuer" v-addTooltip.div="540" class="left">{{ showData.subject }}</div>
          <div id="del" class="right">
            <el-tooltip
              :content="$t('COMMON_DELETE')"
              :append-to-body="true"
              placement="top"
              trigger-keys
            >
              <span
                :id="`delCrl${showData.id}`"
                :class="['btn', isSystemLock || !securityConfig ? 'disabled-btn' : '']"
                @click="delCert"
              >
                <el-icon>
                  <IconDelete />
                </el-icon>
                <span class="del-text">{{ $t('COMMON_DELETE') }}</span>
              </span>
            </el-tooltip>
          </div>
        </div>
        <div class="user-box">
          <span>{{ $t('ALARM_REPORT_SYSLOG_USER') }}</span>
          <el-tag v-if="(showData.id === '31' || showData.id === '32') && interChassisEnabled" :id="`manageCer${showData.id}`" class="cer-tag" type="primary">{{ $t('CERT_MANAGE_CA') }}</el-tag>
        </div>
      </div>
    </div>
    <div class="content">
      <div id="subject" class="tr">
        <div class="td">{{ $t('ALARM_REPORT_SYSLOG_ISSUED') }}</div>
        <div class="td">{{ showData.issuer }}</div>
      </div>
      <div id="time" class="tr">
        <div class="td">{{ $t('ALARM_REPORT_SYSLOG_EFFECTIVE') }}</div>
        <div class="td">{{ showData.time }}</div>
      </div>
      <div id="serialNumber" class="tr">
        <div class="td">{{ $t('COMMON_SERIALNUMBER') }}</div>
        <div class="td">{{ showData.serialNumber }}</div>
      </div>
      <div id="isImportCrl" class="tr">
        <div class="td">{{ $t('ALARM_REPORT_SYSLOG_REVOKING_LIST') }}</div>
        <div class="td">
          <div class="tag-btn">
            <!-- 已配置 -->
            <el-tag
              v-if="showData.isImportCrl"
              id="hadImportCrl"
              size="small"
              type="success"
              class="tag-item"
            >
              {{ $t('COMMON_CONFIGURED') }}
            </el-tag>
            <!-- 未配置 -->
            <el-tag
              v-if="!showData.isImportCrl"
              id="notImportCrl"
              size="small"
              type="info"
              class="tag-item"
            >
              {{ $t('ALARM_REPORT_SYSLOG_HAS_NOT_SET') }}
            </el-tag>
            <!-- 上传 -->
            <span v-if="isSystemLock || !securityConfig" :id="`importCrl${showData.id}`" class="btn disabled-btn">
              {{ $t('COMMON_UPLOAD') }}
            </span>
            <el-upload
              v-else
              id="uploadx"
              :headers="showData.crlConfig.headers"
              :name="showData.crlConfig.alias"
              :action="showData.crlConfig.url"
              :data="showData.crlConfig.data"
              :accept="showData.crlConfig.accept"
              :auto-upload="showData.crlConfig.autoUpload"
              :show-file-list="false"
              :before-upload="showData.crlConfig.beforeUpload"
              :on-success="showData.crlConfig.successItems"
              :on-error="showData.crlConfig.errorItems"
            >
              <span :id="`importCrl${showData.id}`" class="btn">
                {{ $t('COMMON_UPLOAD') }}
              </span>
            </el-upload>
            <span
              v-if="showData.isImportCrl && !(isSystemLock || !securityConfig)"
              :id="`crlDeleted${showData.id}`"
              class="crlDeleted btn"
              @click="delCrlCertify"
            >
              {{ $t('LICENSE_DELETE') }}
            </span>
            <span
              v-if="showData.isImportCrl && (isSystemLock || !securityConfig)"
              :id="`crlDeleted${showData.id}`"
              class="crlDeleted btn disabled-btn"
            >
              {{ $t('LICENSE_DELETE') }}
            </span>
          </div>
        </div>
      </div>
      <div v-if="showData.isImportCrl" id="crlTimeRange" class="tr">
        <div class="td">{{ $t('ALARM_REPORT_SYSLOG_REVOKING_DATE') }}</div>
        <div class="td">{{ showData.crlTimeRange }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card-item-box {
  background-color: var(--o-bg-color-light);
  border-radius: var(--o-border-radius);
  min-height: 180px;
  position: relative;

  .top {
    padding: 12px 24px;
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--o-border-color-light);

    .img {
      display: inline-block;
      width: 48px;
      min-width: 48px;
      height: 36px;
      margin-right: 8px;
    }

    .top-content {
      width: calc(100% - 56px);
      display: flex;
      flex-direction: column;

      .row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          color: var(--o-color-black);
          font-size: 16px;
          font-weight: bold;
          line-height: 24px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .right {
          .btn {
            display: flex;
            align-items: center;
            cursor: pointer;
            color: var(--o-text-color-secondary);

            .icon {
              margin-right: 8px;
            }

            .el-icon {
              margin-right: 5px;
              font-size: 16px;
              color: #8d98aa;
            }

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

              .el-icon {
                color: var(--o-color-primary-secondary);
              }

              .icon-editor:before {
                color: var(--o-color-primary-secondary);
              }
            }

            .del-text {
              white-space: nowrap;
            }
          }
        }
      }

      .user-box {
        display: flex;
        align-items: center;

        .cer-tag {
          margin-left: 4px;
          max-width: none !important;
        }
      }
    }

    .disabled-btn:hover :deep(.el-icon) {
      color: var(--o-text-color-tertiary) !important;
    }
  }

  .content {
    padding: 16px 24px;
    display: table;

    .tr {
      display: table-row;

      .td {
        line-height: 32px;
        display: table-cell;

        .tag-btn {
          display: flex;
          align-items: center;
        }
      }

      .td:nth-child(1) {
        white-space: nowrap;
        color: var(--o-text-color-secondary);
      }

      .td:nth-child(2) {
        padding-left: 24px;
        word-break: break-word;
      }
    }
  }

  .btn {
    margin-left: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--o-color-primary);

    &:hover {
      color: var(--o-color-primary-secondary);
    }
  }
}
</style>
