<template>
    <v-dialog v-model="dialog_list" persistent max-width="65%">
        <v-card>
            <v-card-title>
                <div class="pl-2 title">Listing Pasien</div>
                <v-spacer></v-spacer>
               
                <v-icon style="cursor: pointer;"  @click="dialog_list = false" class="text-xs-right">close</v-icon>
           
            </v-card-title>
            <v-divider></v-divider>
            <v-card-text>
                <div style="max-height:650px;overflow-x: auto;" >
                    <v-layout class="pl-1" row>
                        <v-flex xs3>
                            <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 Order"
                                    readonly
                                    hide-details
                                    class="xs3 ma-1"
                                    
                                    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-flex>
                        <v-flex xs3>
                            <v-select
                            :items="status"
                            v-model="selected_status"
                            item-text="name"
                            return-object
                            label="Status"
                            ></v-select>
                        </v-flex>
                    </v-layout>
                    <v-layout  row>
                        <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                            <v-data-table :headers="headers" :items="data_patients" :loading="isLoading" hide-actions class="elevation-1">
                                <template slot="items" slot-scope="props">
                                    <td v-bind:class="{'blue lighten-4':props.item.divider === 'Y'}" class="text-xs-left pa-2"  @click="selectMe(props.item)">
                                        {{ props.item.date_order}}
                                    </td>
                                    <td v-bind:class="{'blue lighten-4':props.item.divider === 'Y'}" class="text-xs-left pa-2"  @click="selectMe(props.item)">
                                        {{ props.item.orderNumber}}
                                    </td>
                                    <td v-bind:class="{'blue lighten-4':props.item.divider === 'Y'}" class="text-xs-left pa-2"  @click="selectMe(props.item)">
                                        {{ props.item.patient_name}}
                                    </td>
                                    <td v-bind:class="{'blue lighten-4':props.item.divider === 'Y'}" class="text-xs-center pa-2" @click="selectMe(props.item)">
                                        <v-chip v-if="props.item.orderIsAnamnese === 'N'" label>Baru</v-chip>
                                        <v-chip v-if="props.item.orderIsAnamnese === 'Y'" color="warning" label>Process</v-chip>
                                        <v-chip v-if="props.item.orderIsAnamnese === 'D'" dark color="red lighten-2" label>Selesai</v-chip>
                                    </td>
                                    <td v-bind:class="{'blue lighten-4':props.item.divider === 'Y'}" class="text-xs-center pa-2" @click="selectMe(props.item)">
                                        <v-btn @click="processNow(props.item)" v-if="props.item.orderIsAnamnese === 'N'" small round color="primary" dark>Process</v-btn>
                                        <v-btn @click="cancelNow(props.item)" v-if="props.item.orderIsAnamnese === 'Y'" color="grey" outline fab small>
                                            <v-icon>close</v-icon>
                                        </v-btn>
                                        <v-btn @click="lookDetail(props.item)" v-if="props.item.orderIsAnamnese === 'D'" small  color="primary" dark>Lihat</v-btn>
                                    </td>
                                </template>
                            </v-data-table>
                            <div class="text-xs-center pt-2">
                                <v-btn  :loading="isLoading" dark v-if="show_more" @click="showMore()" small color="blue lighten-3">
                                    Tampilkan lebih banyak
                                    <template v-slot:loader>
                                    sedang memuat ...
                                    </template>
                                </v-btn>
                                <v-btn depressed v-if="!show_more" small color="grey lighten-2">Tidak ada lagi data</v-btn>
                            </div>
                            <!--<v-pagination  style="margin-top:10px;margin-bottom:10px" :total-visible="15" v-model="curr_page" :length="xtotal_page"></v-pagination>-->
                        </v-flex>
                    </v-layout>
                </div>
                
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary darken-1" flat @click="dialog_list = false">Tutup</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<style scoped>


