<template>
    <div style="width: 100%;">
    <v-layout row wrap>
      <v-flex xs12 fill-height pa-1>
        <v-card>
          <v-card-text>
            <v-layout row wrap>
              <v-flex xs12>
                <v-layout row wrap>
                  <v-flex xs11>
                    <v-layout row wrap>
                      <v-flex xs12>
                        <div>
                          <span>No : </span>
                          <span>{{
                            selected_voucher.PaymentVoucherNumber
                          }}</span>
                        </div>
                      </v-flex>
                      <v-flex xs12>
                        <div>
                          <span>Sumber Dana  : </span>
                          <span>{{
                                selected_voucher.coaDescriptionSource
                          }}</span>
                        </div>
                      </v-flex>

                      <!-- <v-flex xs12>
                        <div>
                          <span>Biaya : </span>
                          <span>{{
                            selected_voucher.coaDescriptionExpense
                          }}</span>
                        </div>
                      </v-flex> -->

                      <v-flex xs12>
                        <div>
                          <span>Tampungan Sementara : </span>
                          <span>{{
                            selected_voucher.coaDescriptionTemporary
                          }}</span>
                        </div>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <!-- <v-flex xs1>
                    <v-btn
                      color="primary"
                      flat
                      icon
                      @click="openDialogDetail()"
                    >
                      <v-icon>add_box</v-icon>
                    </v-btn>
                  </v-flex> -->
                </v-layout>
              </v-flex>
              <v-flex xs12 pt-2 pb-2>
                <v-layout row wrap>
                  <v-flex xs12>
                    <v-data-table
                      :headers="headers"
                      :items="xdetails"
                      :loading="isLoading"
                      hide-actions
                      class="elevation-1"
                    >
                      <template slot="items" slot-scope="props">
                        <td class="text-xs-center pa-2">
                          {{ props.item.RowNumber }}
                        </td>
                        <td class="text-xs-left pa-2">
                          {{ props.item.PurchaseRequestDirectNumber }}
                        </td>
                        <td class="text-xs-left pa-2">
                          Rp
                          {{
                            props.item.PaymentVoucherDetailTotal.toString().replace(
                              /\B(?=(\d{3})+(?!\d))/g,
                              "."
                            )
                          }}
                        </td>
                        <td>
                          <v-btn
                            style="min-width: 25px; height: 25px; margin: 0;" outline
                            small @click="openAccountDialog(props.item)" color="blue lighten-2"
                          >
                            <v-icon small color="blue">edit</v-icon>
                          </v-btn>
                        </td>
                      </template>
                    </v-data-table>
                  </v-flex>
                </v-layout>
              </v-flex>
              
              <!-- <v-flex xs12 v-show="xdetails.length > 0">
                <v-btn
                  @click="simpanKasir()"
                >
                  Simpan
                </v-btn>
              </v-flex> -->
            </v-layout>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
    <dialog-account-item></dialog-account-item>
    </div>
</template>

<style scoped>
.date-type-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

.table.v-table thead tr {
  height: 40px;
}

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}
</style>

<script>
module.exports = {
    components: {
        'dialog-account-item': httpVueLoader('./dialogAccountItem.vue')
    },
    data() {
        return {
            headers: [
                {
                    text: "NO",
                    align: "left",
                    sortable: false,
                    value: "no",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "NO REQUEST",
                    align: "left",
                    sortable: false,
                    value: "request",
                    width: "45%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "TOTAL",
                    align: "left",
                    sortable: false,
                    value: "total",
                    width: "40%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "AKSI",
                    align: "left",
                    sortable: false,
                    value: "total",
                    width: "5%",
                    class: "blue lighten-3 white--text",
                },
            ],
        }
    },
    mounted() {

    },
    computed: {
      xdetails() {
        return this.$store.state.voucher.details;
      },
      isLoading() {
          return this.$store.state.voucher.search_status_detail === 1;
      },
      selected_voucher: {
          get() {
              return this.$store.state.voucher.selected_voucher;
          },
          set(val) {
              this.$store.commit("voucher/update_selected_voucher", val);
          },
      },
      dialog_account_item: {
          get() {
            return this.$store.state.voucher.dialog_account_item;
          },
          set(val) {
            this.$store.commit("voucher/update_dialog_account_item", val)
          }
      },
      list_voucher_detail: {
          get() {
            return this.$store.state.voucher.list_voucher_detail;
          },
          set(val) {
            this.$store.commit("voucher/update_list_voucher_detail", val)
          }
      },
      list_accitem: {
        get()   {
          return this.$store.state.voucher.list_accitem;
        },
        set(val) {
          this.$store.commit("voucher/update_list_accitem", val)
        }
      }
    },
    methods: {
      convertMoney(money){
          return one_money(money)
      },
      async openAccountDialog(data) {
        await this.$store.dispatch("voucher/getVoucherDetailItem", { 
          PRDirectID: data.PaymentVoucherDetailPurchaseRequestDirectID 
        })

        this.$store.dispatch("voucher/searchAccountItem", {search: ''})
        this.dialog_account_item = true
      },
      simpanKasir() {
        let details = this.xdetails
        let isIncomplete = false
        let message = 'Acoount item belum terisi pada : '
        details.forEach(element => {
          if (element.PurchaseRequestDirectAccountFilled == 'N') {
            message = message + element.PurchaseRequestDirectNumber
            isIncomplete = true
          }
        });

        if (isIncomplete) {
          this.$store.commit("voucher/update_alert_error", true);
          this.$store.commit("voucher/update_error_message", message);
          return
        }

        this.$store.dispatch("voucher/moveTokasir")
      }
    },
    watch: {
        
    }
}
</script>