<template lang="pug">
  .wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
    .flex.flex-col.gap-y-6.px-4
      span.title-info.text-base.font-bold Паспортные данные
      .grid.grid-cols-2.gap-x-4.gap-y-6
        base-input.input-info(
          v-mask="'#### ######'",
          v-model="identityDocument.pass.series_number",
          placeholder="0000 000000",
          label="Серия и номер"
        )
        base-input.input-info(
          v-model="identityDocument.pass.issued_by_org",
          placeholder="Точно как в паспорте",
          label="Кем выдан"
        )
        base-input.input-info(
          v-mask="'###-###'",
          v-model="identityDocument.pass.issued_by_org_code",
          placeholder="000–000",
          label="Код подразделения"
        )
        base-input-date.input-info.h-10(
          v-model="identityDocument.pass.issued_by_date",
          placeholder="Дата",
          label="Дата выдачи"
        )
    .flex.flex-col.gap-y-6.px-4
      span.title-info.text-base.font-bold СНИЛС и ИНН
      .grid.grid-cols-2.gap-x-4.gap-y-6
        base-input.input-info(
          disabled,
          v-mask="'###-###-### ##'",
          v-model="identityDocument.snils.number",
          placeholder="000–000–000 00",
          label="Номер СНИЛС"
        )
        base-input.input-info(
          disabled,
          v-mask="'############'",
          v-model="identityDocument.inn.number",
          placeholder="000000000000",
          label="Номер ИНН"
        )
    .px-4
      base-button(@click="saveClient" :size="40")
        span.font-semibold Создать клиента
</template>

<script>
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
import BaseInputDate from "@/components/base/BaseInputDate";
import { mask } from "vue-the-mask";
export default {
  name: "FormCreateIdentityDocuments",
  components: { BaseInput, BaseInputDate, BaseButton },
  props: {
    identityDocument: Object,
    saveClient: Function,
  },
  directives: { mask },
};
</script>

<style lang="sass" scoped>
.wrapper-documents
  min-height: 443px
  max-height: 443px
  overflow-y: auto
  color: var(--font-grey-color)
  &::-webkit-scrollbar
    width: 4px
  &::-webkit-scrollbar-track
    background-color: rgba(211, 212, 220, 0.5)
    border-radius: 8px
  &::-webkit-scrollbar-thumb
    border-radius: 8px
    background-color: var(--btn-blue-color)
.input-info
  color: var(--font-dark-blue-color)
.title-info
  color: var(--font-dark-blue-color)
.input-date
  border: 1.5px solid var(--border-light-grey-color)
</style>
