<template>
    <v-card class="mb-1 pa-1">
        <v-dialog v-model="dialog_fpp" width="75%">

            <v-card>


                <v-card-text>
                    <object width="100%" height="550" :data="url_pdf" style="overflow: hidden;"></object>
                </v-card-text>

                <v-divider></v-divider>

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

        <!-- BARCODE GABUNG DIALOG START -->
        <v-dialog v-model="dialog_barcode_list" width="75%">
            <v-card>
                <v-card-text>
                    <object width="100%" height="550" :data="url_pdf" style="overflow: hidden;"></object>
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialog_barcode_list = false">
                        Tutup
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- BARCODE GABUNG DIALOG END -->

        <!-- Dialog Attachment Start -->
        <v-dialog v-model="dialog_attachment" width="75%" persistent>
            <v-card>
                <v-card-title class="grey lighten-2">
                    <v-layout row wrap>
                        <v-flex xs10>
                            <h3>Lampiran</h3>
                        </v-flex>
                        <!-- <v-spacer></v-spacer> -->
                        <v-flex xs2 class="text-xs-right">
                            <v-btn color="red darken-1 white--text" flat @click="closeDialogAttachment()">
                                Tutup Lampiran
                            </v-btn>
                        </v-flex>
                    </v-layout>

                </v-card-title>
                <v-card-text>
                    <img v-if="(extension_lab === 'image' || extension_non_lab === 'image')" :src="url_file_attachment"
                        width="100%" height="100%" />
                    <object v-if="(extension_lab === 'pdf' || extension_non_lab === 'pdf')" width="100%" height="550"
                        :data="url_file_attachment" style="overflow: hidden;"></object>
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="red darken-1 white--text" flat @click="closeDialogAttachment()">
                        Tutup Lampiran
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- Dialog Attachment End -->

        <v-layout row>
            <v-flex xs8>
                <v-layout>
                    <one-date-picker label="Tanggal" :date="sdate" class="mydate" data="0"
                        @change="changeDate"></one-date-picker>
                    <v-text-field class="flex ma-1" label="" placeholder="No Reg / Nama" single-line solo hide-details
                        v-model="search" @keyup.native="keySearch"></v-text-field>
                    <v-autocomplete v-model="company" :items="companies" :loading="loading_company"
                        :search-input.sync="search_company" class="ma-1 ml-1 mr-1" hide-no-data filled
                        item-text="M_CompanyName" item-value="M_CompanyID" label="" placeholder="Cari Kelompok Pelanggan"
                        return-object></v-autocomplete>
                    <v-select :items="groups" class="ma-1" v-model="selected_group" item-text="group_name"
                        item-value="group_id" label="Grup Pemeriksaan" return-object solo hide-details clearable></v-select>
                </v-layout>
            </v-flex>
            <v-flex xs2>
                <v-layout>
                    <v-btn class="btn-search one-btn-icon ma-1" color="success" @click="searchs">
                        <span class="icon-search"><span>
                    </v-btn>
                </v-layout>
            </v-flex>
            <v-flex xs1>
                <v-btn v-if="fpp" color="blue darken-1" @click="openFPP()" dark>
                    FPP
                </v-btn>
                <!--<span class="one-fpp-viewer-v2" :data-header-id="selected_patient.T_OrderHeaderID"></span>-->
            </v-flex>

            <!-- <p>
                sasas {{ selected_patient.Itf }}
            </p> -->

            <!-- BARCODE GABUNG START -->
            <v-flex xs1 mr-1 v-if="selected_patient.Itf !== '' && Object.keys(selected_patient).length > 0">
                <v-btn style="right:10px;padding: 24px;" v-if="selected_patient.Itf !== ''"
                    @click="importInterface(selected_patient.BrnListBarcode)" color="primary" dark>Import Interface</v-btn>
            </v-flex>
            <!-- BARCODE GABUNG END -->

            <v-flex xs6 class="text-xs-right">

                <!-- UPLOAD START -->
                <v-btn class="btn-search one-btn-icon ma-1" color="red" @click="openDialogUpload()" dark
                    title="Upload Lampiran">
                    <v-icon>cloud_upload</v-icon>
                </v-btn>
                <!-- UPLOAD END -->

                <!-- button attachment show START -->
                <v-btn small color="purple lighten-1" class="one-btn-icon white--text ma-1"
                    @click="openAttachment(fileLab)" title="Lampiran Lab">
                    <v-icon>colorize</v-icon>
                </v-btn>

                <!-- <v-btn v-show="btn_attachment_show" small color="pink lighten-1"
                            class="one-btn-icon white--text ma-1" @click="openAttachment(fileNonLab)"
                            title="Lampiran Non Lab">
                            <v-icon>content_paste</v-icon>
                        </v-btn> -->
                <!-- button attachment show END -->

                <v-btn v-show="false" v-for="(lang, n) in langs" v-bind:key="n" color="grey lighten-1"
                    class="one-btn-icon pl-2 pr-2 ml-0 mr-1" depressed :outline="!lang_selected(lang)"
                    @click="lang_change(lang)">
                    <img :src="'../../../libs/image/' + img_lang_2(lang.code, lang.is_si)" height="40" alt="" />
                </v-btn>

                <v-btn v-if="show_re_age" class="btn-search one-btn-icon ma-1" color="brown" @click="re_calc_age" dark>
                    Re. Age
                </v-btn>

                <v-btn v-show="!info_req_perfect" class="btn-search one-btn-icon ma-1" color="red" @click="info" dark>
                    <v-icon>info</v-icon>
                </v-btn>

                <v-btn class="btn-search one-btn-icon ma-1" color="red" @click="note" dark>
                    <v-icon>library_books</v-icon>
                </v-btn>

                <v-btn color="blue-grey" class="white--text ma-1" @click="histories" v-show="btn_history_show">
                    Histori
                </v-btn>

                <v-btn color="green" class="white--text ma-1" @click="save_result">
                    Simpan
                    <v-icon right dark>save_alt</v-icon>
                </v-btn>
            </v-flex>
        </v-layout>
    </v-card>
