<template>
  <v-dialog v-model="menuSelectedPatient" max-width="900">
    <v-card>
      <v-card-item class="bg-primary py-3">
        <v-card-title>
          {{ $t("message.infoDialog.title") }}
        </v-card-title>
      </v-card-item>
      <v-card-text
        class="font-weight-bold d-flex justify-center ga-3 text-h6 pt-5"
      >
        <p>{{ selectedPatient.noReg1 }}</p>
        <p>/</p>
        <p v-if="selectedPatient.noReg2" class="text-error">
          {{ selectedPatient.noReg2 }}
        </p>
      </v-card-text>
      <v-card-actions class="d-flex justify-space-between px-7">
        <div>
          <v-btn
            v-if="selectedPatient.process"
            :text="$t('message.infoDialog.material')"
            variant="flat"
            class="bg-primary text-white"
            @click="onMenuMaterial()"
          ></v-btn>
          <v-btn
            :text="$t('message.infoDialog.barcode')"
            variant="flat"
            class="bg-info text-white"
            @click="onMenuBarcode(selectedPatient.noReg2)"
          ></v-btn>
          <v-btn
            :text="$t('message.infoDialog.changeBirthday')"
            variant="flat"
            class="bg-secondary-darken text-white"
            @click="onMenuChangeBirthday(selectedPatient.birthday)"
          ></v-btn>
        </div>
        <v-btn
          :text="$t('message.infoDialog.close')"
          variant="text"
          class="text-error"
          @click="onDiselectPatient()"
        ></v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "InfoDialog",
  computed: {
    menuSelectedPatient() {
      return this.$store.state.collection.menuSelectedPatient;
    },
    selectedPatient() {
      return this.$store.state.collection.selectedPatient;
    },
    menuMaterial() {
      return this.$store.state.collection.menuMaterial;
    },
    menuBarcode() {
      return this.$store.state.collection.menuBarcode;
    },
    menuChangeBirthday() {
      return this.$store.state.collection.menuChangeBirthday;
    },
  },
  methods: {
    onDiselectPatient() {
      this.$store.commit("setMenuSelectedPatient", false);
      setTimeout(() => this.$store.commit("setSelectedPatient", {}), 1000);
    },
    onMenuChangeBirthday(birthday) {
      this.$store.commit("setMenuChangeBirthday", true);
      const time = birthday.split("-");
      this.$store.commit(
        "setBirthday",
        new Date(Date.parse(`${time[1]}/${time[0]}/${time[2]}`))
      );
    },
    onMenuBarcode(noReg) {
      this.$store.commit("setMenuBarcode", true);
      this.$store.commit("setPrintItem", [
        {
          specimen: this.$t("message.barcode.form"),
          barcode: noReg,
        },
        {
          specimen: this.$t("message.barcode.label"),
          barcode: noReg,
        },
      ]);
    },
    onMenuMaterial() {
      this.$store.commit("setMenuMaterial", true);
    },
  },
};
</script>
