<template lang="pug">
  .flex.flex-col.gap-y-4
    base-select(
      disable,
      textStyle="text-sm",
      labelStyle="text-xxs",
      placeholder="Введите город",
      v-model="dopeAddress.city",
      label="Город"
    )
    base-input(
      disabled,
      placeholder="Введите область",
      labelStyle="text-xxs",
      textStyle="text-sm",
      v-model="dopeAddress.region",
      label="Область",
      outlined
    )
    base-input(
      disabled,
      placeholder="Введите улицу",
      labelStyle="text-xxs",
      textStyle="text-sm",
      v-model="dopeAddress.street",
      label="Улица",
      outlined
    )
    .flex.gap-x-4
      base-input(
        disabled,
        placeholder="Дом",
        label="Дом"
        v-model="dopeAddress.house",
        labelStyle="text-xxs",
        textStyle="text-sm",
      )
      base-input(
        disabled,
        placeholder="Квартира",
        label="Квартира",
        v-model="dopeAddress.flat",
        labelStyle="text-xxs",
        textStyle="text-sm",
        outlined
      )
    base-input(
      disabled,
      mask="######",
      placeholder="000000",
      label="Индекс",
      v-model="dopeAddress.index",
      labelStyle="text-xxs",
      textStyle="text-sm",
      outlined
    )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect";

export default {
  name: "ClientDetailSectionAddress",
  components: {
    BaseInput,
    BaseSelect,
  },
  props: {
    dopeAddress: Object,
  },
};
</script>
