<script setup lang="ts">
import { IconChevronDown } from '@computing/opendesign-icons';
import { reactive, ref, PropType, computed, watch, provide } from 'vue';
import { traduction } from '@/utils/language';
import { Certificate } from '@/model/Users/ldap-interface';
import { getStoreData } from '@/utils/composition';
import Dialog from '@/components/Dialog/Dialog.vue';
import CrlCertUpload from './CrlCertUpload.vue';

const props = defineProps({
  serverCert: {
    type: Object as PropType<Certificate | null>,
    required: true,
    default: () => null,
  },
  middleCert: {
    type: Array as PropType<Certificate[]>,
    required: true,
    default: () => [],
  },
  rootCert: {
    type: Object as PropType<Certificate | null>,
    required: true,
    default: () => null,
  },
  crlState: {
    type: Boolean,
    default: false,
  },
  action: {
    type: String,
    default: '',
  },
});

const emits = defineEmits(['reInit']);

const isSystemLocked = computed(() => {
  return getStoreData('glob', 'systemLocked');
});

// 将action传递给上传组件
provide('action', props.action);

const crlDialogRef = ref();
const crlRef = ref();
const isExpand = ref(false);

const showExpand = computed(() => {
  return props.middleCert.length > 0;
});

// 点击展开或收起
function switchExpandState() {
  isExpand.value = !isExpand.value;
}

const crlConfig = reactive({
  content: '',
  title: traduction('COMMON_CER_UPLOAD'),
  size: 'medium',
});
// 打开CRL证书上传
function openCRLModal() {
  crlDialogRef.value.show();
  crlDialogRef.value.disable();
}

function closeCRLModal(reason: boolean) {
  if (reason) {
    crlRef.value.upload().then((res: any) => {
      crlDialogRef.value.hide();
    });
  } else {
    crlDialogRef.value.hide();
  }
}

// 每次切换controller时，都将证书折叠起来
watch(
  props,
  () => {
    isExpand.value = false;
  },
  {
    deep: true,
  },
);
</script>

