<template>
        <v-layout column pb-2>
            <v-dialog  v-model="setting_controll"
                max-width="60%"
                persistent
            >
                <v-card>
                        <v-card-title
                            class="headline success pt-2 pb-2"
                            primary-title
                        >
                        <h4 style="color:#FFEBEE">Kartu Kontrol</h4>
                        </v-card-title>
                        <v-card-text class="pt-2 pb-2 ma-2">
                            <v-layout row>
                                <v-flex xs6 ma-2>
                                    <h4>SAMPLE STATION</h4>
                                </v-flex>
                                <v-flex xs6 ma-2>
                                    <h4>LOKASI</h4>
                                </v-flex>
                            </v-layout>
                            <v-layout v-for="(sl,sl_idx) in data_station_location" :key="sl_idx" row>
                                <v-flex xs6 ma-2>
                                    <v-text-field
                                        :value="sl.station_name"
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs6 ma-2>
                                    <v-select
                                        v-model="sl.location_id"
                                        :items="sl.locations"
                                        hide-details
 
                                        item-text="location_name"
                                        item-value="location_id"
                                        label="Pilih Lokasi"
                                        ></v-select>
                                </v-flex>
                            </v-layout>
                        </v-card-text>
                        <v-divider></v-divider>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                color="error"
                                flat
                                @click="setting_controll = false"
                            >
                            Tutup
                            </v-btn>
                            <v-btn
                                flat
                                @click="PrintControlCard()"
                            >
                            Print
                            </v-btn>
                        </v-card-actions>
                    </v-card>
            </v-dialog>
            <v-dialog
                v-model="kw_an_dialog"
                max-width="30%"
                persistent
                >
                    <v-card>
                        <v-card-title
                            class="headline success pt-2 pb-2"
                            primary-title
                        >
                        <h4 style="color:#FFEBEE">Kwitansi</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-text-field
                                                   label="Telah Terima Dari"
                                                   v-model="kw_an"
                                                   outline
                                               >
                                               </v-text-field>
                                            </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
                                flat
                                @click="printKW()"
                            >
                            Print
                            </v-btn>
                            <v-btn
                                color="error"
                                flat
                                @click="kw_an_dialog = false"
                            >
                            Tutup
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            <v-card >
                <v-layout row pa-2 align-center wrap >
                    <v-flex xs6>
                        <div class="label-tagihan text-xs-left">Total Tagihan</div>
                        <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1 class="mt-3"></v-layout>

                        <v-layout row wrap v-show="order_company.is_bill == 'N'">
                            <v-flex xs6>
                                <h3 class="subheading orange--text">Minimum DP ({{ order_company.min_dp }}%)</h3>
                            </v-flex>
                            <v-flex xs6>
                                <h3 class="subheading text-xs-right orange--text">{{ one_money(order_company.min_dp_rp) }}</h3>
                            </v-flex>
                        </v-layout>

                        <v-layout row wrap v-show="order_company.is_bill == 'Y' && order_company.on_hold == 'Y'">
                            <v-flex xs12>
                                <h3 class="subheading red--text">{{ order_company.on_hold_text }}</h3>
                            </v-flex>
                        </v-layout>

                    </v-flex>
                    <v-flex xs6>
                       <div class="text-tagihan text-xs-right"><kbd>{{ one_money(bill_total) }}</kbd></div>
                    </v-flex>
                </v-layout>
                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>

                <v-layout column>
                    <v-flex xs12 v-for="(p, pi) in payments" v-bind:key="p.payment_type_id">

                        <v-layout row pt-2 pb-1 pl-2 align-center wrap class="border-top-dashed">
                            <v-flex xs12>
                                <v-switch
                                    true-value="Y"
                                    false-value="N"
                                    v-model="payments[pi].payment_enable"
                                    :label="p.payment_type_name"
                                    @change="(v) => payment_enable(pi, v)"
                                    :disabled="paid"
                                ></v-switch>
                            </v-flex>
                        </v-layout>
                        <v-layout row pa-2 wrap >

                            <v-flex xs4 pr-2>
                                <!-- <div  class="pa-2"> -->
                                    <v-text-field
                                        v-bind:class="[p.payment_type_code == 'CASH' ? 'input-cash' : 'input-plain', 'text-xs-right font-weight-bold']"
                                        v-model="payments[pi].payment_actual"
                                        :disabled="paid || (payments[pi].payment_enable == 'Y' ? false : true)"
                                        @input="(v) => update_payments(pi, 'payment_actual', v)"
                                        reverse
                                        label="Jumlah"
                                        outline
                                    >
                                    </v-text-field>

                                <!-- </div> -->
                            </v-flex>
                            <v-flex xs4 v-if="['CASH', 'VOUCHER'].indexOf(p.payment_type_code) > -1">
                                <!-- <div class="pa-2"> -->
                                    <v-text-field
                                        v-show="p.payment_type_code == 'VOUCHER'"
                                        class="input-plain"
                                        v-model="payments[pi].payment_note"
                                        :disabled="paid || (payments[pi].payment_enable == 'Y' ? false : true)"
                                        @input="(v) => update_payments(pi, 'payment_amount', v)"
                                        reverse
                                        :label="p.payment_note_label"
                                        outline
                                    >
                                    </v-text-field>

                                    <v-text-field
                                        v-show="p.payment_type_code == 'CASH'"
                                        class="input-cash"
                                        v-model="payments[pi].payment_change_mask"
                                        disabled
                                        reverse
                                        :label="p.payment_note_label"
                                        outline
                                    >
                                    </v-text-field>
                                <!-- </div> -->
                            </v-flex>

                            <v-flex xs4 v-if="['CREDIT', 'DEBIT'].indexOf(p.payment_type_code) > -1" pr-2>
                                <v-autocomplete
                                    :items="cards"
                                    item-text="Nat_BankName"
                                    item-value="Nat_BankID"
                                    outline
                                    hide-details
                                    height="30"
                                    label="Kartu"
                                    @change="(v) => update_payments(pi, 'payment_card_id', v)"
                                    v-model="init_val_card[p.payment_type_code]"
                                ></v-autocomplete>
                            </v-flex>

                            <v-flex xs4 v-if="['CREDIT', 'DEBIT'].indexOf(p.payment_type_code) > -1">

                                <v-autocomplete
                                    :items="accounts"
                                    item-text="M_BankAccountNo"
                                    item-value="M_BankAccountID"
                                    outline
                                    hide-details
                                    height="30"
                                    label="EDC"
                                    @change="(v) => update_payments(pi, 'payment_account_id', v)"
                                    v-model="init_val_account[p.payment_type_code]"
                                ></v-autocomplete>

                            </v-flex>

                            <v-flex xs4 v-if="['TRANSFER'].indexOf(p.payment_type_code) > -1" pr-2>
                                <v-autocomplete
                                    :items="accounts"
                                    item-text="M_BankAccountNo"
                                    item-value="M_BankAccountID"
                                    outline
                                    hide-details
                                    height="30"
                                    label="No Rekening"
                                    @change="(v) => update_payments(pi, 'payment_account_id', v)"
                                    v-model="init_val_account[p.payment_type_code]"
                                ></v-autocomplete>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>

                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
                <!-- <v-layout row pa-2 align-center wrap >
                   <div>
                        <v-btn color="error" dark large @click="save" :disabled="!btn_save_enable">BAYAR</v-btn>
                    </div>
                </v-layout> -->
                <v-layout row pa-2 wrap >

                    <v-flex xs9>
                        <div>
                            <v-btn v-show="!is_bill" color="error" :dark="btn_save_enable && !paid" @click="save" :disabled="!btn_save_enable || paid || savepayment" class="mr-0">SIMPAN & BAYAR</v-btn>
                            <!--<v-btn v-show="is_bill" color="error" dark @click="print_bukti" class="mr-0">BUKTI PEMERIKSAAN</v-btn>-->
                            <!-- <v-btn color="primary" large @click="print_invoice" class="ml-0 mr-0">C INVOICE</v-btn>
                            <v-btn color="primary" large @click="print_control" class="ml-0">C KARTU KONTROL</v-btn> -->
                            <v-btn color="teal" dark @click="openSettingControl()">KARTU KONTROL</v-btn>
                            <template>
                                <v-menu offset-y top>
                                    <template v-slot:activator="{ on }">
                                        <v-btn
                                        color="orange"
                                        dark
                                        v-on="on"
                                        >
                                        <v-icon class="mr-1">print</v-icon>
                                        Cetak
                                        </v-btn>
                                    </template>
                                    <v-list>
                                        <v-list-tile
                                        v-for="(item, index) in menu_print"
                                        :key="index"
                                        @click="print_me(item.code)"
                                        >
                                        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                                        </v-list-tile>
                                    </v-list>
                                </v-menu>

                            </template>

                            <v-btn color="primary" @click="reset" class="ml-0 mr-0">
                                <v-icon class="mr-1">description</v-icon> BARU</v-btn>
                        </div>
                    </v-flex>
                    <v-flex xs3>
                        <div class="text-tagihan text-xs-right"><kbd>{{ one_money(payment_total) }}</kbd></div>
                    </v-flex>

                </v-layout>
            </v-card>
            <one-fo-registration-payment-finish></one-fo-registration-payment-finish>
            <one-dialog-print></one-dialog-print>
        </v-layout>

