<template>
  <v-dialog v-model="menuBarcode" width="900">
    <v-card>
      <v-card-item class="bg-primary py-3 elevation-6">
        <v-card-title>
          {{ $t("message.barcode.title") }}
        </v-card-title>
      </v-card-item>
      <v-card-text class="pt-5">
        <v-data-table
          :headers="headers"
          :items="printItem"
          hide-default-footer
          height="200"
        >
          <template v-slot:headers="{ columns }">
            <tr>
              <template v-for="column in columns" :key="column.key">
                <td
                  :class="[
                    'bg-primary-lighten',
                    column.class,
                    { 'd-flex justify-center': column.key === 'checkbox' },
                  ]"
                  :style="{ minWidth: column.width, textAlign: column.align }"
                >
                  <template v-if="column.key === 'checkbox'">
                    <v-checkbox
                      v-model="allSelected"
                      color="primary"
                      :indeterminate="someSelected"
                      @update:modelValue="selectAll(!allSelected)"
                    ></v-checkbox>
                  </template>
                  <template v-else>
                    <span>{{ column.title }}</span>
                  </template>
                </td>
              </template>
            </tr>
          </template>
          <template v-slot:item="{ item }">
            <tr>
              <td class="d-flex justify-center">
                <v-checkbox
                  v-model="selected"
                  color="primary"
                  :value="item"
                  @update:modelValue="onSomeSelected()"
                ></v-checkbox>
              </td>
              <td>
                <p class="font-weight-medium">{{ item.specimen }}</p>
              </td>
              <td>
                <p class="font-weight-medium">{{ item.barcode }}</p>
              </td>
              <td>
                <p class="w-100 d-flex justify-center cursor-pointer">
                  <iconify-icon
                    style="font-size: 1.5rem; color: #00bcd4"
                    icon="fluent:print-48-regular"
                  ></iconify-icon>
                </p>
              </td>
            </tr>
          </template>
        </v-data-table>
      </v-card-text>

      <v-card-actions class="d-flex justify-space-between px-7">
        <v-btn
          :text="$t('message.barcode.close')"
          variant="text"
          class="text-error"
          @click="onCloseMenuBarcode()"
        ></v-btn>
        <div>
          <v-btn
            :text="$t('message.barcode.printRobo')"
            variant="flat"
            class="bg-info text-white"
            @click="onCloseMenuBarcode()"
          ></v-btn>
          <v-btn
            :text="$t('message.barcode.printSelected')"
            variant="flat"
            class="bg-secondary-darken text-white"
            @click="onCloseMenuBarcode()"
          ></v-btn>
        </div>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "BarcodeDialog",
  data() {
    return {
      selected: [],
      allSelected: false,
      someSelected: false,
      headers: [
        {
          title: "",
          key: "checkbox",
          align: "center",
          sortable: false,
          width: "10%",
          class: "",
        },
        {
          title: this.$t("message.barcode.specimen"),
          key: "specimen",
          align: "start",
          sortable: false,
          width: "30%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.barcode.barcode"),
          key: "barcode",
          align: "start",
          sortable: false,
          width: "30%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.barcode.action"),
          key: "action",
          align: "center",
          sortable: false,
          width: "30%",
          class: "font-weight-bold",
        },
      ],
    };
  },
  computed: {
    menuBarcode() {
      return this.$store.state.collection.menuBarcode;
    },
    printItem() {
      return this.$store.state.collection.printItem;
    },
  },
  methods: {
    onCloseMenuBarcode() {
      this.$store.commit("setMenuBarcode", false);
    },
    selectAll(boolean) {
      if (!boolean) this.selected = this.printItem;
      else this.selected = [];
    },
    onSomeSelected() {
      this.someSelected =
        this.selected.length !== 0 &&
        this.selected.length !== this.printItem.length;
      if (this.selected.length === this.printItem.length)
        this.allSelected = true;
    },
  },
};
</script>
