<template>
    <v-layout class="fill-height" column>
        <v-dialog v-model="dialog_data_empty" width="500">
            <v-card>
                <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                    Perhatian
                </v-card-title>
                <v-card-text class="pt-2 pb-2">
                    <h6 class="display-1 text-center"><span class="blue--text">{{ text_data_empty }}</span></h6>
                </v-card-text>
                <v-divider></v-divider>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialog_data_empty = false">
                        Tutup
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

        <!-- ERROR DIALOG -->
        <v-dialog v-model="dialog_error" max-width="500px">
            <v-card>
                <v-card-title>
                    <span>ERROR !</span>
                    <v-spacer></v-spacer>
                </v-card-title>
                <v-divider></v-divider>
                <div class="ma-3 red--text">{{ msgError }}</div>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialog_error = false">Close</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- END ERROR DIALOG -->
        <!-- Snackbar -->
        <v-snackbar v-show="this.total_order === 0 ? false : true" v-model="snackbar" :timeout="5000"
            :multi-line="false" :vertical="false" :top="true" :color="clr" :value="snackbar">
            {{ msgsnackbar }}
            <v-btn flat @click="snackbar = false"> Tutup </v-btn>
        </v-snackbar>
        <!-- End Snackbar -->
        <!-- Alert dialog -->
        <v-dialog v-model="dialogalert" max-width="30%">
            <v-card>
                <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                    Peringatan !
                </v-card-title>
                <v-card-text class="pt-2 pb-2">
                    <v-layout row>
                        <v-flex xs12 d-flex>
                            <v-layout row>
                                <v-flex pb-1 xs12>
                                    <v-layout row>
                                        <v-flex pt-2 pr-2 xs12>
                                            {{ msgalert }}
                                        </v-flex>
                                    </v-layout>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialogalert = false">
                        Tutup
                    </v-btn>
                    <v-btn color="primary" flat @click="saveGenerate()">
                        Yakin lah
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- End alert dialog -->
        <!-- Alert dialog -->
        <v-dialog v-model="dialogalertconfirm" max-width="30%">
            <v-card>
                <v-card-title class="headline green lighten-2 pt-2 pb-2" primary-title>
                   Konfirmasi
                </v-card-title>
                <v-card-text class="pt-2 pb-2">
                    <v-layout row>
                        <v-flex xs12 d-flex>
                            <v-layout row>
                                <v-flex pb-1 xs12>
                                    <v-layout row>
                                        <v-flex pt-2 pr-2 xs12>
                                            {{ msgalertconfirm }}
                                        </v-flex>
                                    </v-layout>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialogalertconfirm = false">
                        Tutup
                    </v-btn>
                    <v-btn color="primary" flat @click="saveConfirm()">
                        Yakin lah
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- End alert dialog -->

        <v-card class="mb-2 pa-2 ">
            <v-layout align-center row>
                <v-flex xs4>
                    <v-text-field style="font-size:14px" label="No Lab / Nama" class="mr-1" v-model="xsearch"
                        hide-details></v-text-field>
                </v-flex>
                <v-flex v-show="Object.keys(this.$store.state.admin.selected_mcu).length != 0 ? true : false"
                    text-md-right>
                    <v-btn @click="doPrintPersentase()" color="primary" dark>Persentase <v-icon right
                            dark>print</v-icon></v-btn>
                </v-flex>
                <v-flex v-show="Object.keys(this.$store.state.admin.selected_mcu).length != 0 ? true : false"
                    text-md-right>
                    <v-btn @click="doPrintExecutive()" color="orange" dark>Executive <v-icon right
                            dark>print</v-icon></v-btn>
                </v-flex>
                <v-flex
                    v-show="Object.keys(this.$store.state.admin.selected_mcu).length != 0 && this.$store.state.order.mcuorder.length === 0 ? true : false"
                    text-md-right>
                    <v-btn class="ma-2" color="secondary" @click="openOrder()">
                        Generate Order
                    </v-btn>
                </v-flex>
                <v-flex
                    v-show="this.$store.state.order.readyconfirm == 'Y' ? true : false"
                    text-md-right>
                    <v-btn class="ma-2" color="success" @click="confirmOrder()">
                        Konfirmasi
                    </v-btn>
                </v-flex>
            </v-layout>
        </v-card>

        <v-card class="mb-2" color="white">
            <v-layout align-center row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="vmcuorder" :loading="isLoading" hide-actions
                        class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2" @click="selectMe(props.item)"
                                v-html="props.item.T_OrderHeaderLabNumber">
                            </td>
                            <td class="text-xs-left pa-2" @click="selectMe(props.item)"
                                v-html="props.item.M_PatientName">
                            </td>
                            <td class="text-xs-center pa-2" @click="selectMe(props.item)">
                                <v-chip v-if="props.item.Mcu_OrderStatus === 'N'" color="blue" text-color="white" small
                                    dark>NEW
                                </v-chip>
                                <v-chip v-if="props.item.Mcu_OrderStatus === 'S'" color="green" text-color="white" small
                                    dark>SENT
                                </v-chip>
                                <v-chip v-if="props.item.Mcu_OrderStatus === 'C'" color="orange" text-color="white"
                                    small dark>CONFIRM
                                </v-chip>
                                <v-chip v-if="props.item.Mcu_OrderStatus === 'P'" color="teal" text-color="white" small
                                    dark>PROCESSING
                                </v-chip>
                                <v-chip v-if="props.item.Mcu_OrderStatus === 'D'" color="secondary" text-color="white"
                                    small dark>PROCESSING LAB DONE
                                </v-chip>
                                <v-chip v-if="props.item.Mcu_OrderStatus === 'E'" color="red" text-color="white" small
                                    dark>ERROR
                                </v-chip>
                                <v-chip v-if="props.item.Mcu_OrderStatus === 'R'" color="primary" text-color="white"
                                    small dark>RE-SEND
                                </v-chip>
                                <v-chip v-if="props.item.Mcu_OrderStatus === 'F'" color="secondary" text-color="white"
                                    small dark>DONE NONLAB
                                </v-chip>
                            </td>
                        </template>
                    </v-data-table>
                    <v-divider></v-divider>
                    <v-layout>
                        <v-flex>
                            <v-pagination style="margin-top:10px;margin-bottom:10px" v-model="curr_page"
                                :length="xtotal_page">
                            </v-pagination>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-layout>

        </v-card>

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

