<template>
  <div class="cryptopro-sign-form">
    <div class="cryptopro-sign-form__fieldset">
      <div v-if="title" class="cryptopro-sign-form__title-wrap">
        <slot name="title">
          <span class="cryptopro-sign-form__title">{{ title }}</span>
        </slot>
      </div>
      <div class="row q-col-gutter-sm">
        <div class="col-12">
          <r-select
            dense
            options-dense
            v-model="selectedSertificate"
            :options="certificateOptions"
            :disable="inProcess"
            placeholder="Выберите сертификат"
            class="certificate-selector"
          >
            <template v-slot:prepend>
              <q-icon name="pgs-key" />
            </template>
          </r-select>
        </div>

        <div class="col-12 col-sm-6">
          <data-block
            v-if="certificate"
            :form-data="{
              label: 'Дата и время окончания действия',
              value: displayValidTo,
              icon: 'pgs-calendar',
            }"
          />
        </div>

        <div class="col-12 col-sm-6">
          <data-block
            v-if="certificate"
            :form-data="{
              label: 'Статус',
              value: certificateIsActive ? 'Активный' : 'Не активный',
              icon: 'pgs-sign',
            }"
          />
        </div>

        <div class="col-12" v-if="certificate">
          <div class="form-row row">
            <div class="col-12 col-sm-4 form-row__title">
              <span>Сертификат</span>
            </div>
            <div class="col-12 col-sm-8 form-row__value">
              <span>{{ certificateThumbprint }}</span>
            </div>
          </div>
          <div class="form-row row" v-if="loadingIssuerInfo">
            <div class="col-12 col-sm-4 form-row__title">
              <q-skeleton type="text" />
            </div>
            <div class="col-12 col-sm-8 form-row__value">
              <q-skeleton type="text" />
            </div>
          </div>

          <template v-if="certificate">
            <div
              class="form-row row"
              v-for="(info, index) of certificateIssuerInfo"
              :key="getUUID()"
            >
              <div class="col-12 col-sm-4 form-row__title">
                <span class="flex items-center full-height">{{
                  info.title
                }}</span>
              </div>
              <div class="col-12 col-sm-8 form-row__value">
                <span>{{ info.description }}</span>
              </div>
            </div>
            <div class="form-row row" v-if="loadingOwnerInfo">
              <div class="col-12 col-sm-4 form-row__title">
                <q-skeleton type="text" />
              </div>
              <div class="col-12 col-sm-8 form-row__value">
                <q-skeleton type="text" />
              </div>
            </div>
            <div
              class="form-row row"
              v-for="(info, index) of certificateOwnerInfo"
              :key="getUUID()"
            >
              <div class="col-12 col-sm-4 form-row__title">
                <span class="flex items-center full-height">
                  {{ info.title }}
                </span>
              </div>
              <div class="col-12 col-sm-8 form-row__value">
                <span>{{ info.description }}</span>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.certificate-selector {
  background-color: rgb(245, 248, 251);
}
.cryptopro-sign-form {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;

  &__title {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.015em;

    padding: 8px 16px;

    color: rgba(2, 12, 18, 0.9);
  }

  &__fieldset {
    flex: 1 1 auto;
    border-radius: 8px 8px 0 0;
    padding: 8px 12px;
  }

  &__button-panel {
    background: rgba(15, 32, 160, 0.08);
  }
}
.form-row {
  border-bottom: 1px solid rgba(1, 72, 116, 0.11);
  padding-top: 8px;
  padding-bottom: 4px;
  overflow: hidden;
  > div:first-child {
    padding-left: 12px;
  }
  &__title {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(126, 132, 135);
  }

  &__value {
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: rgba(2, 12, 18, 1);
  }
}
</style>

<script lang="ts">
import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
import dataBlock from '@components/cards/statements/components/dataBlock.vue';
import CryptoProPlugin from '@/mixins/CriptoProPlugin';
import { DateFormat, convertDateFormat, isPastDate } from '@/utils/format-date';
import { v4 as getUUID } from 'uuid';
import RSelect from '@/recruits/components/common/r-select.vue';

@Component({
  components: { dataBlock, RSelect },
  methods: {
    getUUID,
  },
})
export default class CryptoProSignForm extends Mixins(CryptoProPlugin) {
  getUUID: typeof getUUID;
  @Prop() title: string;
  @Prop({ default: null }) mockProcess: {
    <T>(base64: string, formModel: T): string;
  } | null;

  get certificateIsActive(): boolean {
    if (!this.certificate) return false;
    const validTo = this.certificate?.validTo;
    return !isPastDate(validTo);
  }

  isCrertificateActive(): boolean {
    return !!this.certificateIsActive;
  }

  get displayValidTo(): string {
    if (!this.certificate) return '';
    const validTo = this.certificate?.validTo;
    return convertDateFormat(validTo, DateFormat.backend, DateFormat.datetime);
  }

  @Watch('certificateIsActive')
  onCertificateIsActive(active: boolean): void {
    this.$emit('update:certificateIsActive', active);
  }

  created(): void {
    this.initCryptoProPlugin();
  }
}
</script>
