<template>
    <v-layout class="fill-height" column>
        <v-toolbar dark color="primary">
            <v-toolbar-title class="white--text"
                >DAFTAR ORDER SPK</v-toolbar-title
            >
        </v-toolbar>
       <v-card class="mb-2 pa-2 searchbox">
          <v-layout align-center row>
            <v-flex xs6 pa-1>
                <v-menu class="xs4 pl-2"
                    v-model="menufilterdateend"
                    :close-on-content-click="false"
                    :nudge-right="40"
                    lazy
                    transition="scale-transition"
                    offset-y
                    full-width
                    max-width="290px"
                    min-width="290px"
                    >
                    <template v-slot:activator="{ on }">
                        <v-text-field
                        v-model="filterComputedDateFormattedEnd"
                        label="Tanggal spk"
                        outline
                        readonly
                        hide-details
                        v-on="on"
                        @blur="date = deFormatedDate(filterComputedDateFormattedEnd)"
                        ></v-text-field>
                    </template>
                    <v-date-picker v-model="xdate" no-title @input="menufilterdateend = false"></v-date-picker>
                </v-menu>
            </v-flex>
             <v-flex xs6 pa-1>
                <v-text-field                        
                   v-model="spk_search"
                   label="Cari"
                   outline
                   placeholder="Ketikkan no spk atau no lab"
                   hide-details
                ></v-text-field>
             </v-flex>
             <v-flex pa-1>
                <v-btn
                    dark
                    color="primary"
                    style="min-width: 50px; height: 50px; margin: 0"
                    @click="searchTransaction()"
                >
                <v-icon>search</v-icon>
                </v-btn>
             </v-flex>
          </v-layout>
       </v-card>
       <v-card >
          <v-layout row>
             <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                <v-data-table 
                   :headers="headers" 
                   :items="xtransactions"
                   :loading="isLoading"
                   hide-actions
                    class="elevation-1">
                   <template slot="items" slot-scope="props">
                      <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.SpkHomeServiceDate }}</td>
                      <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.SpkHomeServiceNumber }}</td>
                      <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_OrderHeaderLabNumber }}</td>
                      <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_PatientName }}</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>
        <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()" @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
        <one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="closeDialogInfo()"></one-dialog-info>
    </v-layout>
 </template>
 
 <style scoped>
 .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;
 }
 
 </style>
 
 <script>
 module.exports = {
 components : {
       'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
       'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
    },
    mounted() {
       this.$store.dispatch("receive/search",{
          date: this.xdate,
          search: this.spk_search,
          current_page: 1,
          lastid: -1
       })
    },
    methods : {
       isSelected(p) {
          return p.SpkHomeServiceOrderID == this.$store.state.receive.selected_transaction.SpkHomeServiceOrderID
       },
       selectMe(data) {
            this.$store.commit("receive/update_selected_transaction", data)
            this.$store.dispatch("receive/getsample", {
                orderheaderID: data.SpkHomeServiceOrderT_OrderHeaderID
            })
       },
       searchTransaction() {
            this.$store.dispatch("receive/search", {
                date: this.xdate,
                search: this.spk_search,
                current_page: 1,
                lastid: -1
            })
            this.$store.commit("receive/update_samples", [])
       },
       openDeleteAll(value){
          this.$store.commit("receive/update_selected_transaction", value)
          let msg = "Yakin, akan menghapus data spk nomor " + this.$store.state.receive.selected_transaction.SpkHomeServiceNumber + " ?"
          this.$store.commit("receive/update_msg_confirmation_delete", msg)
          this.$store.commit("receive/update_dialog_confirmation_delete", true)
       },
       doDeleteData() {
          var prm = {}
          prm.spkHomeServiceId = this.$store.state.receive.selected_transaction.SpkHomeServiceID
          prm.number = this.$store.state.receive.selected_transaction.SpkHomeServiceNumber
          console.log(prm)
          this.$store.dispatch("form/deleteOrder",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')}`
       },
       editRowOrder(item) {
          // console.log('edit data', item)
        //   this.$store.commit("service/update_act", 'edit')
        //   this.$store.commit("service/update_no_save", 0)
        //   this.$store.commit("form/update_trx_id", item.SpkHomeServiceID)
        //   this.$store.commit("form/update_transaction_date", this.formatDate(item.SpkHomeServiceDate))
        //   this.$store.commit("service/update_selected_transaction", item)
        //   this.$store.commit("form/update_save_hide", true);
        //   this.$store.dispatch("form/getorderbyid",{spkHomeServiceId: item.SpkHomeServiceID, current_page: 1})
        //   this.$store.dispatch("form/getstaff", {spkHomeServiceId: item.SpkHomeServiceID })
        //   this.$store.dispatch("form/getstaffbyid",{spkHomeServiceId: item.SpkHomeServiceID })
       },
       closeAlertConfirmation(){
           this.$store.commit("service/update_open_alert_confirmation",false)
       },
       forgetAlertConfirmation(){
           this.$store.commit("service/update_no_save",0)
           this.$store.commit("service/update_open_alert_confirmation",false)
       },
       updateAlert_success(val){
          this.$store.commit("service/update_alert_success",val)
       },
       closeDialogInfo(){
             this.$store.commit("service/update_open_dialog_info",false)
       }
    },
    computed: {
       opendialoginfo: {
          get() {
             return this.$store.state.receive.open_dialog_info
          },
          set(val) {
             this.$store.commit("receive/update_open_dialog_info", false)
          }
       },
       msginfo(){
             return this.$store.state.receive.msg_info
       },
       xtransactions() {
          return this.$store.state.receive.transactions
       },
       curr_page: {
          get() {
             return this.$store.state.receive.current_page
          },
          set(val) { 
             this.$store.commit("receive/update_current_page",val)
             this.$store.dispatch("receive/search",{
                date: this.xdate,
                search: '',
                current_page: val,
                lastid:-1
             })
          }
       },
       xtotal_page: {
          get() {
             return this.$store.state.receive.total_page
          },
          set(val) {
             this.$store.commit("receive/update_total_page",val)
          }
       },
       spk_search : {
          get() {
             return this.$store.state.receive.spk_search
          },
          set(val) {
             this.$store.commit("receive/update_spk_search",val)
          }
       },
       isLoading() {
          return this.$store.state.receive.search_transaction == 1
       },
       snackbar: {
          get() {
             return this.$store.state.receive.alert_success
          },
          set(val) {
             this.$store.commit("receive/update_alert_success",val)
          }
       },
       openalertconfirmation: {
          get() {
             return this.$store.state.receive.open_alert_confirmation
          },
          set(val) {
             this.$store.commit("receive/update_open_alert_confirmation",val)
          }
       },
        filterComputedDateFormattedEnd () {
            return this.formatDate(this.xdate)
        },
        xdate:{
            get() {
                return this.$store.state.receive.transaction_date
            },
            set(val) {
                this.$store.commit("receive/update_transaction_date",val)
            }
        },
    },
    data() {
       return {
          msgalertconfirmation:"Perubahan yang telah dilakukan belum disimpan dong !",
          date: new Date().toISOString().substr(0, 10),
          menufilterdateend:false,
          name: '',
          page:1,
          headers: [
             {
                text: "TANGGAL",
                align: "center",
                sortable: false,
                width: "20%",
                class: "pa-2 blue lighten-3 white--text"
             },
             {
                text: "NOMOR SPK",
                align: "center",
                sortable: false,
                width: "20%",
                class: "pa-2 blue lighten-3 white--text"
             },
             {
                text: "NOMOR LAB",
                align: "center",
                sortable: false,
                width: "20%",
                class: "pa-2 blue lighten-3 white--text"
             },
             {
                text: "NAMA",
                align: "center",
                sortable: false,
                width: "40%",
                class: "pa-2 blue lighten-3 white--text"
             }
          ]
       };
    }
 }
 </script>
 