<template>
<div>
  <v-layout row justify-center>
    <v-dialog v-model="xdialogform" fullscreen hide-overlay transition="dialog-bottom-transition">
      <v-card>
        <v-toolbar dark color="primary">
          <v-btn icon dark @click="xdialogform = false">
            <v-icon>close</v-icon>
          </v-btn>
          
          <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn v-if="xstatusnow.id === '1'" dark flat @click="actConfirm()">CONFIRM</v-btn>
            <v-btn v-if="xformact === 'edit'" dark flat @click="updateOrder()">Simpan Perubahan</v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <v-layout row wrap>
            <v-flex xs6 pa-2>
                <v-card dark flat color="blue lighten-2">
                    <v-card-title class="blue darken-3">
                    <h2 class="white--text font-weight-light">Pendaftaran Pasien</h2>
                    </v-card-title>
                    <v-container>
                        <v-layout row>
                            <v-flex xs2 pa-1>
                                <v-select
                                    dark
                                    item-text="M_TitleName"
                                    return-object
                                    :items="xtitles" 
                                    v-model="xtitle"
                                    label="Panggilan*"
                                ></v-select>
                            </v-flex>
                            <v-flex xs6 pa-1>
                                <v-text-field v-model="xpatientname" label="Nama Pasien*"></v-text-field>
                            </v-flex>
                            <v-flex xs4 pa-1>
                                <v-select
                                    dark
                                    item-text="m_sexname"
                                    return-object
                                    :items="xsexs" 
                                    v-model="xsex"
                                    label="Jenis Kelamin*"
                                ></v-select>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs8 pa-1>
                                <!--<v-text-field label="Tanggal Lahir*" hint="format : DD-MM-YYYY , contoh : 22-06-1988" v-model="xdob"></v-text-field>-->
                                <v-menu
                                    v-model="menu"
                                    :close-on-content-click="false"
                                    :nudge-right="40"
                                    lazy
                                    transition="scale-transition"
                                    offset-y
                                    full-width
                                    max-width="290px"
                                    min-width="290px"
                                    >
                                    <template v-slot:activator="{ on }">
                                        <v-text-field
                                        v-model="dobComputedDateFormatted"
                                        label="Tanggal Lahir*"
                                        hint="Format DD-MM-YYYY"
                                        persistent-hint
                                        
                                        readonly
                                        v-on="on"
                                        @blur="date = deFormatedDate(dobComputedDateFormatted)"
                                        ></v-text-field>
                                    </template>
                                    <v-date-picker v-model="xdob" no-title @input="menu = false"></v-date-picker>
                                    </v-menu>
                            </v-flex>
                            <v-flex xs4 pa-1>
                                <v-select
                                    dark
                                    item-text="M_ReligionName"
                                    return-object
                                    :items="xreligions" 
                                    v-model="xreligion"
                                    label="Agama"
                                ></v-select>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs4 pa-1>
                                <v-text-field label="Telepon" v-model="xphone" ></v-text-field>
                            </v-flex>
                            <v-flex xs4 pa-1>
                                <v-text-field label="Hp" v-model="xhp" ></v-text-field>
                            </v-flex>
                            <v-flex xs4 pa-1>
                                <v-text-field label="Email" v-model="xemail"></v-text-field>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs4 pa-1>
                                <v-autocomplete
                                    label="Kota*"
                                    v-model="xcity"
                                    :items="xcities"
                                    :search-input.sync="search_city"
                                    auto-select-first
                                    no-filter
                                    item-text="M_CityName"
                                    return-object
                                    :loading="is_loading"
                                    no-data-text="Pilih Kota*"
                                    >
                                    <template
                                        slot="item"
                                        slot-scope="{ item }"
                                        >
                                        <v-list-tile-content>
                                            <v-list-tile-title v-text="item.M_CityName"></v-list-tile-title>
                                        </v-list-tile-content>
                                    </template>
                                </v-autocomplete>
                            </v-flex>
                            <v-flex xs4 pa-1>
                                <v-select
                                    dark
                                    item-text="M_DistrictName"
                                    return-object
                                    :items="xdistricts" 
                                    v-model="xdistrict"
                                    label="Kecamatan*"
                                ></v-select>
                            </v-flex>
                            <v-flex xs4 pa-1>
                                <v-select
                                    dark
                                    item-text="M_KelurahanName"
                                    return-object
                                    :items="xkelurahans" 
                                    v-model="xkelurahan"
                                    label="Kelurahan / Desa*"
                                ></v-select>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs12 pa-1>
                                <v-text-field v-model="xaddress" label="Alamat Lengkap*" ></v-text-field>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs12 mt-3 class="text-sm-right">
                                <v-btn v-if="xdisabledregister === true" @click="saveNewPatient()"  color="blue darken-3">Daftarkan Sekarang</v-btn>
                            </v-flex>
                        </v-layout>
                    </v-container>
                </v-card>
                
            </v-flex>
            

            <v-flex xs6 pa-2>
                <v-card dark flat color="blue lighten-2">
                    <v-card-title style="height:63px;padding:0;color:#fffff" class="blue darken-3">                       
                    <!--<v-breadcrumbs pb-2 dark :items="steps">
                        <template v-slot:divider>
                            <v-icon>forward</v-icon>
                        </template>
                    </v-breadcrumbs>-->
                    <v-btn 
                            color="pink"
                            
                            small
                            class="btn-time"
                            @click="changeStep('order')"
                        >
                            Order
                    </v-btn>
                    <v-icon>forward</v-icon>
                    <v-btn 
                            color="pink"
                            
                            small
                            class="btn-time"
                            @click="changeStep('test')"
                        >
                            Pemeriksaan
                    </v-btn>
                    <v-icon>forward</v-icon>
                    <v-btn 
                            color="pink"
                            
                            small
                            class="btn-time"
                            @click="changeStep('staff')"
                        >
                            Staff
                    </v-btn>
                    <v-icon>forward</v-icon>
                    <v-btn 
                            color="pink"
                            
                            small
                            class="btn-time"
                            @click="changeStep('delivery')"
                        >
                            Delivery
                    </v-btn>
                    </v-card-title>
                    <v-container>
                        <div v-if="xstep === 'order'">
                            <v-layout row>
                                <v-flex xs2 pa-1>
                                    <v-select
                                        dark
                                        item-text="M_PreOrderTypeName"
                                        return-object
                                        :items="xordertypes" 
                                        v-model="xordertype"
                                        label="Type*"
                                    ></v-select>
                                </v-flex>
                                <v-flex xs5 pa-1>
                                    <v-text-field v-model="xorderdate" label="Tanggal dan Jam Order" hint="format : DD-MM-YYYY HH:MM, contoh : 22-06-2019 06:50"></v-text-field>
                                </v-flex>
                                <v-flex xs5 pa-1>
                                    <v-text-field label="Telepon" v-model="xorderphone"></v-text-field>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs4 pa-1>
                                    <v-autocomplete
                                        label="Pasien*"
                                        v-model="xorderpatient"
                                        :items="xorderpatients"
                                        :search-input.sync="search_patient"
                                        auto-select-first
                                        no-filter
                                        item-text="M_PatientName"
                                        return-object
                                        :loading="is_loading"
                                        no-data-text="Pilih Pasien*"
                                        >
                                        <template
                                            slot="item"
                                            slot-scope="{ item }"
                                            >
                                            <v-list-tile-content>
                                                <v-list-tile-title v-text="item.M_PatientName"></v-list-tile-title>
                                            </v-list-tile-content>
                                        </template>
                                    </v-autocomplete>
                                </v-flex>
                                <v-flex xs8 pa-1>
                                    <v-select
                                        dark
                                        item-text="M_PatientAddressDescription"
                                        return-object
                                        :items="xorderaddresss" 
                                        v-model="xorderaddress"
                                        label="Alamat*"
                                    ></v-select>
                                </v-flex>
                            </v-layout>
                        </div>
                        <div v-if="xstep === 'test'">
                            <v-layout row>
                                <v-flex xs8 pa-1>
                                   <v-autocomplete
                                        label="Pemeriksaan"
                                        v-model="xorderautotest"
                                        :items="xorderautotests"
                                        :search-input.sync="search_test"
                                        auto-select-first
                                        no-filter
                                        item-text="T_TestName"
                                        return-object
                                        :loading="is_loading"
                                        no-data-text="Cari Pemeriksaan"
                                        outline
                                        small
                                        >
                                        <template
                                            slot="item"
                                            slot-scope="{ item }"
                                            >
                                            <v-list-tile-content>
                                                <v-list-tile-title v-text="item.T_TestName"></v-list-tile-title>
                                            </v-list-tile-content>
                                        </template>
                                    </v-autocomplete>
                                </v-flex>
                                <v-flex xs-4 class="text-md-right">
                                    <v-btn @click="addTest()"  color="blue darken-3">Pilih Pemeriksaan</v-btn>
                                </v-flex>
                            </v-layout>
                            <v-divider></v-divider>
                            <v-layout row wrap>
                                <v-flex  xs12 pt-2 pb-1>
                                    <table style="
                                        font-family: arial, sans-serif;
                                        border-collapse: collapse;
                                        width: 100%;
                                        border: 0px;
                                    " class="px">
                                        <tr>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" 
                                                        width="5%" 
                                                class="text-md-center pt-2 pb-2">#
                                            </td>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" 
                                                class="text-md-center pt-2 pb-2">PEMERIKSAAN
                                            </td>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" 
                                                class="text-md-center pt-2 pb-2">BRUTO
                                            </td>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" 
                                                class="text-md-center pt-2 pb-2">DISKON
                                            </td>
                                            <td style=" border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" 
                                                class="text-md-center pt-2 pb-2">DISKON RP
                                            </td>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" 
                                                class="text-md-center pt-2 pb-2">TOTAL
                                            </td>
                                        </tr>
                                        <tr v-if="xordertests.length > 0" class="mini-input" v-for="(vpx,idx) in xordertests">
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;
                                                        text-align:center;
                                                        vertical-align:center;" align="center">
                                                <span v-if="vpx.editable == 'N'">{{idx + 1}}</span>
                                                <v-icon v-else-if="vpx.editable == 'Y'" color="#c75c3a" @click="deleteDataPx(idx)">delete</v-icon>
                                            </td>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" 
                                                class="text-md-left pl-3">{{vpx.T_TestName}}</td>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" 
                                                class="text-md-right pr-2">{{convertMoney(vpx.T_PriceAmount)}}</td>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" 
                                                class="text-md-right pr-2">{{convertMoney(vpx.T_PriceDisc)}}</td>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" 
                                                class="text-md-right pr-2">{{convertMoney(vpx.T_PriceDiscRp)}}</td>
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" 
                                                class="text-md-right pr-2">{{convertMoney(vpx.total)}}</td>
                                        </tr>
                                        <tr v-if="xordertests.length === 0" class="mini-input">
                                            <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" 
                                                align="center" colspan="6">Belum ada data</td>
                                        </tr>
                                    </table>
                                </v-flex>
                            </v-layout>
                        </div>
                        <div v-if="xstep === 'staff'">
                            <v-layout row>
                                <v-flex xs12 pa-1>
                                     <v-select
                                        dark
                                        item-text="M_StaffName"
                                        return-object
                                        :items="xstaffs" 
                                        v-model="xorderstaff"
                                        label="Staff Pengambil Sample"
                                    ></v-select>
                                </v-flex>
                            </v-layout>
                        </div>
                        <div v-if="xstep === 'delivery'">
                            <v-layout row>
                                <v-flex xs12 d-flex>
                                    <v-select
                                        v-model="xorderdeliverytype"
                                        :items="xorderdeliverytipes"
                                        auto-select-first
                                        item-text = "M_DeliveryName"
                                        return-object
                                        label="Tipe Pengiriman"
                                        >
                                        <template
                                            slot="item"
                                            slot-scope="{ item }"
                                            >
                                            <v-list-tile-content>
                                                <v-list-tile-title v-text="item.M_DeliveryName"></v-list-tile-title>
                                            </v-list-tile-content>
                                        </template>
                                    </v-select>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs12 d-flex>
                                    <v-layout row v-if="xorderdeliverytype.M_DeliveryTypeCode == 'EMAIL'">
                                        <v-flex pb-1 xs12>
                                            <v-layout row>
                                                <v-flex pt-2  xs12 >
                                                    <v-text-field
                                                        v-model="xorderdeliveryaddress"
                                                        label="Alamat email"
                                                        
                                                    ></v-text-field>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row v-if="xorderdeliverytype.M_DeliveryTypeCode == 'WHATSAPP'">
                                        <v-flex pb-1 xs12>
                                            <v-layout row>
                                                <v-flex pt-2  xs12 >
                                                    <v-text-field
                                                        v-model="xorderdeliveryaddress"
                                                        label="Nomor Whatsapp"
                                                        
                                                    ></v-text-field>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row v-if="xorderdeliverytype.M_DeliveryTypeCode == 'TELEGRAM'">
                                        <v-flex pb-1 xs12>
                                            <v-layout row>
                                                <v-flex pt-2  xs12 >
                                                    <v-text-field
                                                        v-model="xorderdeliveryaddress"
                                                        label="Nomor Telegram"
                                                        
                                                    ></v-text-field>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row v-else-if="xorderdeliverytype.M_DeliveryTypeCode == 'ADDRESS'">
                                        <v-flex pb-1 xs12>
                                            <v-layout row>
                                                <v-flex pt-2 pr-2 xs12>
                                                    <v-select
                                                        dark
                                                        item-text="M_PatientAddressDescription"
                                                        return-object
                                                        :items="xorderaddresss" 
                                                        v-model="xorderpatientdeliveryaddress"
                                                        label="Alamat Pengiriman"
                                                    ></v-select>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                </v-flex>
                            </v-layout> 
                        </div>
                        <v-layout row>
                            <v-flex xs12 mt-3 class="text-sm-left">
                                <v-btn v-if="xstep !== 'order'" @click="prevStep()" color="blue darken-3">Kembali</v-btn>
                            </v-flex>
                            <v-flex xs12 mt-3 class="text-sm-right">
                                <v-btn v-if="xstep === 'delivery' && xformact === 'new'" @click="saveOrder()" color="blue darken-3">Simpan</v-btn>
                                <v-btn v-if="xstep !== 'delivery'" @click="nextStep()" color="blue darken-3">Lanjut</v-btn>
                            </v-flex>
                        </v-layout>
                    </v-container>
                </v-card>
                
            </v-flex>
        </v-layout>
        
      </v-card>
    </v-dialog>



    <template>
  
        <v-dialog
        v-model="dialogerrormsg"
    
        max-width="30%"
        >
            <v-card>
                <v-card-title
                    class="headline red darken-1 pt-2 pb-2"
                    primary-title
                >
                <h4 style="color:#FFEBEE">Peringatan !</h4>
                </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 v-html="errormsg" xs12>
                                        
                                        </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="error"
                        flat
                        @click="dialogerrormsg = false"
                    >
                    Tutup
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    
    </template>

    <template>
  
        <v-dialog
        v-model="xdialogordernumber"
    
        max-width="30%"
        >
            <v-card>
                <v-card-title
                    class="headline success pt-2 pb-2"
                    primary-title
                >
                <h4 style="color:#FFEBEE" v-html="xtitleordernumber"></h4>
                </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 v-html="xmsgordernumber" xs12>
                                        
                                        </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="success"
                        flat
                        v-if="xbtnconfirm === 'show'"
                        @click="doConfirm()"
                    >
                    Ok, Confirm !
                    </v-btn>
                    <v-btn
                        color="error"
                        flat
                        @click="closeDialogOrderNumber(false)"
                    >
                    Tutup
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    
    </template>
  </v-layout>
