<template lang="pug">
  .base.flex.flex-col.gap-y-6
    span.font-bold Полис
    base-radio-buttons-group(
      :items="policiesList",
      v-model="policy",
      rowGap="gap-x-[182px]"
    )
    .flex.gap-x-4
      .flex.flex-col.gap-y-4
        base-input.input(
          label="Серия и номер полиса ОМС",
          placeholder="000000 0000000000",
          v-model="clientDetail.OMSPolicy.number",
          v-mask="'###### ##########'",
          :disabled="!selectedOMSPolicy"
        )
        base-input.input(
          label="Страховая организация полиса ОМС",
          v-model="clientDetail.OMSPolicy.organization",
          :disabled="!selectedOMSPolicy"
        )
      .flex.flex-col.gap-y-4
        base-input.input(
          label="Серия и номер полиса ДМС",
          placeholder="000000 0000000000",
          v-model="clientDetail.DMSPolicy.number",
          v-mask="'###### ##########'",
          :disabled="selectedOMSPolicy"
        )
        base-input.input(
          label="Страховая организация полиса ДМС",
          v-model="clientDetail.DMSPolicy.organization",
          :disabled="selectedOMSPolicy"
        )
    base-input(
      label="Код категории льготы",
      placeholder="000",
      v-model="clientDetail.benefit_code",
    )
    base-input(
      label="К кому обращаться в случае необходимости",
      placeholder="ФИО*"
    )
    base-input(
      label="Номер телефона",
      placeholder="+7 (915) 644–92–23"
    )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import BaseInputDate from "@/components/base/BaseInputDate";
import BaseSelect from "@/components/base/BaseSelect";
import { mask } from "vue-the-mask";
import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";

export default {
  name: "MedicalPolicyDocuments",
  components: {
    BaseInput,
    BaseInputDate,
    BaseSelect,
    BaseRadioButtonsGroup,
  },
  directives: { mask },
  props: {
    clientDetail: Object,
  },
  data() {
    return {
      policy: "OMS",
    };
  },
  computed: {
    policiesList() {
      return medicalDetailConfig.policiesList;
    },
    selectedOMSPolicy() {
      return this.policy === "OMS";
    },
  },
};
</script>

<style lang="sass" scoped>
.input
  width: 277px
</style>
