<template>
   <v-layout class="fill-height" column>
   <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="Nomor"
                             single-line
                             outline
                             v-model="searchnamelab"
                             hide-details
                             ></v-text-field>

               <v-select class="xs3 mini-select ma-1" :items="statuses"
                  item-text="name"
                  return-object
                  v-model="status"
                  label="Status" outline   hide-details></v-select>
            <span @click="searchClose"  class="icon-medium-fill-base xs1 white--text success iconsearch-search"></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  " @click="selectMe(props.item)"  >{{ props.item.F_PaymentKasirDate }}</td>
                     <td class="text-xs-left pa-2  "   @click="selectMe(props.item)" >{{ props.item.F_PaymentKasirNumber}}</td>
                     <!--<td class="text-xs-left pa-2  "  @click="selectMe(props.item)"  >{{ props.item.F_PaymentKasirIsReceived}}</td>-->
                     <td class="text-xs-left pa-2  "  @click="selectMe(props.item)"  >{{ props.item.M_StaffName}}</td>
                   <td class="text-xs-left pa-2  " @click="selectMe(props.item)"  >
                     <span @click="printControlCard(props.item)" class="icon-medium-fill-base xs1 white--text grey darken-1  ml-1 icon-print"></span>
                      </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="fill-height" >
       <v-layout row >
          <v-flex  pl-2 pr-2 pt-2 pb-2 >

              <v-card-text >
              <object style="overflow: hidden;" width="100%" :height="xheight" :data="xurl"></object>
              </v-card-text>

              <v-divider></v-divider>

              <v-card-actions>
              <v-spacer></v-spacer>

              <v-btn color="primary" flat onClick="window.location.reload();"   @click="savetutup()" >
                  TUTUP
              </v-btn>
              </v-card-actions>

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


<!--
    <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote" :urlprint="urlprintnote" @close-dialog-print="openprintnote = false"></one-dialog-print>
-->
   </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;
}

.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,
            status: this.status.value,
            current_page:1,
            lastidx:0
         })
   },
   methods : {


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

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

        })
   },

      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.T_OrderHeaderID == this.$store.state.close.selected_close.T_OrderHeaderID
      },
      searchClose() {
         this.$store.dispatch("close/search",{
            startdate:this.xstartdate,
            enddate:this.xenddate,
            search:this.searchnamelab,
            status: this.status.value,
            current_page:1,
            lastidx:0
         })
      },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
   }
   },

      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)
         }
      },
      searchnamelab:{
         get() {
               return this.$store.state.close.search
         },
         set(val) {
               this.$store.commit("close/update_search",val)
         }
      },
      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
      },

      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)
         }
      },
   },
   data() {
      return {
      xheight:400,
        xurl:'',
          items: [],
         menustartdate:false,
         menuenddate:false,
         dialog:false,
         urlprintnote:'',
         printtitle:'',
         printwidth:'90%',
         headers: [
            {
               text: "TANGGAL",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NO TRX",
               align: "left",
               sortable: false,
               value: "lab",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            },

            {
               text: "NAMA FO",
               align: "left",
               sortable: false,
               value: "name",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "ACTION",
               align: "left",
               sortable: false,
               value: "name",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
      }
   }
}
</script>
