<template>
    <v-layout row justify-center>
      <v-dialog v-model="dialogPreview" persistent max-width="75%">
        <v-card>
          <v-card-title class="headline grey lighten-2" primary-title>
            PREVIEW
          </v-card-title>
          <v-card-text class="pt-2 pb-0">

            <v-layout row wrap>
                <v-flex xs2>
                    Nomor
                </v-flex>
                <v-flex xs10>
                    : {{ selectedMainTable.T_ItemOutNumber }}
                </v-flex>
            </v-layout>

            <v-layout row wrap>
                <v-flex xs2>
                    Tanggal Transaksi
                </v-flex>
                <v-flex xs10>
                    : {{ deFormatedDate(selectedMainTable.T_ItemOutDate) }}
                </v-flex>
            </v-layout>

            <v-layout row wrap>
                <v-flex xs2>
                    Gudang
                </v-flex>
                <v-flex xs10>
                    : {{ selectedMainTable.WarehouseName }}
                </v-flex>
            </v-layout>

            <v-layout row wrap>
                <v-flex xs2>
                    Divisi
                </v-flex>
                <v-flex xs10>
                    : {{ selectedMainTable.DivisionName }}
                </v-flex>
            </v-layout>

            <v-layout row wrap>
                <v-flex xs2>
                    Status
                </v-flex>
                <v-flex xs10>
                    : {{ selectedMainTable.T_ItemOutStatus }}
                </v-flex>
            </v-layout>

            <v-layout row wrap>
                <v-flex xs2>
                    Catatan
                </v-flex>
                <v-flex xs10>
                    : {{ selectedMainTable.T_ItemOutNote }}
                </v-flex>
            </v-layout>
 
            <v-card flat class=" mt-2">
              <v-layout row style="max-height: 600px; overflow: auto">
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                  <v-data-table
                    :headers="headersItems"
                    :items="detailItemouts"
                    hide-actions
                    class="elevation-1"
                  >
                    <template slot="items" slot-scope="props">
                      <td
                        class="text-xs-left pa-2"
                      >
                        <div
                          style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                          "
                        >
                          {{ props.item.T_ItemOutNumber }}
                        </div>
                      </td>
                      <td
                        class="text-xs-left pa-2"
                      >
                        <div
                          style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                          "
                        >
                          <v-chip small style="border-radius: 5px; flex-grow: 0">
                            {{ props.item.M_ItemDesc }}
                          </v-chip>
                        </div>
                      </td>
                      <td
                        class="text-xs-center pa-2"
                      >
                        {{ props.item.ItemUnitName }}
                      </td>
                      <td
                        class="text-xs-center pa-2"
                      >
                        {{ props.item.StockQty }}
                      </td>
                      <td
                        class="text-xs-center pa-2"
                      >
                        {{ props.item.RequestItemOutDetailQty }}
                      </td>
                      <td
                        class="text-xs-center pa-2"
                      >
                        {{ props.item.T_ItemOutDetailQty }}
                      </td>
                    </template>
                  </v-data-table>
                </v-flex>
              </v-layout>
            </v-card>
  
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="error" flat @click="closeDialogPreview()">
              Tutup
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-layout>
  </template>
  
  <script>
  module.exports = {
    name: "AddPurchaseRequestDialog",
    data() {
      return {
        headersItems: [
          {
              text: "NO",
              align: "center",
              sortable: false,
              value: "action",
              width: "15%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          },
          {
              text: "ITEM",
              align: "center",
              sortable: false,
              value: "action",
              width: "30%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          },
          {
              text: "SATUAN",
              align: "center",
              sortable: false,
              value: "action",
              width: "25%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          },
          {
              text: "STOCK",
              align: "center",
              sortable: false,
              value: "action",
              width: "10%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          },
          {
              text: "REQUEST QTY",
              align: "center",
              sortable: false,
              value: "action",
              width: "10%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          },
          {
              text: "ITEM OUT",
              align: "center",
              sortable: false,
              value: "action",
              width: "10%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          }
        ]
      };
    },
    mounted() {
  
    },
    computed: {
        dialogPreview: {
            get() {
                return this.$store.state.requester.dialogPreview;
            },
            set(val) {
                this.$store.commit("requester/updateDialogPreview", val);
            },
        },
        selectedMainTable: {
            get() {
                return this.$store.state.requester.selectedMainTable;
            },
            set(val) {
                this.$store.commit("requester/updateSelectedMainTable", val);
            },
        },
        detailItemouts() {
            return this.$store.state.requester.detailItemouts;
        }
    },
    methods: {
        deFormatedDate(date) {
            if (!date) return null;

            const [day, month, year] = date.split("-");
            return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
        },
        closeDialogPreview() {
            this.$store.commit("requester/updateDialogPreview", false);
        }
    },
    watch: {
  
    }
  };
  </script>
  