<template>
  <div class="signature-details-dialog" v-if="show">
    <Dialog :show="show" :dialogName="dialogName">
      <template #header>
        <p>{{ $t('signatures.detailsDialog.title') }}</p>
        <CloseB class="close" @click="close" />
      </template>

      <div class="info">
        <SignatureValid v-if="signature.signerList[0].isCertTrusted && signature.signerList[0].isSignVerified" />
        <SignatureInvalid v-else-if="signature.signerList[0].isCertTrusted || signature.signerList[0].isSignVerified" />
        <SignatureUnknown v-else />
        <div>
          <p class="title">{{ $t('signatures.detailsDialog.signBy') }} "{{ signature.signerList[0].certificateList[0].subject.CN }}{{ signature.signerList[0].certificateList[0].subject.email ? '&lt;' + signature.signerList[0].certificateList[0].subject.email + '&gt;' : '' }}"</p>
          <p class="desc">{{ $t('signatures.detailsDialog.signingTime') }} {{ dayjs(signature.date).format('YYYY-MM-DD HH:mm:ss') }}</p>
        </div>
      </div>

      <div class="summary">
        <div class="title">
          <div class="line-left"></div>
          <span>{{ $t('signatures.detailsDialog.validitySummary') }}</span>
          <div class="line-right"></div>
        </div>
        <div class="content">
          <template v-if="!signature.signerList[0].isCertTrusted && !signature.signerList[0].isSignVerified">
            <p>{{ $t('signatures.detailsDialog.invalidIdentity') }}</p>
            <p>{{ $t('signatures.detailsDialog.invalidSignature') }}</p>
            <p>{{ $t('signatures.detailsDialog.alteredDoc') }}</p>
          </template>
          <template v-else>
            <template v-if="signature.signerList[0].isCertTrusted && signature.signerList[0].isSignVerified">
              <p>{{ $t('signatures.detailsDialog.validIdentity') }}</p>
              <p>{{ $t('signatures.detailsDialog.validSignature') }}</p>
            </template>
            <template v-else-if="!signature.signerList[0].isCertTrusted && signature.signerList[0].isSignVerified">
              <p>{{ $t('signatures.detailsDialog.invalidIdentity') }}</p>
              <p>{{ $t('signatures.detailsDialog.validSignature') }}</p>
              <p>{{ $t('signatures.detailsDialog.unknownIdentity') }}</p>
            </template>
            <template v-else-if="signature.signerList[0].isCertTrusted && !signature.signerList[0].isSignVerified">
              <p>{{ $t('signatures.detailsDialog.validIdentity') }}</p>
              <p>{{ $t('signatures.detailsDialog.invalidSignature') }}</p>
            </template>
            <p v-if="isCertExpired">{{ $t('signatures.detailsDialog.expiredCertificate') }}</p>
            <p>{{ signature.signerList[0].diffInfo.length ? $t('signatures.detailsDialog.alteredDoc') : $t('signatures.detailsDialog.notModifiedDoc') }}</p>
          </template>
        </div>
      </div>

      <template #footer>
        <div class="view-button" @click="openDialog">{{ $t('signatures.detailsDialog.viewCertificateDetails') }}</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import dayjs from 'dayjs'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'

const dialogName = 'signatureDetailsDialog'

const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const show = computed(() => useViewer.isElementOpen(dialogName))
const signature = computed(() => useDocument.getSelectedSignature)

// 证书时间格式化 比较当前时间是否过期
const isCertExpired = computed(() => {
  const rowTimeSting = signature.value.signerList[0].certificateList[0].validDateEnd

  const year = rowTimeSting.substring(0, 4)
  const month = rowTimeSting.substring(4, 6)
  const day = rowTimeSting.substring(6, 8)
  const hours = rowTimeSting.substring(8, 10)
  const minutes = rowTimeSting.substring(10, 12)
  const seconds = rowTimeSting.substring(12, 14)
  const timezone = rowTimeSting.substring(14)

  const time = new Date(`${year}-${month}-${day}T${hours}:${minutes}:${seconds}${timezone}`)
  return time < new Date()
})

const close = () => {
  useViewer.closeElement(dialogName)
}

const openDialog = () => {
  close()
  useViewer.openElement('certificateViewerDialog')
}

const formatDate = (date) => {
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${formatAMPM(date.getHours())}:${addZero(date.getMinutes())}:${addZero(date.getSeconds())} ${getESTorEDT(date)}`
}
const formatAMPM = (hours) => {
  return hours >= 12 ? 'PM' : 'AM'
}
const addZero = (num) => {
  return num < 10 ? '0' + num : num
}
const getESTorEDT = (date) => {
  let jan = new Date(date.getFullYear(), 0, 1)
  let jul = new Date(date.getFullYear(), 6, 1)
  if (date.getTimezoneOffset() < Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset())) {
    return 'EST'
  } else {
    return 'EDT'
  }
}
</script>

<style lang="scss">
.signature-details-dialog {

  .dialog-container {
    padding: 0;
    width: 552px;
    border-radius: 0;
    position: relative;

    header {
      
      p {
        margin-top: 6px;
        margin-left: 12px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: var(--c-black-text);
      }

      .close {
        position: absolute;
        top: 8px;
        right: 8px;
        margin: 0;
        cursor: pointer;
      }
    }

    main {
      margin-top: 20px;
      margin-bottom: 15px;

      .info {
        margin: 0 26px 26px;
        display: flex;
        align-items: center;

        svg {
          margin-right: 16px;
          min-width: 32px;
          width: 32px;
          height: 32px;
          color: var(--c-icon-blue);
        }

        .title {
          word-break: break-word;
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
        }

        .desc {
          margin-top: 8px;
          font-size: 14px;
          line-height: 20px;
        }
      }

      .summary {
        margin: auto 24px;
        max-height: 345px;
        height: 100%;
        border: 1px solid var(--c-header-border);
        border-top-width: 0px;
        font-size: 14px;
        line-height: 20px;
        color: var(--c-black-text);

        .title {
          display: flex;

          span {
            margin: -10px 4px 0 4px;
            font-weight: 600;
          }

          .line-left {
            width: 12px;
            border-top: 1px solid var(--c-header-border);
          }

          .line-right {
            flex: 1;
            border-top: 1px solid var(--c-header-border);
          }
        }

        .content {
          display: flex;
          flex-direction: column;
          padding: 0 20px;
          margin-top: 10px;
          margin-bottom: 20px;
          height: calc(100% - 40px);
          overflow: auto;
          p + p {
            margin-top: 12px;
          }
        }
      }
    }

    footer {
      .view-button {
        margin-right: 26px;
        margin-bottom: 20px;
        padding: 6px 8px;
        height: 32px;
        border: 1px solid var(--c-header-border);
        border-radius: 1px;
        background: var(--c-header-button-active);
        cursor: pointer;
        font-size: 14px;
        line-height: 20px;
        color: var(--c-black-text);

        &:hover {
          background: var(--c-popup-bg-hover);
          color: white;
        }
      }
    }
  }
}
</style>
