<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_cashier.PaymentVoucherNumber
                          }}</span>
                        </div>
                      </v-flex>
                      <v-flex xs12>
                        <div>
                          <span>Sumber Dana  : </span>
                          <span>{{
                                selected_cashier.CoaSource
                          }}</span>
                        </div>
                      </v-flex>

                      <!-- <v-flex xs12>
                        <div>
                          <span>Biaya : </span>
                          <span>{{
                            selected_cashier.CoaExpense
                          }}</span>
                        </div>
                      </v-flex> -->

                      <v-flex xs12>
                        <div>
                          <span>Tampungan Sementara : </span>
                          <span>{{
                            selected_cashier.CoaTemporary
                          }}</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.index + 1 }}
                        </td>
                        <td class="text-xs-left pa-2">
                          {{ props.item.M_UserUsername }}
                        </td>
                        <td class="text-xs-left pa-2">
                          {{ props.item.PurchaseRequestDirectNumber }}
                        </td>
                        <td class="text-xs-left pa-2">
                          Rp
                          {{
                            convertMoney(props.item.PaymentVoucherDetailTotal)
                          }}
                        </td>
                        <td class="text-xs-left pa-2">
                          <p v-for="value in splitArray(props.item.account_biaya)" class="mb-0">
                            {{ value == 'notset'? '-' : value }}
                          </p>
                        </td>
                      </template>
                    </v-data-table>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
      </v-flex>
        </v-layout>
    </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: {

    },
    data() {
        return {
            headers: [
                {
                    text: "NO",
                    align: "left",
                    sortable: false,
                    value: "no",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "USER REQUEST",
                    align: "left",
                    sortable: false,
                    value: "no",
                    width: "15%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "NO REQUEST",
                    align: "left",
                    sortable: false,
                    value: "request",
                    width: "30%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "TOTAL",
                    align: "left",
                    sortable: false,
                    value: "total",
                    width: "20%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "ACCOUNT BIAYA",
                    align: "left",
                    sortable: false,
                    value: "total",
                    width: "25%",
                    class: "blue lighten-3 white--text",
                },
            ],
        }
    },
    mounted() {

    },
    computed: {
      xdetails() {
        return this.$store.state.cashier.details;
      },
      isLoading() {
          return this.$store.state.cashier.search_status_detail === 1;
      },
      selected_cashier: {
          get() {
              return this.$store.state.cashier.selected_cashier;
          },
          set(val) {
              this.$store.commit("cashier/update_selected_cashier", val);
          },
      },
    },
    methods: {
        convertMoney(money){
            return one_money(money)
        },
        splitArray(data) {
          const list = data.split(';').map(part => part.trim())
          return list
        }
    },
    watch: {
        
    }
}
</script>