<template>
   <v-layout class="fill-height" column>
           <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote" :urlprint="urlprintnote"
            @close-dialog-print="openprintnote = false"></one-dialog-print>
         <!-- alert dialog start -->
        <v-dialog v-model="dialogsuccess" persistent max-width="290">
            <v-card>
                <v-card-title color="success" class="headline">Berhasil !</v-card-title>
                <v-card-text>
                    {{msgsuccess}}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- alert dialog end -->


        <!-- alert dialog error start -->
        <v-dialog v-model="dialogerror" persistent max-width="290">
            <v-card>
                <v-card-title color="error" class="headline">Error !</v-card-title>
                <v-card-text>
                    {{msgerror}}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" flat @click="closeDialogError">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- alert dialog error end -->

        <!-- dialog confirmation start -->
        <v-dialog v-model="dialogconfirmationdelete" persistent max-width="290">
            <v-card>
                <v-card-title dark class="headline error pt-2 pb-2" primary-title style="color:white">
                    <h4 dark>Konfirmasi</h4>
                </v-card-title>
                <v-card-text>
                    {{msgconfirmationdelete}}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn small color="error darken-1 text-sm-left" flat @click="doDeleteData()">Hapus</v-btn>
                    <v-btn small color="primary darken-1 text-sm-right" flat @click="dialogconfirmationdelete = false">Batal</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- dialog confirmation end -->

        <!-- dialog add start -->
        <v-dialog v-model="dialogadd" persistent max-width="900">
            <v-card>
                <v-card-title dark class="headline primary pt-2 pb-2" primary-title style="color:white; display: flex; justify-content: space-between;">
                    <h4 dark>Voucher</h4>
                    <!-- <v-btn icon @click="dialogadd = false" class="pt-2 pb-2" style="color: white;">
                        <v-icon>close</v-icon>
                    </v-btn> -->
                    <v-btn icon @click="closeForm()" class="pt-2 pb-2" style="color: white;">
                        <v-icon>close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                    <v-layout row wrap>
                        <!-- left start -->
                        <v-flex xs12 pa-2>
                            <v-layout>
                            <v-flex xs6 pa-2>
                            <v-text-field
                                color="black"
                                label="Nama Voucher"
                                v-model="inp_VoucherHeaderName"
                                single-line
                                hide-details
                            ></v-text-field>
                            <p  v-if="_.isEmpty(inp_VoucherHeaderName)" class="error caption mt-1 mb-0 pl-2 pr-2 pb-2" style="color:#fff">Belum isi nama voucher</p>
                            <!-- nama voucher -->   
                            </v-flex>
                            <v-flex xs6 pa-2>
                            <!-- prefix -->
                            <v-text-field
                                color="black"
                                label="Kode(Awalan)"
                                v-model="inp_VoucherHeaderPrefix"
                                single-line
                                hide-details
                            ></v-text-field>
                            <p  v-if="_.isEmpty(inp_VoucherHeaderPrefix)" class="error caption mt-1 mb-0 pl-2 pr-2 pb-2" style="color:#fff">Belum isi prefix</p>
                            </v-flex>
                            </v-layout>
                            <v-layout>
                            <v-flex xs6 pa-2>
                            <v-text-field
                                color="black"
                                label="Nilai Voucher (Rp)"
                                v-model="inp_VoucherHeaderAmount"
                                single-line
                                hide-details
                            ></v-text-field>
                            <p  v-if="_.isEmpty(inp_VoucherHeaderAmount)" class="error caption mt-1 mb-0 pl-2 pr-2 pb-2" style="color:#fff">Belum isi nilai voucher</p>
                            </v-flex>
                            <v-flex xs6 pa-2>
                            <!-- nilai voucher -->
                            <!-- prefix -->
                            <v-text-field
                                color="black"
                                label="Jumlah Cetak Voucher"
                                v-model="inp_VoucherHeaderQty"
                                single-line
                                hide-details
                            ></v-text-field>
                            <p  v-if="_.isEmpty(inp_VoucherHeaderQty)" class="error caption mt-1 mb-0 pl-2 pr-2 pb-2" style="color:#fff">Belum isi jumlah cetak voucher</p>
                            </v-flex>
                            </v-layout>
                        <v-layout>
                            <!-- tgl start date -->
                            <v-flex xs6 pt-2>
                                <v-menu 
                                    v-model="menufilterdatestart"
                                    :close-on-content-click="false"
                                    :nudge-right="40"
                                    lazy
                                    transition="scale-transition"
                                    offset-y
                                    hide-details
                                    full-width
                                    max-width="290px"
                                    min-width="290px"
                                    >
                                    <template v-slot:activator="{ on }">
                                        <v-text-field
                                        
                                        v-model="filterComputedDateFormattedStart"
                                        label="Tanggal Awal"
                                        style="font-size:14px"
                                        hide-details
                                        readonly
                                        v-on="on"
                                        @blur="date = deFormatedDate(filterComputedDateFormattedStart)"
                                        ></v-text-field>
                                    </template>
                                    <v-date-picker 
                                        :disabled="xact === 'edit'" 
                                        v-model="xdatestart" no-title @input="menufilterdatestart = false"
                                    ></v-date-picker>
                                </v-menu>
                            </v-flex>
                            <!-- tgl start date -->

                            <!-- tgl end date -->
                            <v-flex xs6 pt-2>
                                <v-menu 
                                    v-model="menufilterdateend"
                                    :close-on-content-click="false"
                                    :nudge-right="40"
                                    lazy
                                    transition="scale-transition"
                                    offset-y
                                    full-width
                                    hide-details
                                    max-width="290px"
                                    min-width="290px"
                                    >
                                    <template v-slot:activator="{ on }">
                                        <v-text-field
                                        
                                        v-model="filterComputedDateFormattedEnd"
                                        label="Tanggal Akhir"
                                        style="font-size:14px"
                                        readonly
                                        hide-details
                                        v-on="on"
                                        @blur="date = deFormatedDate(filterComputedDateFormattedEnd)"
                                        ></v-text-field>
                                    </template>
                                    <v-date-picker 
                                        :disabled="xact === 'edit'" 
                                        :min="xdatestart" v-model="xdateend" no-title @input="menufilterdateend = false"
                                    ></v-date-picker>
                                </v-menu>
                            </v-flex>
                            <!-- tgl end date --> 
                            </v-layout>
                            <!-- prefix -->
                            <v-text-field
                                color="black"
                                label="Catatan"
                                v-model="inp_VoucherHeaderNote"
                                single-line
                                hide-details
                            ></v-text-field>        
                    </v-layout>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="blue darken-1" flat @click="closeForm()">Tutup</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn v-if="!_.isEmpty(inp_VoucherHeaderName)
                        && !_.isEmpty(inp_VoucherHeaderPrefix)
                        && !_.isEmpty(inp_VoucherHeaderAmount)
                        && !_.isEmpty(inp_VoucherHeaderQty)
                        && act == 'new'"
                        color="blue darken-1" flat @click="saveData()">Simpan</v-btn>

                    <v-btn v-if="!_.isEmpty(inp_VoucherHeaderName)
                        && !_.isEmpty(inp_VoucherHeaderPrefix)
                        && !_.isEmpty(inp_VoucherHeaderAmount)
                        && !_.isEmpty(inp_VoucherHeaderQty)
                        && act == 'edit'"
                        color="blue darken-1" flat @click="saveData()">Simpan Perubahan</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- dialog add end -->
   <v-layout row wrap >
      <v-flex xs6 class="left" fill-height pa-1>
      <v-card  class=" mb-2 pa-2 searchbox"  >
         <v-layout >
               <v-menu
                  ref="menustartdate"
                  v-model="menustartdate"
                  :close-on-content-click="false"
                  :nudge-right="0"
                  lazy
                  transition="scale-transition"
                  offset-y
                  full-width
                  max-width="290px"
                  min-width="290px"
                  >
                  <template v-slot:activator="{ on }">
                     <v-text-field
                     v-model="startDateFormatted"
                     label="Tanggal Awal"
                     readonly
                     hide-details
                     class="xs3 ma-1"
                     outline
                     v-on="on"
                     @blur="deFormatedDate(startDateFormatted)"
                     ></v-text-field>
                  </template>
                  <v-date-picker v-model="xstartdate" no-title @input="menustartdate = false"></v-date-picker>
               </v-menu>

               <v-menu
                  ref="menuenddate"
                  v-model="menuenddate"
                  :close-on-content-click="false"
                  :nudge-right="0"
                  lazy
                  transition="scale-transition"
                  offset-y
                  full-width
                  max-width="290px"
                  min-width="290px"
                  >
                  <template v-slot:activator="{ on }">
                     <v-text-field
                     v-model="endDateFormatted"
                     label="Tanggal Akhir"
                     hide-details
                     outline
                     class="xs3 ma-1"
                     readonly
                     v-on="on"
                     @blur="deFormatedDate(endDateFormatted)"
                     ></v-text-field>
                  </template>
                  <v-date-picker v-model="xenddate" no-title @input="menuenddate = false"></v-date-picker>
               </v-menu>

               <v-text-field class="xs3 ma-1"
                             label=""
                             placeholder="No. Prefix / Nama Voucher"
                             single-line
                             outline
                             v-model="searchnamelab"
                             hide-details
                             ></v-text-field>

            <span @click="searchClose"  class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>
            <span @click="openVoucher"
                        class="icon-medium-fill-base xs1 white--text primary  ml-1 icon-add"></span>
         </v-layout>
      </v-card>

      <v-card  >
         <v-layout  row >
            <v-flex  pl-2 pr-2 pt-2 pb-2 >
               <v-data-table
                  :headers="headers"
                  :items="closes"
                  :loading="isLoading"
                  hide-actions class="elevation-1">
                  <template slot="items" slot-scope="props">
                     <td :class="['text-xs-left pa-2', { 'row-selected': isSelected(props.item) }]" @click="selectMe(props.item)"  >{{ props.item.periode }}</td>
                     <td :class="['text-xs-left pa-2', { 'row-selected': isSelected(props.item) }]" @click="selectMe(props.item)" >{{ props.item.VoucherHeaderName}}
                     <p style="color:#800000" class="mb-0 font-weight-bold caption">{{ props.item.VoucherHeaderPrefix}} ({{ props.item.VoucherHeaderQty}}) </p></td>
                     <td :class="['text-xs-left pa-2', { 'row-selected': isSelected(props.item) }]" @click="selectMe(props.item)"  >{{ convertMoney(props.item.VoucherHeaderAmount)}}</td>
                     <td :class="['text-xs-left pa-2', { 'row-selected': isSelected(props.item) }]" @click="selectMe(props.item)"  >{{ props.item.VoucherHeaderNote}}</td>
                   <td :class="['text-xs-left pa-2', { 'row-selected': isSelected(props.item) }]" @click="selectMe(props.item)"  >
                   <v-btn v-if="props.item.isused == 'N'"
                                    style="min-width:25px; margin:0" color="info"
                                    @click="editData(props.item)" small
                                >
                                    <v-icon small>edit</v-icon>
                                </v-btn>
                                <v-btn 
                                    style="min-width:25px; margin:0" color="grey"
                                    @click="printControlCard(props.item)" small
                                >
                                    <v-icon small>print</v-icon>
                                </v-btn>
                    </td>
                      </template>
               </v-data-table>
               <v-divider></v-divider>
               <v-pagination
                  style="margin-top:10px;margin-bottom:10px"
                  v-model="curr_page"
                  :length="xtotal_page"


               ></v-pagination>
            </v-flex>
         </v-layout>
      </v-card>

      </v-flex>


   <v-flex xs6 class="right" fill-height pa-1>
      <v-card  class=" mb-2 pa-2 searchbox"  >
         <v-layout column>
            <v-layout row wrap align-center class="mb-2">
               <v-flex xs8 class="pa-1">
                  <v-autocomplete
                     label="Filter Voucher (Nama/Prefix)"
                     v-model="selected_voucher_header"
                     :items="voucher_header_options"
                     :search-input.sync="voucherFilterSearch"
                     no-filter
                     hide-details
                     outline
                     dense
                     return-object
                     item-text="displayLabel"
                     :loading="voucher_header_loading"
                     clearable
                     no-data-text="Ketik untuk cari voucher..."
                     placeholder="Ketik nama/prefix voucher..."
                     @change="onVoucherFilterChange"
                  >
                     <template slot="item" slot-scope="{ item }">
                        <v-list-tile-content>
                           <v-list-tile-title v-text="item.displayLabel"></v-list-tile-title>
                           <v-list-tile-sub-title v-if="item.periode" v-text="item.periode"></v-list-tile-sub-title>
                        </v-list-tile-content>
                     </template>
                  </v-autocomplete>
               </v-flex>
               <v-flex xs4 class="pa-1 pt-0 mt-0">
                  <v-select
                     v-model="detail_status_value"
                     :items="detail_statuses"
                     item-text="name"
                     item-value="value"
                     placeholder="Status"
                   hide-details
                     outline
                     
                     @change="onStatusChange"
                  ></v-select>
               </v-flex>
            </v-layout>
            <v-layout >
               <v-text-field class="xs3 ma-1"
                             label=""
                             placeholder="Nomor Voucher / Nomor Lab"
                             single-line
                             outline
                             v-model="searchnolab"
                             hide-details
                             ></v-text-field>

            <span @click="searchDetail"  class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>
            
         </v-layout>
         </v-layout>
      </v-card>

      <v-card  >
         <v-layout  row >
            <v-flex  pl-2 pr-2 pt-2 pb-2 >
               <v-data-table
                  :headers="headersdetail"
                  :items="xvouchersdetails"
                  :loading="isLoading"
                  hide-actions class="elevation-1">
                  <template slot="items" slot-scope="props">
                     <td style="width:10px" class="text-xs-left">{{props.item.VoucherDetailNumber}}</td>
                                    <td style="width:10px" class="text-xs-left">{{props.item.statusvoucher}}</td>
                                    <td class="text-xs-left pa-2">{{ props.item.T_OrderHeaderLabNumber}}
                                        <p style="color:#800000" class="mb-0 font-weight-bold caption">{{ props.item.T_OrderHeaderDate}}</p>
                                    </td>
                      </template>
               </v-data-table>
               <v-divider></v-divider>
               <v-pagination
                  style="margin-top:10px;margin-bottom:10px"
                  v-model="curr_page_detail"
                  :length="xtotal_page_detail"


               ></v-pagination>
            </v-flex>
         </v-layout>
      </v-card>

      </v-flex>
   </v-layout>

   </v-layout>
