<template>
    <v-card class="xs12 md12 mt-2">
    
        <v-data-table :headers="headers" :items="patients" 
        :loading="isLoading"
        hide-actions class="elevation-1">

        <template slot="no-data">
            <v-alert :value="isError" color="error" icon="warning">
               Data Pasien tidak di temukan
               {{errorMessage}}
            </v-alert>
         </template>

        <template slot="items" slot-scope="props">
            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.day }}, <br>{{ format_date(props.item.C_OrderHeaderDate) }}</td>
            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.C_OrderHeaderNumber }}</td>
            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.M_PatientNoReg }}</td>
            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.M_PatientName }}</td>
            <td class="pa-2" v-bind:class="{'amber lighten-4':props.item.selected}">
                <v-btn v-show="isStatusReg(props.item.M_StatusCode)"
                    color="blue"
                    :dark="!processed"
                    @click="processMe(props.item)"
                    :disabled="processed"
                    class="one-btn-icon"
                >
                    <span class="icon-process"></span>
                </v-btn>
                
                <v-btn v-show="isStatusProcess(props.item.M_StatusCode)"
                    color="green"
                    dark
                    @click="justProcessMe(props.item)"
                    flat
                    class="one-btn-icon"
                >
                    <span class="icon-process"></span>
                </v-btn>

                <template v-show="isStatusFinish(props.item.M_StatusCode)">
                    
                    <v-menu offset-y 
                        v-model="patients[props.index].vmenu"
                        :position-x="x"
                        :position-y="y"
                        absolute>
                        
                        <v-list>
                            <v-list-tile
                            v-for="(item, index) in patients[props.index].menu_items"
                            :key="index"
                            class="ml0 mr0"
                            v-show="show_btn_print(item.code, props.item.C_OrderHeaderIsLab)"
                            >
                            <!-- <v-list-tile-title>
                                {{ item.title }}
                                </v-list-tile-title> -->
                                <v-btn
                                    color="orange"
                                    flat
                                    class="ma-0 text-md-left"
                                    block
                                    small
                                    @click="print_me(item.code, props.item.C_OrderHeaderID)"
                                    outline
                                >
                                    {{ item.title }}
                                </v-btn>
                            </v-list-tile>
                        </v-list>
                    </v-menu>
                </template>
                
                <v-btn v-show="isStatusFinish(props.item.M_StatusCode)"
                    color="orange"
                    dark
                    @click="trigger_vmenu(props.index, $event)"
                    
                >
                    CETAK
                </v-btn>
                </td>
            
        </template>
        
        </v-data-table>
        <one-fo-clinic-poly-confirm-process-dialog></one-fo-clinic-poly-confirm-process-dialog>
    </v-card>
    
</template>

<style scoped>
    table.v-table tbody td,table.v-table tbody th {
        height: 30px;
    }

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

    div.v-list__tile.theme--light {
        padding: 0px !important;
    }

    .v-btn { margin: 0px }

    .one-btn-icon { min-width: 0px !important }
</style>

<script>
module.exports = {
    components : {
        'one-fo-clinic-poly-confirm-process-dialog' : httpVueLoader('./oneFoClinicPolyConfirmProcessDialog.vue')
    },

    data() {
        return {
            x: 0,
            y: 0,
            on: false,
            query: "",
            headers: [
                {
                    text: "TANGGAL",
                    align: "left",
                    sortable: false,
                    value: "date",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NO REGISTRASI",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NO RM",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NAMA",
                    align: "left",
                    sortable: false,
                    value: "name",
                    width: "40%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "ACTION",
                    align: "left",
                    sortable: false,
                    value: "name",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                }
            ],

            

            menu_items: [
                { code: '01', title: 'Cetak Resep Obat' },
                { code: '02', title: 'Cetak Antrian Lab' },
                { code: '03', title: 'Click Resume Pasien' }
            ]
        };
    },

    computed : {
        isError() {
            // return true;
         return this.$store.state.patient.search_status == 3
      },
      errorMessage() {
         return this.$store.state.patient.search_error_message 
      },
      isLoading() {
         return this.$store.state.patient.search_status == 1
      },
      patients() {
         return this.$store.state.patient.patients
      },
      total() {
         return this.$store.state.patient.total_patient
      },
      processed : {
          get () {
              return this.$store.state.order.processed
          },
          set (v) {
              this.$store.commit('order/update_processed', v)
              return
          }
      }
    },

    methods : {
        selectMe (a) {
            a.mr = a.M_PatientNoReg;
            a.name = a.M_PatientName;
            a.phone = a.M_PatientHP;
            a.dob = a.M_PatientDOB;

            // clear px
            this.$store.commit('px/update_cito', {t:'test', v:[]})
            this.$store.commit('px/update_cito', {t:'panel', v:[]})
            this.$store.commit('px/update_selected_test', [])
            this.$store.commit('px/update_nat_test', [])
            this.$store.dispatch('px/search')

            this.$store.commit('patient/update_selected_patient', a)
            this.$store.commit('order/update_order_d', {type:'complaint',val:a.C_OrderHeaderComplaint})
            // this.$store.state.patient.selected_patient = a
            // this.$store.state.patient.selected_patient.mr = a.M_PatientNoReg;
            // this.$store.state.patient.selected_patient.name = a.M_PatientName;
            // this.$store.state.patient.selected_patient.phone = a.M_PatientHP;
            // this.$store.state.patient.selected_patient.dob = a.M_PatientDOB;
            console.log(a)
            
            // SELECT
            let x = this.$store.state.patient.patients
            for (let i in x)
                if (x[i].C_OrderHeaderID == a.C_OrderHeaderID)
                    x[i].selected = true
                else
                    x[i].selected = false
            this.$store.commit('patient/update_patients', {records:x, total:this.$store.state.patient.total_patient})
        },

        processMe (a) {
            this.$store.commit('order/update_confirm_process_dialog_is_active', true)
            return this.selectMe(a)
        },

        justProcessMe (a) {
            this.$store.commit('order/update_processed', true)
            return this.selectMe(a)
        },

      isStatusReg(v) {
          return v == 'CLINIC.REG' ? true : false
      },

      isStatusProcess(v) {
          return v == 'CLINIC.PROCESS' ? true : false
      },

      isStatusFinish(v) {
          return v == 'CLINIC.DONE' ? true : false
      },

      print_me (t, a) {
          if (t == '01') {
              this.$store.dispatch('order/print_receipt', a)
          }

          if (t == '02') {
              this.$store.dispatch('order/print_queue', a)
          }

          if (t == '03') {
              this.$store.dispatch('order/print_resume', a)
          }
      },

      trigger_vmenu(idx, x) {
          this.x = x.x - x.offsetX + 10
          this.y = x.y - x.offsetY + 25
          console.log(x)
          this.$store.commit('patient/trigger_patients_vmenu', idx)
      },

      show_btn_print (code, is_lab) {
          console.log(is_lab)
          if (code == 'CLINIC.PROCESS' && is_lab == 'N')
            return false

        return true
      },

      format_date (d) {
          return d.split('-').reverse().join('-')
      }
    }
}
</script>