</template>

<style scoped>
.label-tagihan{
    text-align:left;
    font-size: 25px;
    font-family: open sans, tahoma, sans-serif;
    font-weight:700;
}

.sub-header{
    text-align:left;
    font-size: 18px;
    font-family: open sans, tahoma, sans-serif;
    font-weight:700;
}

.sub-title{
    text-align:left;
    font-size: 14px;
    font-family: open sans, tahoma, sans-serif;
    font-weight:700;
}

.text-tagihan{
    text-align:left;
    font-size: 42px;
    font-family: open sans, tahoma, sans-serif;
}

.input-cash{
    width: 100%;
    /* padding: 8px 14px; */
    /* box-sizing: border-box; */
    /* border: 2px solid grey;
    border-radius: 4px; */
    font-size: 22px;
    font-weight:700;
    text-align:right;
}
.input-plain{
    width: 100%;
    /* padding: 4px 8px; */
    /* box-sizing: border-box; */
    /* border: 2px solid grey;
    border-radius: 4px; */
    font-size: 14px;
}
.v-input, .v-input__slot, .v-messages{
    margin:0px;
    padding:0px;
    min-height: 0px;
}
.v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
    margin-bottom: 0px;
}

.border-top-dashed {
    border-top: 1px dashed rgb(221,221,221)
}
</style>
<script>
module.exports = {
    components : {
        'one-field-verification' : httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
        'one-fo-registration-payment-finish' : httpVueLoader('./oneFoRegistrationPaymentFinish.vue'),
        'one-dialog-print' : httpVueLoader('./oneDialogPrint.vue')
    },

     data () {
      return {
        items: [
        { title: 'BP' },
        { title: 'BP 1' },
        { title: 'BP 2' }
      ],

        checkbox: true,
        radioGroup: 1,
        switchCash: true,
        switchDebit: false,
        switchKredit: false,

        switch_payment_enable: [],

        payment_amount: [],
        menu_print: [
           // { title:"Cetak Kartu Kontrol", code:"P.CC" },
            { title:"Cetak BP", code:"P.BP" },
            { title:"Cetak BP 1", code:"P.BP1" },
            { title:"Cetak BP 2", code:"P.BP2" },
            { title:"Cetak INV 1", code:"P.INV1" },
            { title:"Cetak INV 2", code:"P.INV2" },
            { title:"Cetak Kwitansi", code:"P.KW" },
            { title:"Inform Concern", code:"P.IC" }
        ],
        init_val_edc:{"CREDIT":0,"DEBIT":0},
        init_val_card:{"CREDIT":0,"DEBIT":0},
        init_val_account:{"CREDIT":0,"DEBIT":0,"TRANSFER":0}
      }
    },

    methods : {
        PrintControlCard(){
            this.$store.dispatch('payment/save_control', {data:this.data_station_location})
        },
        openSettingControl(){
            this.$store.dispatch("payment/getLocations");
        },
        one_money(p) {
            return window.one_money(p)
        },

        payment_enable (idx, v) {
            let payments = this.payments
            payments[idx]['payment_enable'] = v
            if (v == "N") {
                payments[idx]['payment_actual'] = 0
                payments[idx]['payment_amount'] = 0
                payments[idx]['payment_card_id'] = 0
                payments[idx]['payment_edc_id'] = 0
                payments[idx]['payment_change'] = 0
                payments[idx]['payment_change_mask'] = 0
                this.init_val_edc[payments[idx]['payment_type_code']] = 0
                this.init_val_card[payments[idx]['payment_type_code']] = 0
            } else {
                payments[idx]['payment_amount'] = this.bill_rest
                payments[idx]['payment_actual'] = this.bill_rest
            }

            this.$store.commit('payment/update_payments', payments)
        },

        save() {
            this.$store.dispatch("payment/save");
            return
        },

        update_payments (idx, type, v) {
            let payments = this.payments
            payments[idx][type] = v
            this.$store.commit('payment/update_payments', payments)
        },
        removeParam(key, sourceURL) {
            var rtn = sourceURL.split("?")[0],
                param,
                params_arr = [],
                queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
            if (queryString !== "") {
                params_arr = queryString.split("&");
                for (var i = params_arr.length - 1; i >= 0; i -= 1) {
                    param = params_arr[i].split("=")[0];
                    if (param === key) {
                        params_arr.splice(i, 1);
                    }
                }
                if (params_arr.length) rtn = rtn + "?" + params_arr.join("&");
            }
            return rtn;
        },

        reset () {
            //location.reload()
            var originalURL = window.location.href
            var alteredURL = this.removeParam("app_doctor_id", originalURL)
            alteredURL = this.removeParam("que", alteredURL)
            alteredURL = this.removeParam("id_queue", alteredURL)
            alteredURL = this.removeParam("klinik_number", alteredURL)
            this.$store.dispatch('payment/reset', {redirect_url:alteredURL,order_id:this.$store.state.payment.order_id,time_start:this.$store.state.order.show_time})
        },

        print_other (type) {
            this.$store.dispatch('payment/print_other', {id:this.$store.state.payment.order_id,title:type})
            return
        },

        print_control_xx () {
            this.$store.dispatch('payment/print_control', this.$store.state.payment.order_id)
            return
        },
        print_control () {
            this.$store.dispatch('payment/print_control', {order_id:this.$store.state.payment.order_id,time_start:this.$store.state.order.show_time})
            return
        },
         printKW () {
         let usr = one_user()
         let ts = Date.now() / 1000 | 0
         let id = this.$store.state.payment.order_id
         let an = this.$store.state.payment.kw_an
         this.$store.commit('order/update_rpt_url', window.BASE_URL + '/birt/run?__report=report/one/fo/rpt_t_002.rptdesign&PID='+id+'&username='+usr.M_StaffName+'&an='+an+'&__format=pdf', {root:true})
         this.$store.commit('order/update_print_dialog_is_active', true, {root:true})
      },

        print_me (c) {
            if (c !== "P.CC")
                return this.print_other(c)
            else if (c == "P.CC")
                return this.print_control()
        },

        xxx(v) {
            alert(v)
        },

        print_bukti(type) {
            console.log(this.$store.state.payment.order_id)
            this.$store.dispatch('payment/print_nota', {id:this.$store.state.payment.order_id,type:type})
        }
    },

    computed : {
        setting_controll: {
            get () {
                return this.$store.state.payment.setting_controll
            },
            set (v) {
                this.$store.commit('payment/update_setting_controll', v)
            }
        },
        data_station_location : {
            get () {
                return this.$store.state.payment.data_station_location
            },
            set (v) {
                this.$store.commit('payment/update_data_station_location', v)
            }
        },
        locations : {
            get () {
                return this.$store.state.payment.locations
            },
            set (v) {
                this.$store.commit('payment/update_locations', v)
            }
        },
        kw_an_dialog : {
            get () {
                return this.$store.state.payment.kw_an_dialog
            },
            set (v) {
                this.$store.commit('payment/update_kw_an_dialog', v)
            }
        },
        kw_an : {
            get () {
                return this.$store.state.payment.kw_an
            },
            set (v) {
                this.$store.commit('payment/update_kw_an', v)
            }
        },
        bill_total() {
            return this.$store.state.payment.order_total
        },

        payment_total () {
            return this.$store.state.payment.payment_total
        },

        bill_rest () {
            return this.bill_total - this.payment_total
        },

        savepayment () {
            return this.$store.state.payment.savepayment
        },

        payment_cash_amount : {
            get () {
                return this.$store.state.payment.order_total
            },
            set (v) {
                // this.$store.commit('payment/update_payment', {type:'cash',amount:v})
                return
            }
        },

        payment_debit_amount : {
            get () {
                return 0
            },
            set (v) {
                return
            }
        },

        payment_credit_amount : {
            get () {
                return 0
            },
            set (v) {
                return
            }
        },

        payments : {
            get () {
                let p = this.$store.state.payment.payments
                for (let i in p)
                    p[i].payment_change_mask = window.one_money(p[i].payment_change)

                return p
                // [{"payment_type_id":"1","payment_type_name":"Cash","payment_type_code":"CASH","payment_amount":"0","payment_note":"","payment_note_label":"Kembali","payment_enable":"N"},{"payment_type_id":"2","payment_type_name":"Debit","payment_type_code":"DEBIT","payment_amount":"0","payment_note":"","payment_note_label":"Nomor Kartu","payment_enable":"N"},{"payment_type_id":"3","payment_type_name":"Credit","payment_type_code":"CREDIT","payment_amount":"0","payment_note":"","payment_note_label":"Nomor Kartu","payment_enable":"N"},{"payment_type_id":"4","payment_type_name":"Voucher","payment_type_code":"VOUCHER","payment_amount":"0","payment_note":"","payment_note_label":"Nomor Voucher","payment_enable":"N"}]
            },
            set (v) {
                this.$store.commit('payment/update_payments', v)
                return
            }
        },

        order_id : {
            get () {
                return this.$store.state.payment.order_id
            },

            set (v) {
                return
            }
        },

        btn_save_enable () {
            if (this.payments.length < 1)
                return false

            let en = false
            let sm = 0
            for (let i in this.payments) {
                let p = this.payments[i]
                if (p.payment_enable == "Y") {
                    en = true
                    sm = sm + Math.round(p.payment_amount)

                    // IF DEBIT OR CREDIT
                    if (['DEBIT', 'CREDIT'].indexOf(p.payment_type_code) > -1) {
                        if (p.payment_card_id == 0 || p.payment_account_id == 0)
                            en = false
                    }

                    if (['TRANSFER'].indexOf(p.payment_type_code) > -1) {
                        if (p.payment_account_id == 0)
                            en = false
                    }

                    console.log(p.payment_type_code + '-' + en)
                }
            }

            if (!en) return false

            if (this.$store.state.payment.order_id == 0 ||
                this.$store.state.payment.order_id == "0")
                return false;

            if (sm == 0)
                return false

            return true
        },

        paid : {
            get () { return this.$store.state.payment.paid },
            set (v) { this.$store.commit('payment/update_paid', v) }
        },

        order_company () {
            return this.$store.state.payment.order_company
        },

        banks () {
            return this.$store.state.other.banks
        },

        cards () {
            return this.$store.state.other.cards
        },

        accounts () {
            return this.$store.state.other.accounts
        },

        is_bill () {
            return this.$store.state.company.selected_mou.M_MouIsBill == "Y"
        }
    },

    mounted () {
        this.$store.dispatch('payment/search')
        this.$store.dispatch('other/search_bank')
        this.$store.dispatch('other/search_card')
        this.$store.dispatch('other/search_accounts')
    },

    watch : {
        switch_payment_enable (n, o) {
            if (n != o) {
                if (n.length < o.length) {
                    for (let i in o)
                        if (n.indexOf(o[i]) < 0)
                            return
                }
            }
        },

        order_id (n, o) {
            if (n == 0 || n == "0")
                this.$store.commit("order/update_tab_enable", [2, false])
            else
                this.$store.commit("order/update_tab_enable", [2, true])
        }
    }
}
</script>
