<template>
  <v-dialog v-model="menuMaterial" width="900">
    <v-card>
      <v-card-item class="bg-primary py-3">
        <v-card-title>
          {{ $t("message.material.title") }}
        </v-card-title>
      </v-card-item>
      <v-card-text class="pt-5">
        <div>
          <h3 class="mb-4">{{ $t("message.material.materialYet") }}</h3>
          <v-chip variant="flat" color="error" class="rounded">{{
            $t("message.material.blood")
          }}</v-chip>
        </div>
      </v-card-text>

      <v-card-actions class="px-7">
        <v-btn
          :text="$t('message.material.correct')"
          variant="text"
          class="text-primary"
          @click="onCorrectMenuMaterial()"
        ></v-btn>
        <v-btn
          :text="$t('message.material.cancel')"
          variant="text"
          class="text-error"
          @click="onCancelMenuMaterial()"
        ></v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "MaterialDialog",
  computed: {
    menuMaterial() {
      return this.$store.state.collection.menuMaterial;
    },
  },
  methods: {
    onCancelMenuMaterial() {
      this.$store.commit("setMenuMaterial", false);
    },
    onCorrectMenuMaterial() {
      this.$store.commit("setMenuMaterial", false);
    },
  },
};
</script>