.textinput {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    background-color: white;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
    border: 1px solid #607d8b;

}

.textinput:focus {
    width: 100%;
}

.textinput:focus::-webkit-input-placeholder {
    color: transparent;
}

.textinput:focus::-moz-placeholder {
    color: transparent;
}

.textinput:-moz-placeholder {
    color: transparent;
}

.scroll-container {
    scroll-padding: 50px 0 0 50px;
}

::-webkit-scrollbar {
    width: 7px;
}

/* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
    background-color: #73baf3;
}

/* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
    background-color: #2196f3;
}

/* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
    background-color: #0079da;
}

/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
    background-color: black;
}
</style>

<script>
module.exports = {
    components: {
        'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
    },

    data() {
        return {
            msgalert: "",
            msgalertconfirm: "",
            clr: "success",
            urlprintpersentase: "",
            printtitle: '',
            printwidth: '80%',
            urlprintexecutive: "",
            headers: [{
                text: "NOMOR LAB",
                align: "left",
                sortable: false,
                value: "mr",
                width: "20%",
                class: "pa-2 blue lighten-3 white--text"
            },
            {
                text: "PASIEN",
                align: "left",
                sortable: false,
                value: "mr",
                width: "15%",
                class: "pa-2 blue lighten-3 white--text"
            },
            {
                text: "STATUS",
                align: "Center",
                sortable: false,
                value: "mr",
                width: "20%",
                class: "pa-2 blue lighten-3 white--text"
            }]

        };
    },
    mounted() {

    },
    computed: {
        vmcuorder() {
            return this.$store.state.order.mcuorder
        },
        isLoading() {
            return this.$store.state.order.search_status == 1
        },
        curr_page: {
            get() {
                return this.$store.state.order.current_page
            },
            set(val) {
                this.$store.commit("order/update_current_page", val)
                this.$store.commit("order/update_last_id", -1)
                this.$store.dispatch("order/list_mcu_order")
            }
        },
        xtotal_page: {
            get() {
                return this.$store.state.order.total_mcuorder_page
            },
            set(val) {
                this.$store.commit("order/update_total_mcuorder_page", val)
            }
        },
        xsearch: {
            get() {
                return this.$store.state.order.x_search
            },
            set(val) {
                this.$store.commit("order/update_x_search", val)
            }
        },
        selected_mcu_id() {
            return this.$store.state.order.selected_mcu_id
        },
        dialogalert: {
            get() {
                return this.$store.state.order.dialogalert
            },
            set(val) {
                this.$store.commit("order/update_dialogalert", val)
            },
        },
        dialogalertconfirm: {
            get() {
                return this.$store.state.order.dialogalertconfirm
            },
            set(val) {
                this.$store.commit("order/update_dialogalertconfirm", val)
            },
        },
        snackbar: {
            get() {
                return this.$store.state.order.alert_success
            },
            set(val) {
                this.$store.commit("order/update_alert_success", val)
            }
        },
        msgsnackbar() {
            return this.$store.state.order.msg_success
        },
        dialog_error: {
            get() {
                return this.$store.state.order.alert_error
            },
            set(val) {
                this.$store.commit("order/update_alert_error", val)
            },
        },
        msgError() {
            return this.$store.state.order.error_message
        },
        text_data_empty() {
            return this.$store.state.order.text_empty
        },
        dialog_data_empty: {
            get() {
                return this.$store.state.order.dialog_is_active
            },
            set(val) {
                this.$store.commit("order/update_dialog_is_active", val)
            }
        },
        total_order: {
            get() {
                return this.$store.state.order.total_order
            },
            set(val) {
                this.$store.commit("order/update_total_order", val)
            }
        },
        openprintpersentase: {
            get() {
                return this.$store.state.order.open_print_persentase
            },
            set(val) {
                this.$store.commit("order/update_open_print_persentase", false)
            }
        },
        openprintexecutive: {
            get() {
                return this.$store.state.order.open_print_executive
            },
            set(val) {
                this.$store.commit("order/update_open_print_executive", false)
            }
        }
    },
    methods: {
        selectMe(selected) {
            this.$store.commit("order/update_selected_mcuorder", selected)
            this.$store.commit("order/update_last_id", selected.Mcu_OrderID)
        },
        thr_search: _.debounce(function () {
            this.$store.dispatch("order/list_mcu_order")
        }, 1000),
        thr_search_mcu_order: _.debounce(function () {
            this.$store.dispatch("order/list_mcu_order")
        }, 1000),
        openOrder() {
            this.msgalert = "Yakin, Mau Generate Order ?"
            this.dialogalert = true
        },
        saveGenerate() {
            let prm = {
                mgmmcuid: this.$store.state.admin.selected_mcu.Mgm_McuID
            }

            // console.log(mgmmcuid)
            this.$store.dispatch('order/insert_mcu_order', prm)
        },
        confirmOrder() {
            this.msgalertconfirm = "Yakin, Mau Dikonfirmasi ? Pastikan semua hasil resume individu sudah divalidasi."
            this.dialogalertconfirm = true
        },
        saveConfirm() {
            let prm = {
                mgmmcuid: this.$store.state.admin.selected_mcu.Mgm_McuID
            }

            // console.log(mgmmcuid)
            this.$store.dispatch('order/confirm_mcu_order', prm)
        },
        doPrintPersentase() {
            id = this.$store.state.admin.selected_mcu.Mgm_McuID
            let user = one_user()
            this.printwidth = 1200
            this.printtitle = ""
            let rpt = 'pola_kelainan_mcu_001'
            this.urlprintpersentase = "/birt/run?__report=report/one/rekap/" + rpt + ".rptdesign&__format=pdf&PID=" + id + "&username=" + user.M_StaffName
            this.$store.commit("order/update_open_print_persentase", true)
        },
        doPrintExecutive() {
            id = this.$store.state.admin.selected_mcu.Mgm_McuID
            let user = one_user()
            this.printwidth = 1200
            this.printtitle = ""
            let rpt = 'executive_summary_mcu_001'
            this.urlprintexecutive = "/birt/run?__report=report/one/rekap/" + rpt + ".rptdesign&__format=pdf&PID=" + id + "&username=" + user.M_StaffName
            this.$store.commit("order/update_open_print_executive", true)
        }
    },
    watch: {
        xsearch(val, old) {
            this.xsearch = val
            this.thr_search()
        },
        selected_mcu_id(val, old) {
            this.thr_search_mcu_order()
        }
    }
}
</script>