</div>
</template>
<style scoped>
.v-breadcrumbs__item{
    color:#fff!important;
}
</style>
<script>
  module.exports = {
    data() {
      return {
        dialogerrormsg:false,
        errormsg:'',
        steps: [
            {
                text: 'Order',
                disabled: false,
                href: '#'
            },
            {
                text: 'Pemeriksaan',
                disabled: false,
                href: '#'
            },
            {
                text: 'Staf',
                disabled: false,
                href: '#'
            },
            {
                text: 'Pengiriman',
                disabled: false,
                href: '#'
            }
        ],
        is_loading:false,
        search_city:'',
        search_patient:'',
        search_test:'',
        date: new Date().toISOString().substr(0, 10),
        menu: false,
        modal: false,
        menu2: false
        
      }
    },
    computed: {
        xstep(){
            return this.$store.state.form.step
        },
        xstatusnow(){
            return this.$store.state.form.status_now
        },
        xdisabledregister(){
            return this.$store.state.form.disabled_register
        },
        xbtnconfirm(){
            return this.$store.state.form.btn_confirm
        },
        xformact(){
            return this.$store.state.form.form_act
        },
        dobComputedDateFormatted () {
        return this.formatDate(this.xdob)
      },
        xdialogform : {
            get() {
                return this.$store.state.form.dialog_form
            },
            set(val) {
                this.$store.commit("form/update_dialog_form",val)
            }
        },
        xtitles(){
            return this.$store.state.form.titles
        },
        xdialogordernumber(){
            return this.$store.state.form.dialog_ordernumber
        },
        xtitleordernumber(){
            return this.$store.state.form.title_ordernumber
        },
        xmsgordernumber(){
            return this.$store.state.form.msg_ordernumber
        },
        xtitle:{
            get() {
                return this.$store.state.form.title
            },
            set(val) {
                this.$store.commit("form/update_title",val)
            }
        },
        xsexs(){
            return this.$store.state.form.sexs
        },
        xsex:{
            get() {
                return this.$store.state.form.sex
            },
            set(val) {
                this.$store.commit("form/update_sex",val)
            }
        },
        xreligions(){
            return this.$store.state.form.religions
        },
        xreligion:{
            get() {
                return this.$store.state.form.religion
            },
            set(val) {
                this.$store.commit("form/update_religion",val)
            }
        },
        xcities(){
            return this.$store.state.form.cities
        },
        xcity:{
            get() {
                return this.$store.state.form.city
            },
            set(val) {
                this.$store.commit("form/update_city",val)
                this.$store.dispatch("form/getdistrict",this.$store.state.form.city)
            }
        },
        xdistricts(){
            return this.$store.state.form.districts
        },
        xdistrict:{
            get() {
                return this.$store.state.form.district
            },
            set(val) {
                this.$store.commit("form/update_district",val)
                this.$store.dispatch("form/getkelurahan",this.$store.state.form.district)
            }
        },
        xkelurahans(){
            return this.$store.state.form.kelurahans
        },
        xkelurahan:{
            get() {
                return this.$store.state.form.kelurahan
            },
            set(val) {
                this.$store.commit("form/update_kelurahan",val)
            }
        },
        xpatientname:{
            get() {
                return this.$store.state.form.patientname
            },
            set(val) {
                this.$store.commit("form/update_patientname",val)
            }
        },
        xdob:{
            get() {
                return this.$store.state.form.dob
            },
            set(val) {
                console.log(val)
                this.$store.commit("form/update_dob",val)
            }
        },
        xhp:{
            get() {
                return this.$store.state.form.hp
            },
            set(val) {
                this.$store.commit("form/update_hp",val)
            }
        },
        xphone:{
            get() {
                return this.$store.state.form.phone
            },
            set(val) {
                this.$store.commit("form/update_phone",val)
            }
        },
        xemail:{
            get() {
                return this.$store.state.form.email
            },
            set(val) {
                this.$store.commit("form/update_email",val)
            }
        },
        xaddress:{
            get() {
                return this.$store.state.form.address
            },
            set(val) {
                this.$store.commit("form/update_address",val)
            }
        },
        xorderpatients(){
            return this.$store.state.form.orderpatients
        },
        xorderpatient:{
            get() {
                return this.$store.state.form.orderpatient
            },
            set(val) {
                this.$store.commit("form/update_orderpatient",val)
                this.$store.dispatch("form/getaddress",this.$store.state.form.orderpatient)
            }
        },
        xorderaddresss(){
            return this.$store.state.form.orderadresss
        },
        xorderaddress:{
            get() {
                return this.$store.state.form.orderadress
            },
            set(val) {
                this.$store.commit("form/update_orderadress",val)
            }
        },
        xordertypes(){
            return this.$store.state.form.ordertypes
        },
        xordertype:{
            get() {
                return this.$store.state.form.ordertype
            },
            set(val) {
                this.$store.commit("form/update_ordertype",val)
            }
        },
        xorderdate:{
            get() {
                //var vorderdate = moment().format("DD-MM-YYYY hh:mm")
                return this.$store.state.form.orderdate
            },
            set(val) {
                this.$store.commit("form/update_orderdate",val)
            }
        },
        xorderphone:{
            get() {
                return this.$store.state.form.orderphone
            },
            set(val) {
                this.$store.commit("form/update_orderphone",val)
            }
        },
        xorderautotests(){
            return this.$store.state.form.orderautotests
        },
        xorderautotest:{
            get() {
                return this.$store.state.form.orderautotest
            },
            set(val) {
                this.$store.commit("form/update_orderautotest",val)
            }
        },
        xordertests(){
            return this.$store.state.form.ordertests
        },
        xstaffs(){
            return this.$store.state.form.staffs
        },
        xorderstaff:{
            get() {
                return this.$store.state.form.orderstaff
            },
            set(val) {
                this.$store.commit("form/update_orderstaff",val)
            }
        },
        xorderdeliverytipes(){
            return this.$store.state.form.orderdeliverytipes
        },
        xorderdeliverytype:{
            get() {
                return this.$store.state.form.orderdeliverytype
            },
            set(val) {
                this.$store.commit("form/update_orderdeliverytype",val)
            }
        },
        xorderdeliveryaddress:{
            get() {
                return this.$store.state.form.orderdeliveryaddress
            },
            set(val) {
                this.$store.commit("form/update_orderdeliveryaddress",val)
            }
        },
        xorderpatientdeliveryaddress:{
            get() {
                return this.$store.state.form.orderpatientdeliveryaddress
            },
            set(val) {
                this.$store.commit("form/update_orderpatientdeliveryaddress",val)
            }
        }
    },
    methods: {
        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')}`
        },
        saveNewPatient(){
            var error_count = 0
            var error_msg = ''
            if(_.isEmpty(this.xtitle)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Panggilan</kbd> : Ayo, pilih salah satu panggilan</p>"
            }

            if(this.xnewpatientname === ""){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Nama Pasien</kbd> : Diisi dong nama pasiennya</p>"
            }

            if(_.isEmpty(this.xsex)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Jenis Kelamin</kbd> : Ayo, pilih salah satu jenis kelamin</p>"
            }
            
            if(this.xdob === ""){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Tanggal Lahir</kbd> : Diisi dong tanggal lahirnya</p>"
            }

            if(_.isEmpty(this.$store.state.form.city)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Kota</kbd> : Ayo, pilih salah satu kota</p>"
            }

            if(_.isEmpty(this.$store.state.form.district)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Kecamatan</kbd> : Ayo, pilih salah satu kecamatan</p>"
            }

            if(_.isEmpty(this.xkelurahan)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Kelurahan</kbd> : Ayo, pilih salah satu kelurahan</p>"
            }

            if(this.xaddress === ""){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Alamat Lengkap</kbd> : Diisi dong alamatnya</p>"
            }

            var aDOB   = moment(this.xdob, 'YYYY-MM-DD', true)
            var isValidDOB = aDOB.isValid()
            if(!isValidDOB){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Tanggal Lahir</kbd> : Diisi sesuai format dong (DD-MM-YYYY, contoh : 22-06-1988)</p>"
            }
            
            if(error_count > 0){
                this.errormsg = error_msg
                this.dialogerrormsg = true
            }
            else{
                var params = {
                    titleid:this.xtitle.M_TitleID,
                    patientname:this.xpatientname,
                    sexid:this.xsex.M_SexID,
                    dob:this.xdob,
                    religionid:this.xreligion.M_ReligionID,
                    hp:this.xhp,
                    email:this.xemail,
                    phone:this.xphone,
                    cityid:this.$store.state.form.city.M_CityID,
                    districtid:this.$store.state.form.district.M_DistrictID,
                    kelurahanid:this.xkelurahan.M_KelurahanID,
                    address:this.xaddress
                }
                this.$store.dispatch("form/savenewpatient",params)
            }

        },
        thr_search_city: _.debounce( function () {
            this.$store.dispatch("form/searchcity",this.search_city)
        },2000),
        thr_search_patient: _.debounce( function () {
            this.$store.dispatch("form/searchpatient",this.search_patient)
        },2000),
        thr_search_test: _.debounce( function () {
            this.$store.dispatch("form/searchtest",this.search_test)
        },2000),
        nextStep(){
            var nowstep = this.xstep
            if(nowstep === 'order'){
                this.$store.commit("form/update_step",'test')
            }else if(nowstep === 'test'){
                this.$store.commit("form/update_step",'staff')
            }else if(nowstep === 'staff'){
                this.$store.commit("form/update_step",'delivery')
            }
        },
        prevStep(){
            var nowstep = this.xstep
            if(nowstep === 'delivery'){
                this.$store.commit("form/update_step",'staff')
            }
            else if(nowstep === 'staff'){
                this.$store.commit("form/update_step",'test')
            }else if(nowstep === 'test'){
                this.$store.commit("form/update_step",'order')
            }
            
        },
        changeStep(val){
            this.$store.commit("form/update_step",val)
        },
        convertMoney(money){
            return one_money(money)
        },
        addTest(){
            var oldArr = this.$store.state.form.ordertests
            oldArr.push(this.$store.state.form.orderautotest)
            this.searchtest = ''
            this.$store.commit("form/update_orderautotests",[])
            this.$store.commit("form/update_orderautotest",{})
        },
        deleteDataPx(idx){
            var inx = parseInt(idx);
            var xrow = this.$store.state.form.ordertests[inx]
            if(parseInt(xrow.xid) !== 0){
                var xdeltest = this.$store.state.form.deleted_ordertests
                xdeltest.push(xrow)
                this.$store.commit("form/update_deleted_ordertests",xdeltest)
            }
            var oldArr = this.$store.state.form.ordertests
            oldArr.splice(inx,1)
            this.$store.commit("form/update_ordertests",oldArr)
        },
        saveOrder(){
            var error_count = 0
            var error_msg = ''

            var aDate   = moment(this.xorderdate, 'DD-MM-YYYY HH:mm', true)
            var isValidDate = aDate.isValid()
            if(!isValidDate){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Tanggal dan Jam Order</kbd> : Diisi sesuai format dong (DD-MM-YYYY hh:mm, contoh : 22-06-2019 06:50)</p>"
            }

            if(this.xordertests.length === 0){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Pemeriksaan</kbd> : Beneran ini ? gak ada pemeriksaannya ? </p>"
            }

            if(_.isEmpty(this.xordertype)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Tipe</kbd> : Ayo, pilih salah satu tipe order</p>"
            }
            else{
                if(parseInt(this.xordertype.M_PreOrderTypeID) === 1 && this.xorderphone === '' ){
                    error_count++
                    error_msg += "<p><kbd class='text-uppercase'>Tanggal dan Jam Order</kbd> : Diisi dong nomor telpon nya, kan ordernya lewat telpon </p>"
                }
            }

            if(_.isEmpty(this.xorderpatient)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Pasien</kbd> : Pasiennya siapa ? diisi dong</p>"
            }

            if(_.isEmpty(this.xorderaddress)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Alamat</kbd> : Alamatnya kok gak diisi ? bingung dong yang ngambil sampling</p>"
            }

            if(parseInt(this.xorderdeliverytype.M_DeliveryID) === 2 && _.isEmpty(this.xorderpatientdeliveryaddress)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Pengiriman Hasil</kbd> : Alamat pengiriman hasil pasien belum dipilih kan ya ?</p>"
            }

            if(parseInt(this.xorderdeliverytype.M_DeliveryID) === 2){
                console.log(this.xorderpatientdeliveryaddress)
                var xd = this.xorderpatientdeliveryaddress
                console.log(xd.M_PatientAddressDescription)
                this.$store.commit("form/update_orderdeliveryaddress",xd.M_PatientAddressDescription)
            }
            
            if(error_count > 0){
                this.errormsg = error_msg
                this.dialogerrormsg = true
            }
            else{
                var params = {
                    ordertype : this.xordertype.M_PreOrderTypeID,
                    orderdatetime : this.xorderdate,
                    orderphone : this.xorderphone,
                    orderpatient : this.xorderpatient.M_PatientID,
                    ordersex : this.xorderpatient.M_PatientM_SexID,
                    orderaddress : this.xorderaddress.M_PatientAddressID,
                    orderkelurahan : this.xorderaddress.M_PatientAddressM_KelurahanID,
                    ordertests : this.xordertests,
                    orderstaff : this.xorderstaff.M_StaffID,
                    orderdeliverydeliveryid:this.xorderdeliverytype.M_DeliveryID,
                    orderdeliverydeliverytype:this.xorderdeliverytype.M_DeliveryTypeID,
                    orderdeliverydestination:this.xorderdeliveryaddress,
                    orderdeliverykelurahan:this.xorderpatientdeliveryaddress.M_PatientAddressM_KelurahanID
                }
                this.$store.dispatch("form/saveorder",params)
            }
        },
        updateOrder(){
            var error_count = 0
            var error_msg = ''

            var aDate   = moment(this.xorderdate, 'DD-MM-YYYY HH:mm', true)
            var isValidDate = aDate.isValid()
            if(!isValidDate){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Tanggal dan Jam Order</kbd> : Diisi sesuai format dong (DD-MM-YYYY hh:mm, contoh : 22-06-2019 06:50)</p>"
            }

            if(this.xordertests.length === 0){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Pemeriksaan</kbd> : Beneran ini ? gak ada pemeriksaannya ? </p>"
            }

            if(_.isEmpty(this.xordertype)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Tipe</kbd> : Ayo, pilih salah satu tipe order</p>"
            }
            else{
                if(parseInt(this.xordertype.M_PreOrderTypeID) === 1 && this.xorderphone === '' ){
                    error_count++
                    error_msg += "<p><kbd class='text-uppercase'>Tanggal dan Jam Order</kbd> : Diisi dong nomor telpon nya, kan ordernya lewat telpon </p>"
                }
            }

            if(_.isEmpty(this.xorderpatient)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Pasien</kbd> : Pasiennya siapa ? diisi dong</p>"
            }

            if(_.isEmpty(this.xorderaddress)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Alamat</kbd> : Alamatnya kok gak diisi ? bingung dong yang ngambil sampling</p>"
            }

            if(parseInt(this.xorderdeliverytype.M_DeliveryID) === 2 && _.isEmpty(this.xorderpatientdeliveryaddress)){
                error_count++
                error_msg += "<p><kbd class='text-uppercase'>Pengiriman Hasil</kbd> : Alamat pengiriman hasil pasien belum dipilih kan ya ?</p>"
            }

            if(parseInt(this.xorderdeliverytype.M_DeliveryID) === 2){
                var xd = this.xorderpatientdeliveryaddress
                this.$store.commit("form/update_orderdeliveryaddress",xd.M_PatientAddressDescription)
            }
            
            if(error_count > 0){
                this.errormsg = error_msg
                this.dialogerrormsg = true
            }
            else{
                var params = {
                    orderid:this.$store.state.form.orderid,
                    ordertype : this.xordertype.M_PreOrderTypeID,
                    orderdatetime : this.xorderdate,
                    orderphone : this.xorderphone,
                    orderpatient : this.xorderpatient.M_PatientID,
                    ordersex : this.xorderpatient.M_PatientM_SexID,
                    orderaddress : this.xorderaddress.M_PatientAddressID,
                    orderkelurahan : this.xorderaddress.M_PatientAddressM_KelurahanID,
                    ordertests : this.xordertests,
                    deleted_ordertests : this.$store.state.form.deleted_ordertests,
                    orderstaff : this.xorderstaff.M_StaffID,
                    orderdeliverydeliveryid:this.xorderdeliverytype.M_DeliveryID,
                    orderdeliverydeliverytype:this.xorderdeliverytype.M_DeliveryTypeID,
                    orderdeliverydestination:this.xorderdeliveryaddress,
                    orderdeliverykelurahan:this.xorderpatientdeliveryaddress.M_PatientAddressM_KelurahanID
                }
                this.$store.dispatch("form/updateorder",params)
            }
        },
        actConfirm(){
            this.$store.commit("form/update_btn_confirm",'show')
            this.$store.commit("form/update_title_ordernumber",'Konfirmasi')
            this.$store.commit("form/update_msg_ordernumber","<p>Yakin ? Ingin mengubah status menjadi 'CONFIRM' ?</p>")
            this.$store.commit("form/update_dialog_ordernumber",true)
        },
        doConfirm(){
            var params = {
                orderid:this.$store.state.form.orderid,
                fdate:this.xdate,
                fstatus:this.$store.state.status.selected_status.id
            }
            this.$store.commit("form/update_dialog_ordernumber",false)
            this.$store.commit("form/update_dialog_form",false)
            this.$store.dispatch("order/doconfirm",params)
        },
        closeDialogOrderNumber(val){
            this.$store.commit("form/update_dialog_ordernumber",val)
            var prm = {fdate:this.$store.state.order.fdate,fstatus:this.$store.state.status.selected_status.id}
            this.$store.dispatch("order/search",prm)
            this.$store.dispatch("order/lookup_staff",prm)
        }
    },
    watch: {
        search_city(val,old) {
            if (val == old ) return
            if (! val) return
            if (val.length < 1 ) return
            if (this.$store.state.form.update_autocomplete_status == 1 ) return  
            this.thr_search_city()
        },
        search_patient(val,old) {
            if (val == old ) return
            if (! val) return
            if (val.length < 1 ) return
            if (this.$store.state.form.update_autocomplete_status == 1 ) return  
            this.thr_search_patient()
        },
        search_test(val,old) {
            if (val == old ) return
            if (! val) return
            if (val.length < 1 ) return
            if (this.$store.state.form.update_autocomplete_status == 1 ) return  
            this.thr_search_test()
        }
   }
  }
</script>