</template>

<style scoped>
.mydate {
    width: 150px;
}

button {

    height: 48px;
}

.btn-search {
    font-size: 1.5em
}
</style>

<script>
module.exports = {
    components: {
        'one-date-picker': httpVueLoader('./oneDatePicker.vue')
    },
    data() {
        return {
            search_company: '',
            url_pdf: '',
            import_interface: "",

            // ATTACHMENT START
            url_file_attachment: '',
            extension_lab: '',
            extension_non_lab: '',
            // ATTACHMENT END
        }
    },
    watch: {
        search_company(n, o) {
            this.$store.dispatch('company/search', n)
        },
        selected_patient(n, o) {
            setTimeout(() => {
                oneFppViewerV2Render();
            }, 500);
        },
    },
    computed: {
        // ATTACHMENT DIALOG START
        dialog_attachment: {
            get() {
                return this.$store.state.re_px.dialog_attachment;
            },
            set(val) {
                this.$store.commit("re_px/update_dialog_attachment", val)
                console.log('attachment')
                console.log(val)
                //this.searchPatient()
            }
        },
        fileLab() {
            // if (!this.selected_patient) return false
            if (_.isEmpty(this.$store.state.re_px.obj_attachment)) {
                return "-";
            } else {
                return this.$store.state.re_px.obj_attachment.lab_type
            }
        },
        fileNonLab() {
            if (_.isEmpty(this.$store.state.re_px.obj_attachment)) {
                return "-";
            } else {
                return this.$store.state.re_px.obj_attachment.non_lab_type
            }
        },
        btn_attachment_show() {
            // if (_.isEmpty(this.$store.state.re_px.obj_attachment)) return false
            if (_.isEmpty(this.$store.state.re_px.obj_attachment)) {
                return false;
            } else {
                if (this.$store.state.re_px.obj_attachment.lab_url === "-" ||
                    this.$store.state.re_px.obj_attachment.non_lab_url === "-") {
                    return false
                } else {
                    return true;
                }
            }
        },
        // ATTACHMENT DIALOG END

        // BARCODE DIALOG START
        dialog_barcode_list: {
            get() {
                return this.$store.state.re_px.dialog_barcode_list;
            },
            set(val) {
                this.$store.commit("re_px/update_dialog_barcode_list", val)
                console.log('BARCODE LIST')
                console.log(val)
                //this.searchPatient()
            }
        },
        // BARCODE DIALOG END
        dialog_fpp: {
            get() {
                return this.$store.state.re_px.dialog_fpp;
            },
            set(val) {
                this.$store.commit("re_px/update_dialog_fpp", val)
                console.log('FPP')
                console.log(val)
                //this.searchPatient()
            }
        },
        show_re_age() {
            return this.$store.state.re_patient.selected_patient.T_OrderHeaderAddOnRequestChangeDOB == 'Y'
        },
        fpp() {
            return this.$store.state.re_px.fpp
        },
        company: {
            get() { return this.$store.state.company.company },
            set(v) { this.$store.commit('company/update_company', v) }
        },
        companies() {
            return this.$store.state.company.companies
        },
        loading_company() {
            return this.$store.state.company.loading
        },
        nolab: {
            get() { return this.$store.state.re_patient.nolab },
            set(v) { this.$store.commit('re_patient/update_nolab', v) }
        },
        search: {
            get() { return this.$store.state.re_patient.search },
            set(v) { this.$store.commit('re_patient/update_search', v) }
        },
        groups() {
            return this.$store.state.re_px.groups
        },
        selected_group: {
            get() { return this.$store.state.re_px.selected_group },
            set(v) {
                this.$store.commit('re_px/update_selected_group', v)
                this.$store.dispatch('re_patient/search')
            }
        },

        lang() {
            return this.$store.state.re_patient.selected_patient.M_LangCode
        },

        img_lang() {
            if (this.lang == "ID")
                return "inako.png"
            // return "flag-ina_48.png"
            else if (this.lang == "EN")
                return "engko.png"
            // return "flag-us_48.png"
        },

        langs() {
            return this.$store.state.re_patient.langs
        },

        sdate: {
            get() { return this.$store.state.re_patient.s_date },
            set(v) { this.$store.commit('re_patient/update_sdate', v) }
        },

        selected_patient() {
            return this.$store.state.re_patient.selected_patient
        },

        btn_history_show() {
            if (!this.selected_patient) return false
            if (!this.selected_patient.is_history) return false
            if (this.selected_patient.is_history == "N") return false

            return true
        },

        info_req_perfect() {
            let x = false
            try {
                x = this.$store.state.re_patient.info_req.is_perfect == 'Y';
            } catch (error) {
            }

            return x
        },
    },
    methods: {
        // ATTACHMENT METHODS START
        openAttachment(attachmentType) {
            // this.extension_lab = ""
            // this.extension_non_lab = ""
            // this.url_file_attachment = ""
            var file_url = "";

            if (attachmentType === this.$store.state.re_px.obj_attachment.non_lab_type) {
                file_url = this.$store.state.re_px.obj_attachment.non_lab_url
                this.extension_non_lab = this.$store.state.re_px.obj_attachment.extension_non_lab
            } else {
                file_url = this.$store.state.re_px.obj_attachment.lab_url
                this.extension_lab = this.$store.state.re_px.obj_attachment.extension_lab
            }

            // console.log(file_url)
            var url_pdf = window.location.protocol + '//' + window.location.host + file_url
            console.log(url_pdf)
            // window.open(url_pdf, '_blank').focus();
            this.url_file_attachment = url_pdf
            this.dialog_attachment = true
        },
        closeDialogAttachment() {
            this.extension_lab = ""
            this.extension_non_lab = ""
            this.url_file_attachment = ""
            this.dialog_attachment = false
        },
        // ATTACHMENT METHODS END

        // UPLOAD FILE DIALOG START
        openDialogUpload() {
            this.$store.commit('re_px/update_dialog_upload_file', true)
        },

        // BARCODE LIST START
        importInterface(itfNoRegParam) {
            console.log(itfNoRegParam)
            if (itfNoRegParam != "") {
                this.import_interface = itfNoRegParam
                this.$store.dispatch("re_px/importInterface", {
                    ItfNoReg: this.import_interface
                })
            }
        },
        openFPP() {
            var file_url = this.$store.state.re_px.fpp
            console.log(file_url)
            var url_pdf = window.location.protocol + '//' + window.location.host + "/one-api/mockup/brn/brnlist/get_pdf_v2" + file_url
            // window.open(url_pdf, '_blank').focus();
            this.url_pdf = url_pdf
            this.dialog_fpp = true
            //window.open("/one-api/mockup/brn/br
            //this.$store.dispatch("patient/openpdf",{url:pdf_url})
        },
        searchs() {
            this.$store.dispatch('re_patient/search')
        },
        async re_calc_age() {

            let orderID = this.$store.state.re_patient.selected_patient.T_OrderHeaderID
            await this.$store.dispatch('helper/calc_age', orderID)
        },
        keySearch(e) {
            if (e.which == 13) {
                this.searchs()
            }
        },

        search_px() {
            this.$store.dispatch('re_px/search')
        },

        save_result() {
            this.$store.dispatch('re_px/save')
        },

        histories() {
            this.$store.dispatch('re_history/history')
            this.$store.commit('re_history/update_dialog_history', true)
        },

        img_lang_2(lang, si) {

            if (lang == "ID" && si == "N")
                return "inako.png"
            if (lang == "ID" && si == "Y")
                return "inasi.png"
            if (lang == "EN" && si == "N")
                return "engko.png"
            if (lang == "EN" && si == "Y")
                return "engsi.png"
        },

        lang_change(lang) {
            this.$store.commit('re_patient/update_lang', lang)
            this.$store.dispatch('re_px/lang_export')
        },

        lang_selected(lang) {
            if (lang.code == this.$store.state.re_patient.lang_code)
                return true
            return false
        },

        changeDate(x) {
            this.sdate = x.new_date
            this.searchs()
        },

        note() {
            this.$store.commit('re_patient/update_dialog_note', true)
        },

        info() {
            this.$store.commit('re_patient/update_dialog_req', true)
        }
    },

    mounted() {
        this.$store.dispatch('re_px/search_group')
        console.log(this.$store.state.re_patient.selected_patient)
    }
}
</script>
