<template lang="pug">
  .wrapper-addresses.h-full
    .flex.flex-col.gap-y-6
      base-input(
        v-model="addresses.full_address",
        placeholder="Введите адрес целиком",
        label="Полный адрес",
        size="M"
      )
      .flex.items-center.justify-center.relative
        .line.absolute
        span.text-sm.separator.px-2 или
      .grid.grid-cols-2.gap-y-6.gap-x-4
        base-input(
          v-model="addresses.city",
          label="Город",
          placeholder="Введите город",
          disabled,
          size="M"
        )
        base-input(
          v-model="addresses.region",
          label="Область",
          placeholder="Введите область",
          disabled,
          size="M"
        )
        base-input(
          v-model="addresses.street",
          label="Улица",
          placeholder="Введите улицу",
          disabled,
          size="M"
        )
        base-input(
          v-model="addresses.house_number",
          label="Дом",
          placeholder="Номер дома",
          disabled,
          size="M"
        )
        base-input(
          v-model="addresses.apartment_number",
          label="Квартира",
          placeholder="Номер квартиры",
          disabled,
          size="M"
        )
        base-input(
          v-model="addresses.zip_code",
          label="Индекс",
          mask="######",
          placeholder="000000",
          disabled,
          size="M"
        )
</template>

<script>
import BaseCustomSelect from "@/components/base/BaseCustomSelect";
import BaseInput from "@/components/BaseInput.vue";

export default {
  name: "FormCreateAddresses",
  components: { BaseInput, BaseCustomSelect },
  props: {
    addresses: Object,
    saveClient: Function,
    saveFile: Function,
  },
};
</script>

<style lang="sass" scoped>
.wrapper-addresses
  height: 380px
  overflow-y: auto
  &::-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)

.line
  width: 570px
  height: 1px
  background-color: var(--border-light-grey-color)
  z-index: -1

.separator
  color: var(--font-dark-blue-color)
  background-color: var(--default-white)
</style>