.searchbox .v-btn {
    min-height: 60px;
}

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() {
         
        },
        methods: {
            lookDetail(patient){
                location.replace("/one-ui/test/vuex/one-klinik-anamnese/?id="+patient.orderNumber)
            },
            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')}`
  },
            processNow(patient){
                this.$store.dispatch("patient/processnow",patient)
            },
            cancelNow(patient){
                console.log(patient)
                this.$store.dispatch("patient/cancelnow",patient)
            },
            showMore(){
                if(!this.isLoading){
                    this.$store.commit('patient/update_search_status', true)
                    var xnow = this.curr_page
                    this.curr_page = xnow + 1
                }
                
            },
            isSelected(p) {
                return p.M_PatientID == this.$store.state.patient.selected_patient.M_PatientID
            },
            searchPatient() {
                this.$store.commit("patient/update_dialog_list", true)
                this.$store.dispatch("patient/listpatient")
            },
            selectMe(pat) {
                if (this.$store.state.patient.no_save == 0) {
                    
                    this.$store.commit("patient/update_act", 'edit')
                } else {
                    this.$store.commit("patient/update_open_alert_confirmation", true)
                }

            },
            closeAlertConfirmation() {
                this.$store.commit("patient/update_open_alert_confirmation", false)
            },
            forgetAlertConfirmation() {
                this.$store.commit("patient/update_no_save", 0)
                this.$store.commit("patient/update_open_alert_confirmation", false)
            },
            updateAlert_success(val) {
                this.$store.commit("patient/update_alert_success", val)
            },
            setNewPatient() {
                this.$store.commit("patient/update_selected_patient", {})
                this.$store.commit("patient/update_norm", '')
                this.$store.commit("patient/update_patient_name", '')
                this.$store.commit("patient/update_selected_title", {})
                this.$store.commit("patient/update_selected_sex", {})
                this.$store.commit("patient/update_selected_religion", {})
                this.$store.commit("patient/update_dob", '')
                this.$store.commit("patient/update_hp", '')
                this.$store.commit("patient/update_phone", '')
                this.$store.commit("patient/update_email", '')
                this.$store.commit("patient/update_pob", '')
                this.$store.commit("patient/update_selected_kartuidentitas", {})
                this.$store.commit("patient/update_noidentitas", '')
                this.$store.commit("patient/update_note", '')
                this.$store.commit("patient/update_nik", '')
                    this.$store.commit("patient/update_jabatan", '')
                    this.$store.commit("patient/update_kedudukan", '')
                    this.$store.commit("patient/update_pj", '')
                    this.$store.commit("patient/update_location", '')
                    this.$store.commit("patient/update_job", '')
                this.$store.commit("patient/update_addresses", [])

                this.$store.commit("patient/update_act", 'new')
            },
            closeDialogSuccess() {
                let arrpatient = this.$store.state.patient.patients
                var idx = _.findIndex(arrpatient, item => item.M_PatientID === this.$store.state.patient.last_id)
                console.log(idx)
                this.$store.dispatch("patient/search", {
                    name: this.name,
                    snorm: this.snorm,
                    current_page: this.curr_page,
                    lastid: idx
                })
                this.$store.commit("patient/update_dialog_success", false)
            }
        },
        computed: {
            xstartdate:{
     get() {
           return this.$store.state.patient.start_date
     },
     set(val) {
           this.$store.commit("patient/update_start_date",val)
           this.searchPatient()
     }
  },
            startDateFormatted () {
        return this.formatDate(this.xstartdate)
  },
            show_more() {
                return this.$store.state.patient.show_more
            },
            
            onsearch(){
                return this.$store.state.patient.onsearch
            },
            dialog_list: {
                get() {
                    return this.$store.state.patient.dialog_list
                },
                set(val) {
                    this.$store.commit("patient/update_dialog_list", val)
                }
            },
            msgsuccess() {
                return this.$store.state.patient.msg_success
            },
            snackbar: {
                get() {
                    return this.$store.state.patient.alert_success
                },
                set(val) {
                    this.$store.commit("patient/update_alert_success", val)
                }
            },
            isLoading() {
                return this.$store.state.patient.search_status == 1
            },
            data_patients() {
                return this.$store.state.patient.data_patients
            },
            patients() {
                return this.$store.state.patient.patients
            },
            totalpatient() {
                return this.$store.state.patient.total_patient
            },
            curr_page: {
                get() {
                    return this.$store.state.patient.current_page
                },
                set(val) {
                    this.$store.commit("patient/update_current_page", val)
                    this.$store.dispatch("patient/listpatient")
                }
            },
            xtotal_page: {
                get() {
                    return this.$store.state.patient.total_patient
                },
                set(val) {
                    this.$store.commit("patient/update_total_patient", val)
                }
            },
            openalertconfirmation: {
                get() {
                    return this.$store.state.patient.open_alert_confirmation
                },
                set(val) {
                    this.$store.commit("patient/update_open_alert_confirmation", val)
                }
            },
            status: {
                get() {
                    return this.$store.state.patient.status
                },
                set(val) {
                    this.$store.commit("patient/update_status", val)
                }
            },
            selected_status: {
                get() {
                    return this.$store.state.patient.selected_status
                },
                set(val) {
                    this.$store.commit("patient/update_selected_status", val)
                    this.searchPatient()
                }
            },

        },
        data() {
            return {
               
                menustartdate:false,
                msgalertconfirmation: "Perubahan yang telah dilakukan belum disimpan dong !",
                items: [],
                name: '',
                snorm: '',
                page: 1,
                headers: [
                        {
                            text: "TANGGAL",
                            align: "left",
                            sortable: false,
                            value: "mr",
                            width: "10%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NOMOR",
                            align: "left",
                            sortable: false,
                            value: "mr",
                            width: "15%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NAMA",
                            align: "left",
                            sortable: false,
                            value: "lab",
                            width: "35%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "STATUS",
                            align: "center",
                            sortable: false,
                            value: "name",
                            width: "10%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "AKSI",
                            align: "center",
                            sortable: false,
                            value: "status",
                            width: "10%",
                            class: "pa-2 blue lighten-3 white--text"
                        }
                    ],
                pagination: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'M_PatientName',
                    totalItems: this.$store.state.patient.total_patients
                }
            };
        }
    }
</script>