<template>
  <div class="AccountFinishForm">
    <div class="AccountFinishForm__Field">
      <div class="AccountFinishForm__FieldLabel">
        Логин
        <base-local-preview :content="loginAndPass">
          <q-icon
            class="AccountFinishForm__ShowFile"
            color="primary"
            name="pgs-view"
            size="26px"
          >
            <q-tooltip>Предпросмотр</q-tooltip>
          </q-icon>
        </base-local-preview>
      </div>
      <div class="AccountFinishForm__Text">{{ userName }}</div>
    </div>
    <div class="AccountFinishForm__Field">
      <div class="AccountFinishForm__FieldLabel">Пароль</div>
      <div class="AccountFinishForm__Text">{{ userPassword }}</div>
    </div>
    <div class="AccountFinishForm__Field">
      <div
        class="AccountFinishForm__FieldLabel AccountFinishForm__FieldLabel_AttentionText"
      >
        Активна 8 часов
      </div>
      <div class="AccountFinishForm__RecoverLink">
        <span class="AccountFinishForm__Text">
          {{ recoverPasswordLink }}
        </span>
        <q-icon
          size="sm"
          name="pgs-copy"
          class="AccountFinishForm__CopyBtn"
          @click="sendToClipBoard(recoverPasswordLink)"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { FinishInfo } from '@/recruits/components/accounts/utils/types';
import { copyToClipboard } from 'quasar';

@Component({})
export default class AccountFinishForm extends Vue {
  @Prop({ default: null })
  info: FinishInfo | null;

  get userName(): string {
    return this.info?.userName || '-';
  }

  get userPassword(): string {
    return this.info?.password || '-';
  }

  get recoverPasswordLink(): string {
    return this.info?.recoverLink || '-';
  }

  get loginAndPass(): string {
    return `Логин: ${this.userName}\nПароль: ${this.userPassword}`;
  }

  sendToClipBoard(textValue: string): void {
    copyToClipboard(textValue);
    this.$q.notify({
      message: `'${textValue}' скопирован`,
    });
  }
}
</script>

<style lang="scss" scoped>
.AccountFinishForm {
  padding: 0 40px;
  flex-basis: 50%;

  &__FieldLabel {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 4px;
    font-weight: 600;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;

    &_AttentionText {
      color: red;
    }
  }

  &__Field {
    margin-bottom: 15px;
  }

  &__Text {
    color: #020c12ba;
  }

  &__RecoverLink {
    max-width: 100%;
    word-break: break-all;
  }

  &__CopyBtn {
    padding-left: 2px;
    color: #1491cf;
    cursor: pointer;
  }

  &__ShowFile {
    cursor: pointer;
  }
}
</style>