<template>
  <div class="ldap-cert-list">
    <div v-if="serverCert" id="ldapServerCertFormContainer" class="cert-item server-cert">
      <!-- 服务器证书 -->
      <h4>{{ traduction('LDPA_SERVER_CERTIFY_INFO') }}</h4>
      <table>
        <tr>
          <td>{{ traduction('ALARM_REPORT_SYSLOG_ISSUED') }}</td>
          <td>{{ serverCert?.Issuer }}</td>
        </tr>
        <tr>
          <td>{{ traduction('ALARM_REPORT_SYSLOG_USER') }}</td>
          <td>{{ serverCert?.Subject }}</td>
        </tr>
        <tr>
          <td>{{ traduction('ALARM_REPORT_SYSLOG_EFFECTIVE') }}</td>
          <td>{{ serverCert?.ValidNotBefore }} - {{ serverCert?.ValidNotAfter }}</td>
        </tr>
        <tr>
          <td>{{ traduction('COMMON_SERIALNUMBER') }}</td>
          <td>{{ serverCert?.SerialNumber }}</td>
        </tr>
        <tr>
          <td>{{ traduction('ALARM_REPORT_SYSLOG_REVOKING_LIST') }}</td>
          <td>
            <span v-if="crlState" id="ldapServerCertStateNotConfig">
              {{ traduction('COMMON_CONFIGURED') }}
            </span>
            <span v-if="!crlState" id="ldapServerCertStateNotConfig">
              {{ traduction('ALARM_REPORT_SYSLOG_HAS_NOT_SET') }}
            </span>
            <el-button
              v-if="!isSystemLocked"
              id="crlUpload"
              v-privil.userConfig
              type="text"
              @click="openCRLModal"
            >
              {{ traduction('COMMON_UPLOAD') }}
            </el-button>
          </td>
        </tr>
      </table>
    </div>
    <!-- 中间证书 -->
    <div v-if="showExpand && isExpand">
      <div
        v-for="item of middleCert"
        id="{{'ldapMidCert' + $index}}"
        :key="item.SerialNumber"
        class="cert-item middle-cert"
      >
        <h4>{{ traduction('SERVICE_WBS_MIDDLE_CRE_INFO') }}</h4>
        <table>
          <tr>
            <td>{{ traduction('ALARM_REPORT_SYSLOG_ISSUED') }}</td>
            <td>{{ item.Issuer }}</td>
          </tr>
          <tr>
            <td>{{ traduction('ALARM_REPORT_SYSLOG_USER') }}</td>
            <td>{{ item.Subject }}</td>
          </tr>
          <tr>
            <td>{{ traduction('ALARM_REPORT_SYSLOG_EFFECTIVE') }}</td>
            <td>{{ item.ValidNotBefore }} - {{ item.ValidNotAfter }}</td>
          </tr>
          <tr>
            <td>{{ traduction('COMMON_SERIALNUMBER') }}</td>
            <td>{{ item.SerialNumber }}</td>
          </tr>
        </table>
      </div>
    </div>

    <div
      v-if="rootCert && (showExpand ? isExpand : true)"
      id="ldapRootCertContainer"
      class="cert-item root-cert"
    >
      <!-- 根证书 -->
      <h4>{{ traduction('SERVICE_WBS_ROOT_CRE_INFO') }}</h4>
      <table>
        <tr>
          <td>{{ traduction('ALARM_REPORT_SYSLOG_ISSUED') }}</td>
          <td>{{ rootCert.Issuer }}</td>
        </tr>
        <tr>
          <td>{{ traduction('ALARM_REPORT_SYSLOG_USER') }}</td>
          <td>{{ rootCert.Subject }}</td>
        </tr>
        <tr>
          <td>{{ traduction('ALARM_REPORT_SYSLOG_EFFECTIVE') }}</td>
          <td>{{ rootCert.ValidNotBefore }} - {{ rootCert.ValidNotAfter }}</td>
        </tr>
        <tr>
          <td>{{ traduction('COMMON_SERIALNUMBER') }}</td>
          <td>{{ rootCert.SerialNumber }}</td>
        </tr>
      </table>
    </div>
    <!-- 展开 -->
    <div class="divider">
      <el-divider v-if="showExpand">
        <el-icon :class="{ expand: isExpand }">
          <IconChevronDown />
        </el-icon>
        <span class="expand-text" @click="switchExpandState">
          {{
            isExpand
              ? traduction('SERVICE_WBS_CRE_HIDE_MORE')
              : traduction('SERVICE_WBS_CRE_SHOW_MORE')
          }}
        </span>
      </el-divider>
    </div>
  </div>

  <Dialog ref="crlDialogRef" :config="crlConfig" @close="closeCRLModal">
    <template #other>
      <CrlCertUpload
        ref="crlRef"
        :action="action"
        @enable="crlDialogRef.enable()"
        @disable="crlDialogRef.disable()"
        @re-init="emits('reInit')"
      />
    </template>
  </Dialog>
</template>

<style lang="scss" scoped>
.ldap-cert-list {
  position: relative;
  &.active {
    height: auto;
  }
  &.deactive {
    height: 250px;
    overflow: hidden;
  }
  .divider {
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.cert-item {
  background: var(--o-bg-color-light);
  padding: 0 24px 12px 24px;
  margin-bottom: 8px;
  border-radius: 4px;
  h4 {
    padding: 16px 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--o-text-color-primary);
  }
  tr {
    td {
      color: var(--o-text-color-primary);
    }
    td:first-child {
      padding-right: 24px !important;
      color: var(--o-text-color-secondary);
    }
  }
  :deep(.el-button--text) {
    min-width: auto;
    margin-left: 8px;
  }
}
:deep(.el-divider) {
  .el-divider__text {
    cursor: pointer;
    color: var(--o-text-color-secondary);
    background-color: var(--o-bg-color-base);
  }
  .el-icon {
    transition: all 0.2s;
    vertical-align: middle;
    &.expand {
      transform: rotate(180deg);
    }
  }
  .expand-text {
    font-size: 12px;
    margin-left: 8px;
    user-select: none;
  }
}
:deep(.el-divider--horizontal) {
  margin-top: 16px;
  margin-bottom: 16px;
}
</style>
