<template>
    <v-layout row justify-center>
        <v-dialog v-model="orderdialog" persistent max-width="60%">
            <v-card>
                <v-card-title
                    dark
                    style="color:white"
                    class="headline  pt-2 pb-2"
                    primary-title
                    v-bind:class="{ 'error':savestatus !== 2, 'success':savestatus === 2}"
                >
                <h4 dark v-if="savestatus !== 2">Order</h4>
                <h4 v-if="savestatus === 2">Berhasil !</h4>
                </v-card-title>
                <v-card-text class="pt-2 pb-2">
                    <v-layout v-if="savestatus === 2" row>
                        <v-flex pt-2 pr-2 xs12>
                            Barcode berhasil diperbarui
                        </v-flex>
                    </v-layout>   
                    <v-layout v-if="savestatus !== 2" pa-2 row wrap>
                        <v-flex xs12>
                            <v-card elevation="1"> 
                                <v-layout pa-2>
                                    <v-flex xs12 pa-2>
                                        <v-select
                                            item-text="name"
                                            return-object
                                            :items="langs" 
                                            v-model="selected_lang"
                                            label="Bahasa Kedua"
                                        ></v-select>
                                    </v-flex>
                                </v-layout>
                            </v-card>
                        </v-flex>
                    </v-layout>
                    <v-layout v-if="savestatus !== 2" pa-2 row wrap>
                        <v-flex xs12>
                            <v-card elevation="1"> 
                                <v-layout pa-2>
                                    <v-flex xs6 pa-2>
                                        <v-autocomplete
                                            label="Dokter"
                                            v-model="xorderdoctor"
                                            :items="xorderdoctors"
                                            :search-input.sync="search_doctor"
                                            auto-select-first
                                            no-filter
                                            item-text="name"
                                            return-object
                                            :loading="is_loading"
                                            no-data-text="Pilih Doctor"
                                            >
                                            <template
                                                slot="item"
                                                slot-scope="{ item }"
                                                >
                                                <v-list-tile-content>
                                                    <v-list-tile-title v-text="item.name"></v-list-tile-title>
                                                </v-list-tile-content>
                                            </template>
                                        </v-autocomplete>
                                    </v-flex>
                                    <v-flex xs6 pa-2>
                                        <v-select
                                            item-text="name"
                                            return-object
                                            :items="xdoctoraddresses" 
                                            v-model="xdoctoraddress"
                                            label="Alamat Dokter"
                                        ></v-select>
                                    </v-flex>
                                </v-layout>
                            </v-card>
                        </v-flex>
                    </v-layout>
                    <v-layout v-if="savestatus !== 2" pa-2 row wrap>
                        <v-flex xs12>
                            <v-card elevation="1"> 
                                <v-layout pa-2>
                                    <v-flex xs4 pa-2>
                                        <v-autocomplete
                                            label="Kel. Pelanggan"
                                            v-model="xordercompany"
                                            :items="xordercompanies"
                                            :search-input.sync="search_company"
                                            auto-select-first
                                            no-filter
                                            item-text="name"
                                            return-object
                                            :loading="is_loading"
                                            no-data-text="Pilih Company"
                                            >
                                            <template
                                                slot="item"
                                                slot-scope="{ item }"
                                                >
                                                <v-list-tile-content>
                                                    <v-list-tile-title v-text="item.name"></v-list-tile-title>
                                                </v-list-tile-content>
                                            </template>
                                        </v-autocomplete>
                                    </v-flex>
                                    <v-flex xs8 pa-2>
                                        <v-select
                                            item-text="name"
                                            return-object
                                            :items="xmous" 
                                            v-model="xmou"
                                            label="Mou"
                                        ></v-select>
                                    </v-flex>
                                </v-layout>
                            </v-card>
                        </v-flex>
                    </v-layout>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="error"
                        flat
                        v-if="!_.isEmpty(xmou) && savestatus !== 2"
                        @click="save()"
                    >
                    Simpan
                    </v-btn>
                    <v-btn
                        flat
                        @click="closeDialogOrder"
                    >
                    Tutup
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <template>
            <v-dialog
            v-model="dialogalerttest"
            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>
                                                <p v-for="(tox,index) in testout"> 
                                                    Pemeriksaan {{tox.T_OrderDetailT_TestName}} 
                                                    <code v-if="tox.T_OrderDetailIsCito === 'Y'">cito</code> 
                                                    harganya belum ada
                                                </p>
                                            </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="dialogalerttest = false"
                        >
                        Tutup
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        
        </template>
        <template>
  
    <v-dialog
      v-model="dialogconfirm"
      max-width="30%"
    >
        <v-card>
            <v-card-title
                class="headline grey 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>
                                       <p>Yakin, akan melakukan perubahan ?</p>
                                       <p><code>catatan : perubahan mou akan berpengaruh pada harga</code></p>
                                    </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="dialogconfirm = false"
                >
                Tutup
                </v-btn>
                <v-btn
                    color="primary"
                    flat
                    @click="doSave()"
                >
                Yakin lah
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
        </template>
    </v-layout>
</template>


<style scoped>
   table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background:white;
    border: 1px solid #ddd!important;
    }

    th, td {
    

    padding: .75rem 1.25rem;
    border: 1px solid #ddd!important;
    }
    table>tr>td {
    padding: .75rem 1.25rem;
    border: 1px solid #ddd!important;
    }
    table>tr>td:first {
    padding-left:15px!important;
    }
