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

<script>
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect";
import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
import { medicalDetailConfig } from "@/pages/oldMedicalCard/utils/medicalConfig.js";

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

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