<template lang="pug">
  medical-form-wrapper(
    title="Страховка",
    :is-edit="isEdit",
    :open-edit="openEdit",
    :cancel="cancelEdit"
  )
    .form-wrap.gap-24.w-full
      .data-section.flex.flex-col.gap-4(v-for="insurance in insuranceConfig")
        .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
        .flex.w-full.justify-between.items-center.gap-4(v-for="field in insurance.fields")
          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
          .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'photo'")
            img.avatar.object-cover(
              v-if="basic[insurance.insuranceKey][field.key]",
              :src="basic[insurance.insuranceKey][field.key]",
              alt="AV"
            )
            .replace-photo.font-medium.text-base.cursor-pointer(
              v-if="isEdit"
            ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото"}}
          .flex.flex-col.relative(v-else)
            base-input(
              v-model="basic[insurance.insuranceKey][field?.key]",
              @update:model-value="checkChangeInput",
              :disabled="!isEdit",
              :standout="!isEdit",
              :outlined="isEdit",
              :type="field.type", 
              :width="300",
              text-color="black"
            )
            .flex.font-medium.text-smm.absolute.top-10(
              v-if="basic?.benefit[insurance?.discount]",
              :style="{color: 'var(--font-grey-color)'}"
            )
              span Процент скидки: 
              span(
                :style="{color: 'var(--font-dark-blue-color)'}"
              ) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
</template>

<script>
import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/medicalConfig";
import { mapGetters, mapState } from "vuex";
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import BaseAvatar from "@/components/base/BaseAvatar.vue";
import BaseInput from "@/components/base/BaseInput.vue";

export default {
  name: "InsuranceForm",
  components: { MedicalFormWrapper, BaseAvatar, BaseInput },
  data() {
    return {
      insuranceConfig: baseInsuranceForm,
      isCheckChange: false,
      isEdit: false,
    };
  },
  computed: {
    ...mapGetters({
      url: "getUrl",
      initDataBasic: "getBasicData",
    }),
    ...mapState({
      basic: (state) => state.medical.basicData,
    }),
  },
  methods: {
    checkChangeInput() {
      let initData = JSON.stringify(this.initDataBasic);
      let changeData = JSON.stringify(this.basic);
      if (initData !== changeData) {
        this.isCheckChange = true;
      } else {
        this.isCheckChange = false;
      }
    },
    cancelEdit() {
      this.isEdit = false;
    },
    openEdit() {
      this.isEdit = true;
    },
  },
};
</script>

<style lang="sass" scoped>
.select
  width: 324px

.avatar-field
  min-width: 324px

.avatar
  height: 100%

.replace-photo
  color: var(--btn-blue-color)

.input
  color: purple

.form-wrap
  display: grid
  grid-template-columns: repeat(3, 1fr)
  grid-template-rows: repeat(1, 1fr)
  @media(max-width: 1900px)
    grid-template-columns: repeat(2, 1fr)
    grid-template-rows: repeat(2, 1fr)
  @media(max-width: 1320px)
    grid-template-columns: repeat(1, 1fr)
    grid-template-rows: repeat(3, 1fr)

.label-field
  color: var(--font-grey-color)
</style>