</style>
<script>
module.exports = {
    data () {
      return {
        printwidth:600,
        search_doctor:'',
        search_company:'',
        is_loading:false,
        headers: [
            {
               text: "STATUS",
               align: "center",
               sortable: false,
               value: "status",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "CITO",
               align: "center",
               sortable: false,
               value: "cito",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "PEMERIKSAAN",
               align: "left",
               sortable: false,
               value: "testname",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            },

            {
               text: "BRUTO",
               align: "center",
               sortable: false,
               value: "bruto",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "DISKON",
               align: "center",
               sortable: false,
               value: "discount",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "TOTAL",
               align: "center",
               sortable: false,
               value: "total",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ]
      }
    },
    computed: {
        selected_lang:{
            get() {
                return this.$store.state.order.selected_lang
            },
            set(val) {
                this.$store.commit("order/update_selected_lang",val)
            }
        },
        langs(){
            return this.$store.state.order.langs
        },
        orderdialog:{
            get() {
                return this.$store.state.order.order_dialog
            },
            set(val) {
                this.$store.commit("order/update_order_dialog",val)
            }
        },
        dialogalerttest:{
            get() {
                return this.$store.state.order.alert_dialog
            },
            set(val) {
                this.$store.commit("order/update_alert_dialog",val)
            }
        },
        dialogconfirm:{
            get() {
                return this.$store.state.order.confirm_dialog
            },
            set(val) {
                this.$store.commit("order/update_confirm_dialog",val)
            }
        },
        testout(){
            return this.$store.state.order.test_out
        },
        savestatus(){
            return this.$store.state.order.save_status
        },
        vmsgsave(){
            return this.$store.state.order.save_message
        },
        vmsgsave(){
            return this.$store.state.order.save_message
        },
        vstatussave(){
            return this.$store.state.order.save_status
        },
        xorderdoctors(){
            return this.$store.state.order.doctors
        },
        xorderdoctor:{
            get() {
                return this.$store.state.order.doctor
            },
            set(val) {
                this.$store.commit("order/update_doctor",val)
                this.$store.dispatch("order/getdoctoraddress",this.$store.state.order.doctor)
            }
        },
        xdoctoraddresses(){
            return this.$store.state.order.doctoraddresses
        },
        xdoctoraddress:{
            get() {
                return this.$store.state.order.doctoraddress
            },
            set(val) {
                this.$store.commit("order/update_doctoraddress",val)
            }
        },
        xordercompanies(){
            return this.$store.state.order.companies
        },
        xordercompany:{
            get() {
                return this.$store.state.order.company
            },
            set(val) {
                this.$store.commit("order/update_company",val)
                this.$store.dispatch("order/getmou",this.$store.state.order.company)
            }
        },
        xmous(){
            return this.$store.state.order.mous
        },
        xmou:{
            get() {
                return this.$store.state.order.mou
            },
            set(val) {
                this.$store.commit("order/update_mou",val)
                this.checkPrice()
            }
        },
        testsregistration(){
            return this.$store.state.order.test_registration
        },
        testsverification(){
            return this.$store.state.order.test_verification
        }
    },
    methods : {
        convertMoney(money){
            return one_money(money)
        },
        save(){
            this.dialogconfirm = true
        },
        doSave(){
            let prm = {
                'orderid':this.$store.state.patient.selected_patient.orderid,
                'doctorid': this.$store.state.order.doctor.id,
                'doctoraddressid': this.$store.state.order.doctoraddress.id,
                'company': this.$store.state.order.company.id,
                'mou': this.$store.state.order.mou.id,
                'lang':this.selected_lang
            }
            this.$store.dispatch("order/save",prm)
        },
        closeDialogOrder(){
            if(this.savestatus !== 2){
                this.$store.commit("order/update_order_dialog",false)
            }
            else{
                let arrpatient = this.$store.state.patient.patients
                var idx = _.findIndex(arrpatient, item => item.idx === this.$store.state.patient.selected_patient.idx)
                console.log(idx)
                this.$store.dispatch("patient/search",{
                    search: this.$store.state.patient.search,
                    status: this.$store.state.patient.selected_status.value,
                    lastidx:idx
                })
                this.$store.commit("order/update_order_dialog",false)
            }
             
        },
        thr_search_doctor: _.debounce( function () {
            //console.log('thr doctor')
            this.$store.dispatch("order/searchdoctor",this.search_doctor)
        },2000),
        thr_search_company: _.debounce( function () {
            console.log(this.search_company)
            this.$store.dispatch("order/searchcompany",{search:this.search_company})
        },2000),
        checkPrice(){
            console.log(_.isEmpty(this.xmou))
            if(_.isEmpty(this.xmou) === false){
                let prm = {
                    'orderid':this.$store.state.patient.selected_patient.orderid,
                    'mouid':this.$store.state.order.mou.id
                }
                this.$store.dispatch("order/checkprice",prm)
            }
            
        }
    },
    watch: {
        search_doctor(val,old) {
            console.log(val)
            if (val == old ) return
            if (! val) return
            if (val.length < 1 ) return
            if (this.$store.state.order.update_autocomplete_status == 1 ) return  
            this.thr_search_doctor()
        },
        search_company(val,old) {
             //console.log(val)
            if (val == old ) return
            if (! val) return
            if (val.length < 1 ) return
            if (this.$store.state.order.update_autocomplete_status == 1 ) return  
            this.thr_search_company()
        }
    }
}
</script>
