<template>
    <v-layout class="fill-height" column>
        <v-dialog v-model="dialogsuccess" persistent max-width="290">
            <v-card>
                <v-card-title color="success" class="headline"></v-card-title>
                <v-card-text v-html="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>
        
        <v-card class="mb-2 pa-2 searchbox">
            <h5>UPLOAD IMAGE</h5>
            <v-layout mt-1 style="border:1px solid black" align-center row pa-2>
              <v-flex xs9>
                <input type="file" id="files" ref="files" multiple v-on:change="handleFileUploads()"/>
                
              </v-flex>
              <v-flex xs3 class="text-xs-right">
                 <v-btn :disabled="show_progrees_upload" small dark color="blue lighten-1" @click="submitFiles()">Upload</v-btn>
              </v-flex>
            </v-layout>
            <v-layout v-if="show_progrees_upload" row align-center>
              <v-flex xs12>
              
              <v-progress-linear :indeterminate="true"></v-progress-linear>

              </v-flex>
            </v-layout>
            <p class="mt-2 mb-1 caption">* Max size per-image : 300kb, support files : jpg | jpeg | png </p>
        </v-card>
        
        <v-card>
            <v-layout style="height:650px;overflow: auto;" row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="patients" :loading="isLoading" hide-actions class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_CarouselImageUrl}}</td>
                            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_CarouselOrder}}</td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
                                <v-btn dark v-if="props.item.M_CarouselStatus === 'N'" depressed small color="error">Inactive</v-btn>
                                <v-btn dark v-if="props.item.M_CarouselStatus === 'Y'" depressed small color="green">Active</v-btn>
                            </td>
                        </template>
                    </v-data-table>
                    <!--<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>
        </v-card>
        <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()"
            @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
        </v-layout>
</template>

<style scoped>
    .searchbox .v-input.v-text-field .v-input__slot {
        min-height: 60px;
    }

    .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() {
                this.$store.dispatch("patient/getsexreg")
                this.$store.dispatch("patient/search", {
                    name: this.name,
                    snorm: this.snorm,
                    current_page: this.curr_page,
                    lastid: -1
                })
            },
            methods: {
                handleFileUploads(){
                    this.files = this.$refs.files.files;
                },
                removeFile( key ){
                    this.files.splice( key, 1 );
                },
                submitFiles(){
                    this.error_image = false
                    let formData = new FormData()
                    for( var i = 0; i < this.files.length; i++ ){
                        let file = this.files[i];
                        formData.append('files[' + i + ']', file)
                    }
                    if(this.files.length > 0){
                        this.files = []
                        this.show_progrees_upload = true
                        formData.append('token',  one_token())
                        this.$store.dispatch("patient/uploadimage",formData)
                    }
                    else{
                        this.error_image = true
                    }
                
                },
                isSelected(p) {
                    return p.M_CarouselID == this.$store.state.patient.selected_patient.M_CarouselID
                },
                searchPatient() {
                    this.$store.dispatch("patient/search", {
                        name: this.name,
                        snorm: this.snorm,
                        current_page: 1,
                        lastid: -1
                    })
                    this.$store.commit("patient/update_current_page", 1)
                },
                selectMe(pat) {
                    if (this.$store.state.patient.no_save == 0) {
                        this.$store.commit("patient/update_selected_patient", pat)
                        this.$store.commit("patient/update_xstatus", pat.M_CarouselStatus)
                        this.$store.commit("patient/update_xorder", pat.M_CarouselOrder)
                        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_CarouselID === 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: {
                show_progrees_upload: {
                    get() {
                        return this.$store.state.patient.show_progrees_upload
                    },
                    set(val) {
                        this.$store.commit("patient/update_show_progrees_upload", val)
                    }
                },
                onsearch(){
                    return this.$store.state.patient.onsearch
                },
                dialogsuccess: {
                    get() {
                        return this.$store.state.patient.dialog_success
                    },
                    set(val) {
                        this.$store.commit("patient/update_dialog_success", 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
                },
                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/search", {
                            name: this.name,
                            snorm: this.snorm,
                            current_page: val,
                            lastid: -1
                        })
                    }
                },
                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)
                    }
                },

            },
            data() {
                return {
                    msgalertconfirmation: "Perubahan yang telah dilakukan belum disimpan dong !",
                    items: [],
                    name: '',
                    snorm: '',
                    page: 1,
                    headers: [{
                            text: "NAMA",
                            align: "left",
                            sortable: false,
                            value: "mr",
                            width: "60%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "URUTAN",
                            align: "left",
                            sortable: false,
                            value: "lab",
                            width: "20%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "STATUS",
                            align: "center",
                            sortable: false,
                            value: "name",
                            width: "25%",
                            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>