</template>

<style scoped>


span.xtd {
   margin-right:10px;
}
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:40px;
}
.searchbox .v-btn {
   min-height:40px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

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

td.row-selected {
   background-color: #e3f2fd !important;
}

.v-messages{
   min-height:0px!important;
}

</style>

<script>
module.exports = {
components : {'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
   },
   mounted() {
      this.$store.dispatch("close/search",{
            startdate:this.xstartdate,
            enddate:this.xenddate,
            search: this.searchnamelab,
            current_page:1,
            lastidx:0
         })

     this.$store.dispatch("close/searchdetail",{
            search: this.searchnolab,
            current_page: 1,
            ID: 0,
            status: this.$store.state.close.detail_status_value || ''
         })
   },
   methods : {
    convertMoney(money) {
                return one_money(money)
            },  
            printControlCard(val) {
                this.printwidth = 1200
                this.printtitle = ""
                let user = one_user()
                var rpt = 'rpt_hs_001'
                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
                    user.M_UserUsername + "&PID=" + val.VoucherHeaderID
                this.$store.commit("close/update_open_print_note", true)
            },
   openVoucher(){    
                this.$store.commit("close/update_act", 'new')
                this.$store.commit("close/update_xid", 0)
                this.$store.commit("close/update_dialog_add", true)
                this.$store.commit("close/update_inp_VoucherHeaderName", '')
                this.$store.commit("close/update_inp_VoucherHeaderPrefix", '')
                this.$store.commit("close/update_inp_VoucherHeaderAmount", '')
                this.$store.commit("close/update_inp_VoucherHeaderQty", '')
                this.$store.commit("close/update_inp_VoucherHeaderNote", '')
                this.$store.commit("close/update_datestart", moment(new Date()).format('YYYY-MM-DD'))
                this.$store.commit("close/update_dateend", moment(new Date()).format('YYYY-MM-DD'))
            },
            editData(data){    
                this.$store.commit("close/update_act", 'edit')
                this.$store.commit("close/update_xid", data.VoucherHeaderID)
                this.$store.commit("close/update_dialog_add", true)

                this.$store.commit("close/update_inp_VoucherHeaderName", data.VoucherHeaderName)
                this.$store.commit("close/update_inp_VoucherHeaderPrefix", data.VoucherHeaderPrefix)
                this.$store.commit("close/update_inp_VoucherHeaderAmount", data.VoucherHeaderAmount)
                this.$store.commit("close/update_inp_VoucherHeaderQty", data.VoucherHeaderQty)
                this.$store.commit("close/update_inp_VoucherHeaderNote", data.VoucherHeaderNote)
                this.$store.commit("close/update_datestart", data.VoucherHeaderStartDate)
                this.$store.commit("close/update_dateend", data.VoucherHeaderEndDate)
            },
            closeForm(){
                this.$store.commit("close/update_inp_T_PacketName", "")
                this.$store.commit("close/update_dialog_add", false)
            },
            closeDialogSuccess() {
                this.$store.commit("close/update_dialog_success", false)
            },
            closeDialogError() {
                this.$store.commit("close/update_dialog_error", false)
            },
            doDeleteData() {
                this.$store.commit("close/update_dialog_confirmation_delete", false)
            },

   selectMe(pat) {
      this.$store.commit("close/update_selected_close", pat)
      this.$nextTick(() => this.searchDetail())
   },

   savetutup() {
        this.$store.dispatch("close/savetutup",{
        pPaymentKasirID:this.F_PaymentKasirID,
        pUserID:JSON.parse(localStorage.getItem('user')).M_UserID

        })
   },
   saveData() {
                var prm = {
                    xid:this.$store.state.close.xid,
                    act:this.$store.state.close.act,
                    VoucherHeaderName:this.$store.state.close.inp_VoucherHeaderName,
                    VoucherHeaderPrefix:this.$store.state.close.inp_VoucherHeaderPrefix,
                    VoucherHeaderAmount:this.$store.state.close.inp_VoucherHeaderAmount,
                    VoucherHeaderQty:this.$store.state.close.inp_VoucherHeaderQty,
                    VoucherHeaderNote:this.$store.state.close.inp_VoucherHeaderNote,
                    VoucherHeaderStartDate: this.$store.state.close.datestart,
                    VoucherHeaderEndDate: this.$store.state.close.dateend,
                    lastid: -1
                };

                // console.log('inputan ',prm)
                this.$store.dispatch("close/saveData", prm)
            },
      formatDate (date) {
          if (!date) return null

          const [year, month, day] = date.split('-')
          return `${day}-${month}-${year}`
      },
      deFormatedDate (date) {
          if (!date) return null

      const [ day,month, year] = date.split('-')
      return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      },
      isSelected(p) {
         return p.VoucherHeaderID == this.$store.state.close.selected_close.VoucherHeaderID
      },
      searchClose() {
         this.$store.dispatch("close/search",{
            startdate:this.xstartdate,
            enddate:this.xenddate,
            search:this.searchnamelab,
            status: this.status.value,
            current_page:1,
            lastidx:0
         })
      },
      searchDetail() {
         this.$store.commit("close/update_current_page_detail", 1)
         var state = this.$store.state.close
         var id = state.detail_filter_voucher_id || (state.selected_close && state.selected_close.VoucherHeaderID) || 0
         id = id ? Number(id) : 0
         var statusVal = state.detail_status_value || ''
         this.$store.dispatch("close/searchdetail", {
            search: this.searchnolab,
            current_page: 1,
            ID: id,
            status: statusVal
         })
      },
      thr_search_voucher: _.debounce(function () {
         var q = this.$store.state.close.voucher_header_search || ''
         if (q.length < 2) {
            this.$store.commit("close/update_voucher_header_options", [])
            return
         }
         try {
            this.$store.dispatch("close/searchVoucherHeaders", {
               startdate: this.xstartdate,
               enddate: this.xenddate,
               search: q,
               current_page: 1
            })
         } catch (e) {}
      }, 500),
      onVoucherFilterChange() {
         this.searchDetail()
      },
      fetchVoucherHeaders(search) {
         try {
            this.$store.dispatch("close/searchVoucherHeaders", {
               startdate: this.xstartdate,
               enddate: this.xenddate,
               search: search || '',
               current_page: 1
            })
         } catch (e) {}
      },
      onStatusChange() {
         this.searchDetail()
      },
      printControlCard(value){
          this.printwidth = 800
          this.printtitle = ""
          let idx = value.F_PaymentKasirID
          let user = one_user()
          var tm = new Date()
          this.xurl  = "/birt/run?__report=report/one/rekap/rpt_r_011.rptdesign&__format=pdf&username="+user.M_UserUsername+"&PID="+idx+"&tm="+tm
          this.$store.commit("close/update_open_print_note",true)
          this.$store.commit("close/update_selected_paymentkasir_id",value.F_PaymentKasirID)
      }
   },
   computed: {
   F_PaymentKasirID :{
   get() {
         return this.$store.state.close.selected_paymentkasir_id
   }
   },
xact() {
                return this.$store.state.close.act
            },
            xid: {
                get() {
                    return this.$store.state.close.xid
                },
                set(val) {
                    this.$store.commit("close/update_xid", val)
                }
            },
            act: {
                get() {
                    return this.$store.state.close.act
                },
                set(val) {
                    this.$store.commit("close/update_act", val)
                }
            },
            dialogadd: {
                get() {
                    return this.$store.state.close.dialog_add
                },
                set(val) {
                    this.$store.commit("close/update_dialog_add", val)
                }
            },
            dialogedit: {
                get() {
                    return this.$store.state.close.dialog_edit
                },
                set(val) {
                    this.$store.commit("close/update_dialog_edit", val)
                }
            },
            dialogsuccess: {
                get() {
                    return this.$store.state.close.dialog_success
                },
                set(val) {
                    this.$store.commit("close/update_dialog_success", val)
                }
            },
            dialogerror: {
                get() {
                    return this.$store.state.close.dialog_error
                },
                set(val) {
                    this.$store.commit("close/update_dialog_error", val)
                }
            },
            msgsuccess() {
                return this.$store.state.close.msg_success || ''
            },
            msgerror() {
                return this.$store.state.close.msg_error || this.$store.state.close.search_error_message || ''
            },
            msgconfirmationdelete() {
                return this.$store.state.close.msg_confirmation_delete || ''
            },
            xstartdate:{
         get() {
               return this.$store.state.close.start_date
         },
         set(val) {
               this.$store.commit("close/update_start_date",val)
         }
      },
      xenddate:{
         get() {
               return this.$store.state.close.end_date
         },
         set(val) {
               this.$store.commit("close/update_end_date",val)
         }
      },
      xdatestart : {
                get() {
                    return this.$store.state.close.datestart
                },
                set(val) {
                    this.$store.commit("close/update_datestart",val)
                }
            },
            xdateend : {
                get() {
                    return this.$store.state.close.dateend
                },
                set(val) {
                    this.$store.commit("close/update_dateend",val)
                    //this.searchTransaction()
                }
            },
            filterComputedDateFormattedStart () {
                return this.formatDate(this.xdatestart)
            },
            filterComputedDateFormattedEnd () {
                return this.formatDate(this.xdateend)
            },
            dialogconfirmationdelete: {
                get() {
                    return this.$store.state.close.dialog_confirmation_delete
                },
                set(val) {
                    this.$store.commit("close/update_dialog_confirmation_delete", val)
                }
            },
      searchnamelab:{
         get() {
               return this.$store.state.close.search
         },
         set(val) {
               this.$store.commit("close/update_search",val)
         }
      },
      searchnolab:{
         get() {
               return this.$store.state.close.searchnolab
         },
         set(val) {
               this.$store.commit("close/update_searchnolab",val)
         }
      },
      voucher_header_options() {
         return this.$store.state.close.voucher_header_options || []
      },
      voucher_header_loading() {
         return this.$store.state.close.voucher_header_loading === true
      },
      voucherFilterSearch: {
         get() {
            return this.$store.state.close.voucher_header_search || ''
         },
         set(val) {
            if (val == null) return
            this.$store.commit('close/update_voucher_header_search', val)
         }
      },
      selected_voucher_header: {
         get() {
            return this.$store.state.close.selected_voucher_header
         },
         set(val) {
            this.$store.commit('close/update_selected_voucher_header', val)
         }
      },
      detail_statuses() {
         return this.$store.state.close.detail_statuses || []
      },
      selected_detail_status: {
         get() {
            return this.$store.state.close.selected_detail_status || { name: 'Semua', value: '' }
         },
         set(val) {
            this.$store.commit("close/update_selected_detail_status", val || { name: 'Semua', value: '' })
         }
      },
      detail_status_value: {
         get() {
            return this.$store.state.close.detail_status_value !== undefined ? this.$store.state.close.detail_status_value : ''
         },
         set(val) {
            this.$store.commit("close/update_detail_status_value", val === 'Y' || val === 'N' ? val : '')
         }
      },
      detail_filter_voucher_id() {
         return this.$store.state.close.detail_filter_voucher_id || 0
      },
      statuses(){
         return this.$store.state.close.statuses
      },
      status:{
         get() {
               return this.$store.state.close.selected_status
         },
         set(val) {
               this.$store.commit("close/update_selected_status",val)
         }
      },
      openprintnote: {
         get() {
             return this.$store.state.close.open_print_note
         },
         set(val) {
             this.$store.commit("close/update_open_print_note",false)
         }
     },
      selpat(){
          return this.$store.state.close.selected_close
      },
      startDateFormatted () {
            return this.formatDate(this.xstartdate)
      },
      endDateFormatted () {
            return this.formatDate(this.xenddate)
      },
      isLoading() {
         return this.$store.state.close.search_status == 1
      },
      closes() {
         return this.$store.state.close.closes
      },
     xvouchersdetails() {
         return this.$store.state.close.xvouchersdetails
      },
      curr_page: {
         get() {
            return this.$store.state.close.current_page
         },
         set(val) {
            this.$store.commit("close/update_current_page",val)
            this.$store.dispatch("close/search",{
                  startdate:this.xstartdate,
                  enddate:this.xenddate,
                  search: this.searchnamelab,
                  status: this.status.value,
                  current_page:val,
                  lastidx:0
            })
         }
      },
      xtotal_page: {
         get() {
            return this.$store.state.close.total_page
         },
         set(val) {
            this.$store.commit("close/update_total_page",val)
         }
      },
      curr_page_detail: {
         get() {
            return this.$store.state.close.current_page_detail
         },
         set(val) {
            this.$store.commit("close/update_current_page_detail", val)
            var state = this.$store.state.close
            var id = state.detail_filter_voucher_id || (state.selected_close && state.selected_close.VoucherHeaderID) || 0
            id = id ? Number(id) : 0
            this.$store.dispatch("close/searchdetail", {
               search: this.searchnolab,
               current_page: val,
               ID: id,
               status: state.detail_status_value || ''
            })
         }
      },
      xtotal_page_detail: {
         get() {
            return this.$store.state.close.total_page_detail
         },
         set(val) {
            this.$store.commit("close/update_total_page_detail",val)
         }
      },
      inp_VoucherHeaderName:{
                get() {
                    return this.$store.state.close.inp_VoucherHeaderName
                },
                set(val) {
                    this.$store.commit("close/update_inp_VoucherHeaderName", val)
                }
            },
            inp_VoucherHeaderPrefix:{
                get() {
                    return this.$store.state.close.inp_VoucherHeaderPrefix
                },
                set(val) {
                    this.$store.commit("close/update_inp_VoucherHeaderPrefix", val)
                }
            },
            inp_VoucherHeaderAmount:{
                get() {
                    return this.$store.state.close.inp_VoucherHeaderAmount
                },
                set(val) {
                    this.$store.commit("close/update_inp_VoucherHeaderAmount", val)
                }
            },
            inp_VoucherHeaderQty:{
                get() {
                    return this.$store.state.close.inp_VoucherHeaderQty
                },
                set(val) {
                    this.$store.commit("close/update_inp_VoucherHeaderQty", val)
                }
            },
            inp_VoucherHeaderNote:{
                get() {
                    return this.$store.state.close.inp_VoucherHeaderNote
                },
                set(val) {
                    this.$store.commit("close/update_inp_VoucherHeaderNote", val)
                }
            },
   },
   watch: {
      voucherFilterSearch(val, old) {
         if (val == null || typeof val === 'undefined') val = ''
         if (val === old) return
         if (this.$store.state.close.voucher_header_loading) return
         this.$store.commit('close/update_voucher_header_search', val)
         this.thr_search_voucher()
      }
   },
   data() {
      return {
      xheight:400,
      menufilterdatestart:false,
                menufilterdateend:false,
        xurl:'',
          items: [],
         menustartdate:false,
         menuenddate:false,
         dialog:false,
         urlprintnote:'',
         printtitle:'',
         printwidth:'90%',
         headers: [
            {
               text: "PERIODE",
               align: "center",
               sortable: false,
               value: "mr",
               width: "30%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NAMA VOUCHER",
               align: "center",
               sortable: false,
               value: "lab",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },

            {
               text: "NILAI (RP)",
               align: "center",
               sortable: false,
               value: "name",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "CATATAN",
               align: "center",
               sortable: false,
               value: "name",
               width: "30%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "ACTION",
               align: "center",
               sortable: false,
               value: "name",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
         headersdetail: [{
                    text: "NOMOR VOUCHER",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "30%",
                    class: "pa-1 blue lighten-3 white--text"
                },
                {
                    text: "STATUS",
                    align: "left",
                    sortable: false,
                    value: "lab",
                    width: "30%",
                    class: "pa-1 blue lighten-3 white--text"
                },
                {
                    text: "NOMOR ORDER",
                    align: "left",
                    sortable: false,
                    value: "lab",
                    width: "40%",
                    class: "pa-1 blue lighten-3 white--text"
                }
            ]
      }
   }
}
</script>
