<template lang="pug">
  base-modal(v-model="value", title="Добавление записи" modal-padding)
    .form-wrapper.flex.flex-col.gap-y-6.justify-start.mt-1
      span.text-smm.font-medium.title-inputs {{`Дата: ${dataEntry.date}`}}
      .flex.flex-col.gap-y-4.w-full
        .flex.flex-col.gap-y-6px.justify-start.w-full
          span.text-smm.font-semibold.title-inputs Карта здоровья
          base-download(
            v-model="dataEntry.pictures",
            multiple,
            title-type="снимок",
            :returned-fields="['photo', 'id', 'name', 'size']"
            )
          .grey-border.rounded-md.flex.w-full.py-2.pr-4.pl-2.justify-between.items-center(v-for="picture in dataEntry.pictures")
            .flex.items-center
              img.grey-border.rounded.w-8.h-8.mr-3(:src="picture.photo")
              span.text-base.font-normal.mr-2 {{picture.name}}
              span.text-smm.font-normal(:style="{color: 'var(--font-dark-grey-color)'}") {{`${picture.size} МБ`}}
            q-icon.delete-img.cursor-pointer(
              @click="() => deleteImg(picture.id)",
              name="app:cancel", 
              size="15px",
              )
        .flex.flex-col.gap-y-6px.justify-start.w-full
          span.text-smm.font-semibold.title-inputs Комментарий врача
          .flex.comments.rounded
            base-input.w-full.min-h-75(
              v-model="dataEntry.comment",
              type="textarea",
              borderless,
              dense,
              placeholder="Введите описание"
              autogrow,
              min-height="75px",
              font-size="16px",
              :text-color="!dataEntry.comment ? 'var(--font-grey-color)' : 'var(--font-dark-blue-color)'"
              )
      .flex.gap-x-2.text-smm
        q-btn(
          color="primary",
          outline,
          size="16px",
          no-caps,
          label="Отменить",
          padding="10px 24px 10px 24px",
          @click="closeModal"
        )
        q-btn(
          color="primary",
          size="16px",
          no-caps,
          label="Сохранить",
          padding="10px 24px 10px 24px",
          @click="createNewEntry"
        )
</template>

<script>
import BaseModal from "@/components/base/BaseModal.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseDownload from "@/components/base/BaseDownload.vue";
import { mapActions } from "vuex";
import { v_model } from "@/shared/mixins/v-model";
import moment from "moment";

export default {
  name: "HealthStateCreateModal",
  components: { BaseModal, BaseDownload, BaseInput },
  mixins: [v_model],
  data() {
    return {
      dataEntry: {},
    };
  },
  methods: {
    ...mapActions({
      addNewListData: "addNewListData",
    }),
    deleteImg(id) {
      this.dataEntry.pictures = this.dataEntry.pictures.filter(
        (img) => img.id !== id
      );
    },
    closeModal() {
      this.value = false;
    },
    createNewEntry() {
      this.addNewListData({
        stateKey: "healthState",
        data: { ...this.dataEntry, id: Math.random },
      });
      this.value = false;
    },
  },
  computed: {
    getData() {
      return {
        date: moment().format("YYYY-MM-DD"),
        pictures: [],
        comment: "",
      };
    },
  },
  mounted() {
    this.dataEntry = JSON.parse(JSON.stringify(this.getData));
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        if (!this.value) {
          this.dataEntry = JSON.parse(JSON.stringify(this.getData));
        }
      },
    },
  },
};
</script>

<style lang="sass" scoped>
.delete-img
  color: var(--font-grey-color)
  &:hover
    opacity: 0.7
.comments
  border: 1px solid var(--border-light-grey-color)
  padding: 3px 8px 6px 16px
.title-inputs
  color: var(--font-grey-color)
.form-wrapper
  width: 422px
.grey-border
  border: 1px solid var(--border-light-grey-color)
</style>
