<template>
    <v-layout class="fill-height" column>
        <!-- alert dialog start -->
        <v-dialog v-model="dialogsuccess" persistent max-width="290">
            <v-card>
                <v-card-title color="success" class="headline">Berhasil !</v-card-title>
                <v-card-text>
                    {{msgsuccess}}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- alert dialog end -->

        <!-- alert dialog error start -->
        <v-dialog v-model="dialogerror" persistent max-width="290">
            <v-card>
                <v-card-title color="error" class="headline">Error !</v-card-title>
                <v-card-text>
                    {{msgerror}}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" flat @click="closeDialogError">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- alert dialog error end -->

        <!-- dialog confirmation start -->
        <v-dialog v-model="dialogconfirmationdelete" persistent max-width="290">
            <v-card>
                <v-card-title dark class="headline error pt-2 pb-2" primary-title style="color:white">
                    <h4 dark>Konfirmasi</h4>
                </v-card-title>
                <v-card-text>
                    {{msgconfirmationdelete}}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn small color="error darken-1 text-sm-left" flat @click="doDeleteData()">Hapus</v-btn>
                    <v-btn small color="primary darken-1 text-sm-right" flat @click="dialogconfirmationdelete = false">Batal</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- dialog confirmation end -->

        <!-- dialog add start -->
        <v-dialog v-model="dialogadd" persistent max-width="900">
            <v-card>
                <v-card-title dark class="headline primary pt-2 pb-2" primary-title style="color:white; display: flex; justify-content: space-between;">
                    <h4 dark>Paket</h4>
                    <!-- <v-btn icon @click="dialogadd = false" class="pt-2 pb-2" style="color: white;">
                        <v-icon>close</v-icon>
                    </v-btn> -->
                    <v-btn icon @click="closeForm()" class="pt-2 pb-2" style="color: white;">
                        <v-icon>close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                    <v-layout row wrap>
                        <!-- left start -->
                        <v-flex xs6 pa-2>
                            <!-- nama paket -->
                            <v-text-field
                                color="black"
                                label="Nama Paket"
                                v-model="inp_T_PacketName"
                                single-line
                                hide-details
                            ></v-text-field>
                            <p  v-if="_.isEmpty(inp_T_PacketName)" class="error caption mt-1 mb-0 pl-2 pr-2 pb-2" style="color:#fff">Belum isi nama paket</p>
                            <!-- nama paket -->

                            <!-- tgl start date -->
                            <v-flex xs12 pt-2>
                                <v-menu 
                                    v-model="menufilterdatestart"
                                    :close-on-content-click="false"
                                    :nudge-right="40"
                                    lazy
                                    transition="scale-transition"
                                    offset-y
                                    hide-details
                                    full-width
                                    max-width="290px"
                                    min-width="290px"
                                    >
                                    <template v-slot:activator="{ on }">
                                        <v-text-field
                                        
                                        v-model="filterComputedDateFormattedStart"
                                        label="Tanggal Awal"
                                        style="font-size:12px"
                                        outline
                                        hide-details
                                        readonly
                                        v-on="on"
                                        @blur="date = deFormatedDate(filterComputedDateFormattedStart)"
                                        ></v-text-field>
                                    </template>
                                    <v-date-picker v-model="xdatestart" no-title @input="menufilterdatestart = false"></v-date-picker>
                                </v-menu>
                            </v-flex>
                            <!-- tgl start date -->

                            <!-- tgl end date -->
                            <v-flex xs12 pt-2>
                                <v-menu 
                                    v-model="menufilterdateend"
                                    :close-on-content-click="false"
                                    :nudge-right="40"
                                    lazy
                                    transition="scale-transition"
                                    offset-y
                                    full-width
                                    hide-details
                                    max-width="290px"
                                    min-width="290px"
                                    >
                                    <template v-slot:activator="{ on }">
                                        <v-text-field
                                        
                                        v-model="filterComputedDateFormattedEnd"
                                        label="Tanggal Akhir"
                                        outline
                                        style="font-size:12px"
                                        readonly
                                        hide-details
                                        v-on="on"
                                        @blur="date = deFormatedDate(filterComputedDateFormattedEnd)"
                                        ></v-text-field>
                                    </template>
                                    <v-date-picker :min="xdatestart" v-model="xdateend" no-title @input="menufilterdateend = false"></v-date-picker>
                                </v-menu>
                            </v-flex>
                            <!-- tgl end date -->

                            <!-- dropdown tpriceheader current -->
                            <v-flex xs12 pt-2>
                                <v-select 
                                    :items="xtpriceheaderformCb" 
                                    v-model="selected_tpriceheaderformCb" 
                                    item-text="T_PriceHeaderName"
                                    hide-details
                                    item-value="T_PriceHeaderID" 
                                    return-object 
                                    label="Price Header"
                                    @change="changePriceHeaderForm"
                                >
                                </v-select>
                                <p  v-if="_.isEmpty(selected_tpriceheaderformCb)" class="error caption mt-1 mb-0 pl-2 pr-2 pb-2" style="color:#fff">Belum pilih price header</p>
                            </v-flex>
                            <!-- dropdown tpriceheader current -->

                            <!-- dropdown auto complete grup pemeriksaan -->
                            <v-flex xs12 pt-2>
                                <v-autocomplete 
                                    :items="xnatsubgroupCb" 
                                    v-model="selected_natsubgroupCb" 
                                    item-text="Nat_SubGroupName"
                                    hide-details
                                    item-value="Nat_SubGroupID" 
                                    return-object 
                                    label="Grup Pemeriksaan"
                                    @change="changeGroupPemeriksaanForm"
                                >
                                </v-autocomplete>
                                <p  v-if="_.isEmpty(selected_tpriceheaderformCb)" class="error caption mt-1 mb-0 pl-2 pr-2 pb-2" style="color:#fff">Belum pilih price header</p>
                            </v-flex>
                            <!-- dropdown auto complete group pemeriksaan -->

                            <v-layout row>
                                <!-- cari kode -->
                                <v-flex xs6 pt-2>
                                    <v-text-field
                                        color="black"
                                        label="Cari Kode"
                                        placeholder="Cari Kode, Lalu Enter"
                                        v-model="search_kode"
                                        @keyup.enter="searchKode()"
                                        single-line
                                        hide-details
                                    ></v-text-field>
                                </v-flex>
                                <!-- cari kode -->
                                <!-- cari nama -->
                                <v-flex xs6 pt-2 pl-3>
                                    <v-text-field
                                        color="black"
                                        label="Cari Nama"
                                        placeholder="Cari Nama, Lalu Enter"
                                        v-model="search_nama"
                                        @keyup.enter="searchNama()"
                                        single-line
                                        hide-details
                                    ></v-text-field>
                                </v-flex>
                                <!-- cari nama -->
                            </v-layout>

                            <!-- list t_price start -->
                            <v-layout row>
                                <v-flex xs12 pt-4 pb-2>
                                    <v-data-table 
                                        :headers="headersTPrice" 
                                        :items="tprices" 
                                        :loading="isLoading" 
                                        hide-actions 
                                        class="elevation-1">
                                        <template slot="items" slot-scope="props">
                                            <td v-bind:class="{'amber lighten-4':isSelectedTPrice(props.item)}"  class="text-xs-left pa-1">
                                                {{ props.item.T_TestCode}}
                                            </td>
                                            <td v-bind:class="{'amber lighten-4':isSelectedTPrice(props.item)}"  class="text-xs-left pa-1">
                                                {{ props.item.T_TestName}}
                                            </td>
                                            <td v-bind:class="{'amber lighten-4':isSelectedTPrice(props.item)}"  class="text-xs-left pa-1" >              
                                                <v-btn 
                                                    v-if="packetExist(props.item)"
                                                    style="min-width:25px;margin:0" @click="itemSelectedToPush(props.item)" small color="info">
                                                    Pilih
                                                </v-btn>
                                                <v-btn
                                                    v-if="!packetExist(props.item)"
                                                    style="min-width:25px;margin:0;background-color: red;color: white;" @click="itemSelectedToPush(props.item)" small disabled>
                                                    Sudah Dipilih
                                                </v-btn>
                                            </td>
                                        </template>
                                    </v-data-table>
                                    <v-pagination style="margin-top:10px;margin-bottom:10px" :total-visible="15" v-model="curr_page_tprice" :length="xtotal_page_tprice"></v-pagination>
                                </v-flex>
                            </v-layout>
                            <!-- list t_price end -->
                        </v-flex>
                        <!-- left end -->

                        <!-- right start -->
                        <v-flex xs6 pa-2>
                            <!-- radio button jenis paket -->
                            <v-layout row>
                                <v-flex xs12 pt-3>
                                    <!-- <p>Jenis Paket</p> -->
                                    <p style="font-weight: bold;font-size: 14px;">Jenis Paket</p>
                                    <!-- <v-radio-group 
                                            :readonly="tpacketdetails.length > 0"
                                            v-model="xtpacketRb" 
                                            @change="showFields()" 
                                            row hide-details pt-0
                                        >
                                        <v-radio label="Panel" value="PN"></v-radio>
                                        <v-radio label="Profile" value="PR"></v-radio>
                                    </v-radio-group> -->
                                        <v-radio-group 
                                            v-model="xtpacketRb" 
                                            row hide-details pt-0
                                        >
                                        <v-radio label="Panel" value="PN"></v-radio>
                                        <v-radio label="Profile" value="PR"></v-radio>
                                    </v-radio-group>
                                    <p  v-if="_.isEmpty(xtpacketRb)" class="error caption mt-1 mb-0 pl-2 pr-2 pb-2" style="color:#fff">Belum pilih jenis paket</p>
                                </v-flex>
                            </v-layout>
                            <!-- radio button jenis paket -->

                            <!-- list detail paket array -->
                            <v-layout row>
                                <v-flex xs12 pt-4 pb-2>
                                    <p style="font-weight: bold;font-size: 18px;">Detail Paket</p>
                                    <v-data-table 
                                        :headers="headersTPacketDetailArray" 
                                        :items="tpacketdetails" 
                                        :loading="isLoading" 
                                        hide-actions 
                                        class="elevation-1">
                                        <template slot="items" slot-scope="props">
                                            <!-- <td v-bind:class="{'amber lighten-4':isSelectedTPrice(props.item)}"  class="text-xs-left pa-1">
                                                {{ props.item.T_TestName}}
                                            </td> -->
                                            <td class="text-xs-left pa-1">
                                                {{ props.item.T_TestName}}
                                            </td>
                                            <!-- <td v-bind:class="{'amber lighten-4':isSelectedTPrice(props.item)}"  class="text-xs-right pa-1">
                                                {{convertMoney(props.item.T_PriceTotal)}}
                                            </td> -->
                                            <td class="text-xs-right pa-1">
                                                {{convertMoney(props.item.T_PriceTotal)}}
                                            </td>
                                            <!-- <td v-bind:class="{'amber lighten-4':isSelectedTPrice(props.item)}"  class="text-xs-right pa-1">
                                                <v-text-field
                                                    :readonly="xtpacketRb === 'PR'"
                                                    color="black"
                                                    v-model="props.item.T_PriceTotalPacket"
                                                    :value="xtpacketRb === 'PR' ? convertMoney(props.item.T_PriceTotal) : convertMoney(props.item.T_PriceTotalPacket)"
                                                    @input="updatePrice($event,props.item)"
                                                    single-line
                                                    hide-details
                                                    type="number"
                                                    :min="0"
                                                    class="right-input" 
                                                ></v-text-field>
                                            </td> -->
                                            <td class="text-xs-right pa-1">
                                                <!-- <v-text-field
                                                    :readonly="xtpacketRb === 'PR'"
                                                    color="black"
                                                    v-model="props.item.T_PriceTotalPacket"
                                                    :value="xtpacketRb === 'PR' ? convertMoney(props.item.T_PriceTotal) : convertMoney(props.item.T_PriceTotalPacket)"
                                                    @input="updatePrice($event,props.item)"
                                                    single-line
                                                    hide-details
                                                    type="number"
                                                    :min="0"
                                                    class="right-input" 
                                                ></v-text-field> -->
                                                <v-text-field
                                                    color="black"
                                                    v-model="props.item.T_PriceTotalPacket"
                                                    :value="convertMoney(props.item.T_PriceTotalPacket)"
                                                    @input="updatePrice($event,props.item)"
                                                    single-line
                                                    hide-details
                                                    type="number"
                                                    :min="0"
                                                    class="right-input" 
                                                ></v-text-field>
                                            </td>
                                            <!-- <td v-bind:class="{'amber lighten-4':isSelectedTPrice(props.item)}"  class="text-xs-right pa-1 pr-2" >              
                                                <v-btn style="min-width:25px;margin:0" 
                                                    @click="removeFromDetailPackets(props.item)" small color="red">
                                                    <v-icon 
                                                        style="cursor:pointer;font-size:18px">
                                                        delete
                                                    </v-icon>
                                                </v-btn>
                                            </td> -->
                                            <td class="text-xs-right pa-1 pr-2" >              
                                                <v-btn style="min-width:25px;margin:0" 
                                                    @click="removeFromDetailPackets(props.item)" small color="red">
                                                    <v-icon 
                                                        style="cursor:pointer;font-size:18px">
                                                        delete
                                                    </v-icon>
                                                </v-btn>
                                            </td>
                                        </template>
                                        <template v-slot:footer v-if="!_.isEmpty(tpacketdetails)">
                                            <td class="text-xs-left pa-1">
                                                <strong>Total</strong>
                                            </td>
                                            <td class="text-xs-right pa-1">
                                                <!-- {{ totalTPriceAwal }} -->
                                                <strong>{{ convertMoney(totalTPriceAwal) }}</strong>
                                            </td>
                                            <td :colspan="1" class="text-xs-right pa-1">
                                                <!-- {{ totalTPricePacket }} -->
                                                <strong>{{ convertMoney(totalTPricePacket) }}</strong>
                                            </td>
                                        </template>
                                    </v-data-table>
                                    <p  v-if="_.isEmpty(tpacketdetails)" class="error caption mt-1 mb-0 pl-2 pr-2 pb-2" style="color:#fff">Belum pilih price</p>
                                    <!-- <v-pagination style="margin-top:10px;margin-bottom:10px" :total-visible="15" v-model="curr_page_tpacketdetails" :length="xtotal_page_tpacketdetails"></v-pagination> -->
                                </v-flex>
                            </v-layout>
                            <!-- list detail paket array -->
                        </v-flex>
                        <!-- right end -->
                    </v-layout>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="blue darken-1" flat @click="closeForm()">Tutup</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn v-if="
                        !_.isEmpty(inp_T_PacketName)
                        && tpacketdetails.length > 0
                        && !_.isEmpty(selected_tpriceheaderformCb)"
                         color="blue darken-1" flat @click="savePacket()">Simpan</v-btn>
                    <!-- <v-btn small color="primary darken-1 text-sm-right" flat @click="dialogconfirmationdetailpaket = false">Close</v-btn> -->
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- dialog add end -->

        <!-- listing start -->
        <v-card class="mb-2 pa-2 searchbox">
            <v-layout row>
                <!-- filter start -->
                <v-flex pt-1 pl-2 pr-2 pb-1 xs7>
                    <v-text-field
                        color="black"
                        label="Cari"
                        placeholder="Ketikkan Nama, Lalu tekan Enter"
                        v-model="search_tpacket"
                        @keyup.enter="searchTPacket()"
                        single-line
                        hide-details
                    ></v-text-field>
                </v-flex>
                <!-- dropdown t_headerprice start -->
                <v-flex pt-1 pl-2 pb-1 xs5>
                    <v-select 
                        :items="xtpriceheaderCb" 
                        v-model="selected_tpriceheaderCb" 
                        item-text="T_PriceHeaderName"
                        hide-details
                        item-value="T_PriceHeaderID" 
                        return-object 
                        label="Price Header"
                        @change="onPriceHeaderChange"
                    >
                    </v-select>
                </v-flex>
                <!-- dropdown t_headerprice end -->
                <!-- add button start -->
                <v-flex class="text-xs-right">
                    <span
                        v-if="props.item.T_PacketIsGenerated !== 'Y'" 
                        @click="setNewPacketX" class="icon-medium-fill-base xs1 white--text primary mr-0 icon-add"></span>
                </v-flex>
                <!-- add button end -->
                <!-- filter end -->
            </v-layout>
        </v-card>

        <v-card>
            <v-layout row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table 
                        :headers="headers" 
                        :items="tpackets" 
                        :loading="isLoading" 
                        hide-actions 
                        class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td v-bind:class="{'amber lighten-4':isSelected(props.item)}"  class="text-xs-left pa-1">
                                {{ props.item.T_PacketType}}
                            </td>
                            <td v-bind:class="{'amber lighten-4':isSelected(props.item)}"  class="text-xs-left pa-1">
                                {{ props.item.T_PacketName}}
                            </td>
                            <td v-bind:class="{'amber lighten-4':isSelected(props.item)}"  class="text-xs-left pa-1" >              
                                <v-btn 
                                    v-if="props.item.T_PacketIsGenerated !== 'Y'"
                                    style="min-width:25px;margin:0" @click="editRow(props.item)" small color="info"><v-icon small>edit</v-icon></v-btn>
                                <v-btn
                                    v-if="props.item.T_PacketIsGenerated !== 'Y'" 
                                    style="min-width:25px;margin:0" @click="deleteData(props.item)" small color="error"><v-icon small>close</v-icon></v-btn>
                            </td>
                        </template>
                    </v-data-table>
                    <v-pagination style="margin-top:10px;margin-bottom:10px" :total-visible="15" v-model="curr_page" :length="xtotal_page"></v-pagination>
                </v-flex>
            </v-layout>
        </v-card>
        <!-- listing end -->

        <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()" @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
    </v-layout>
</template>

<style>
    .right-input input {
        text-align: right;
    }
</style>

<script>
    module.exports = {
        components: {
            'one-dialog-info' : httpVueLoader('../../common/oneDialogInfo.vue'),
            'one-dialog-alert': httpVueLoader('../../common/oneDialogAlert.vue')
        },
        mounted() {
            this.$store.dispatch("packet/getTPriceHeader")
            this.$store.dispatch("packet/getTPriceHeaderCurrent")
            this.$store.dispatch("packet/getGroupPemeriksaan")

            // listing table
            var prm = {}
            prm.search = this.search_tpacket
            prm.current_page = 1
            prm.tpriceheader = "All"
            // prm.natsubgroup = "All"
            this.$store.commit("packet/update_current_page", 1)
            this.$store.dispatch("packet/searchv0", prm)
        },
        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')}`
            },
            changeGroupPemeriksaanForm(selectedItem){
                console.log('Selected item pemeriksaan:', selectedItem.Nat_SubGroupID);
                this.$store.commit("packet/update_selected_natsubgroupCb", {
                    Nat_SubGroupID: selectedItem.Nat_SubGroupID,
                    Nat_SubGroupNat_GroupID:"",
                    Nat_SubGroupCode:"",
                    Nat_SubGroupName:selectedItem.Nat_SubGroupName,
                    Nat_SubGroupLangName:"",
                    Nat_SubGroupIsResult:"",
                    Nat_SubGroupReportTitle:"",
                    Nat_SubGroupCreated:"",
                    Nat_SubGroupLastUpdated:"",
                    Nat_SubGroupIsActive:""
                })
                this.search_nama = "";
                this.search_kode = "";
                this.searchKode()
            },
            changePriceHeaderForm(selectedItem){
                console.log('Selected item:', selectedItem.Nat_SubGroupID);
                this.$store.commit("packet/update_selected_natsubgroupCb",{
                    Nat_SubGroupID:"All",
                    Nat_SubGroupNat_GroupID:"",
                    Nat_SubGroupCode:"",
                    Nat_SubGroupName:"All",
                    Nat_SubGroupLangName:"",
                    Nat_SubGroupIsResult:"",
                    Nat_SubGroupReportTitle:"",
                    Nat_SubGroupCreated:"",
                    Nat_SubGroupLastUpdated:"",
                    Nat_SubGroupIsActive:""
                })
                this.search_nama = "";
                this.search_kode = "";
                this.searchKode()
            },
            showFields(){
                if(this.xtpacketRb === 'PR'){
                    this.tpacketdetails.forEach(detail => {
                        detail.T_PriceTotalPacket = detail.T_PriceTotal;
                    });
                    this.updateTotals()
                }
            },
            editRow(row) {
                console.log('item edit ', row)
                this.$store.commit("packet/update_selected_packet", row)
                this.$store.dispatch("packet/getPacketById", row)
            },
            deleteData(row){
                console.log('item delete ', row)
                this.$store.commit("packet/update_selected_packet", row)
                console.log(this.$store.state.packet.selected_packet)
                let msg = "Yakin, akan menghapus data paket " + this.$store.state.packet.selected_packet.T_PacketName + " ?"
                this.$store.commit("packet/update_msg_confirmation_delete", msg)
                this.$store.commit("packet/update_dialog_confirmation_delete", true)
            },
            doDeleteData() {
                var prm = {}
                prm.id   = this.$store.state.packet.selected_packet.T_PacketID
                prm.name = this.$store.state.packet.selected_packet.T_PacketName
                console.log(prm)
                this.$store.dispatch("packet/deletev0", prm)
            },
            closeForm(){
                this.$store.commit("packet/update_inp_T_PacketName", "")
                this.$store.commit("packet/update_selected_tpriceheaderformCb",{})
                this.$store.commit("packet/update_selected_natsubgroupCb",{})
                this.$store.commit("packet/update_tpackettypeRb",'PN')
                this.$store.commit("packet/update_tpacketdetails", [])
                this.$store.commit("packet/update_totalTPriceAwal", 0)
                this.$store.commit("packet/update_totalTPricePacket", 0)
                this.$store.commit("packet/update_search_nama", "")
                this.$store.commit("packet/update_search_kode", "")
                this.$store.commit("packet/update_tprices",[])
                this.$store.commit("packet/update_total_prices",0)
                // this.dialog_add = false;

                this.$store.commit("packet/update_dialog_add", false)
            },
            closeDialogError(){
                this.$store.commit("packet/update_dialog_error", false)
            },
            updatePrice(value,item) {
                item.T_PriceTotalPacket = parseFloat(value.replace(/[^\d.-]/g, ''));
                this.totalTPricePacket = this.tpacketdetails.reduce((sum, item) => {
                    const pricePacket = parseFloat(item.T_PriceTotalPacket) || 0;
                    return sum + pricePacket;
                }, 0);
            },
            convertMoney(money) {
                return one_money(money)
            },  
            updateTotals() {
                this.totalTPricePacket = this.tpacketdetails.reduce((sum, item) => {
                    const pricePacket = parseFloat(item.T_PriceTotalPacket) || 0;
                    return sum + pricePacket;
                }, 0);

                this.totalTPriceAwal = this.tpacketdetails.reduce((sum, item) => {
                    const priceTotal = parseFloat(item.T_PriceTotal) || 0;
                    return sum + priceTotal;
                }, 0);
            },
            savePacket() {
                var prm = {
                    xid:this.$store.state.packet.xid,
                    act:this.$store.state.packet.act,
                    namapacket:this.$store.state.packet.inp_T_PacketName,
                    priceheader:this.$store.state.packet.selected_tpriceheaderformCb,
                    jenispacket:this.$store.state.packet.tpackettypeRb,
                    detailpacket:this.$store.state.packet.tpacketdetails,
                    T_PacketOriginalPrice: this.totalTPriceAwal,
                    T_PacketPrice: this.totalTPricePacket,
                    lastid: -1
                };

                console.log('inputan ',prm)
                this.$store.dispatch("packet/savesetupv0", prm)
            },
            removeFromDetailPackets(item) {
                var selected_tpacketdetails = this.$store.state.packet.tpacketdetails
                var idx = _.findIndex(selected_tpacketdetails, function(o) { return parseInt(o.T_TestID) === parseInt(item.T_TestID)})
                selected_tpacketdetails.splice(idx, 1)
                this.updateTotals();
            },
            packetExist(item) {
                var selected_tpacketdetails = this.$store.state.packet.tpacketdetails
                var idx = _.findIndex(selected_tpacketdetails, function(o) { return parseInt(o.T_TestID) === parseInt(item.T_TestID)})
                if(idx === -1){
                    return true
                }
                else{
                    return false
                }
            },
            itemSelectedToPush(row){
                // console.log('item selected to push', row)
                // this.$store.commit("packet/update_tpacketdetails", [row])
                var arrTx = [];
                arrTx.push(row);

                for (let x = 0; x < arrTx.length; x++) {
                    let alreadyExists = false;
                    for (let index = 0; index < this.tpacketdetails.length; index++) {
                        if (this.tpacketdetails[index].T_TestID === arrTx[x].T_TestID) {
                            alreadyExists = true;
                            break;
                        }
                    }
                    if (!alreadyExists) {
                        // this.tpacketdetails.push(arrTx[x]);
                        this.tpacketdetails.push({
                            T_PacketDetailT_TestID: arrTx[x].T_PriceT_TestID,
                            T_PriceTotal: arrTx[x].T_PriceTotal,
                            T_PriceTotalPacket: arrTx[x].T_PriceTotalPacket,
                            T_PacketDetailIsActive: arrTx[x].T_PriceIsActive,
                            T_PacketDetailCreated: arrTx[x].T_PriceCreated,
                            T_PacketDetailLastUpdated: arrTx[x].T_PriceLastUpdated,
                            T_PacketDetailPriceAmount: arrTx[x].T_PriceAmount,
                            T_PacketDetailPriceDisc: arrTx[x].T_PriceDisc,
                            T_PacketDetailPriceDiscRp: arrTx[x].T_PriceDiscRp,
                            T_PacketDetailPriceSubTotal: arrTx[x].T_PriceSubTotal,
                            T_TestID: arrTx[x].T_TestID,
                            T_TestName: arrTx[x].T_TestName
                        })
                        this.updateTotals();
                    }
                }
                
                // this.tpacketdetails.push(row);
                // this.$store.commit("packet/update_pricepackets", [row])
                console.log('item selected to push', this.$store.state.packet.tpacketdetails)
            },
            isSelectedTPrice(p) {
                return p.T_PriceID == this.$store.state.packet.selected_tprice.T_PriceID
            },
            searchKode(){
                // alert('cari kode')
                var prm = {}
                prm.tpriceheader = this.selected_tpriceheaderformCb.T_PriceHeaderID
                prm.natsubgroup = this.$store.state.packet.selected_natsubgroupCb.Nat_SubGroupID
                prm.searchNama = this.search_nama
                prm.searchKode = this.search_kode
                prm.current_page = this.curr_page_tprice
                this.$store.commit("packet/update_current_page_tprice", 1)
                this.$store.dispatch("packet/searchTPricev0", prm)
            },
            searchNama(){
                // alert('cari nama')
                var prm = {}
                prm.tpriceheader = this.selected_tpriceheaderformCb.T_PriceHeaderID
                prm.natsubgroup = this.$store.state.packet.selected_natsubgroupCb.Nat_SubGroupID
                prm.searchNama = this.search_nama
                prm.searchKode = this.search_kode
                prm.current_page = this.curr_page_tprice
                this.$store.commit("packet/update_current_page_tprice", 1)
                this.$store.dispatch("packet/searchTPricev0", prm)
            },
            onPriceHeaderChange(valuePriceHeader){
                // console.log('Selected Price Header:', valuePriceHeader);
                var prm = {}
                prm.search = this.search_tpacket
                prm.current_page = 1
                prm.tpriceheader = valuePriceHeader.T_PriceHeaderID
                this.$store.commit("packet/update_current_page", 1)
                this.$store.dispatch("packet/searchv0", prm)
            },
            isSelected(p) {
                return p.T_PacketID == this.$store.state.packet.selected_packet.T_PacketID
            },
            setNewPacketX(){    
                // alert('show add form')
                this.$store.commit("packet/update_act", 'new')
                this.$store.commit("packet/update_xid", -1)
                this.$store.commit("packet/update_dialog_add", true)
            },
            searchTPacket(){
                // alert('search t packet')
                var prm = {}
                prm.search = this.search_tpacket
                prm.current_page = this.curr_page
                prm.tpriceheader = this.$store.state.packet.selected_tpriceheaderCb.T_PriceHeaderID
                // prm.natsubgroup = this.selected_natsubgroupCb
                this.$store.commit("packet/update_current_page", 1)
                this.$store.dispatch("packet/searchv0", prm)
            },
            closeAlertConfirmation() {
                this.$store.commit("packet/update_open_alert_confirmation", false)
            },
            forgetAlertConfirmation() {
                this.$store.commit("packet/update_no_save", 0)
                this.$store.commit("packet/update_open_alert_confirmation", false)
            },
            closeDialogSuccess() {
                let arrpacket = this.$store.state.packet.tpackets
                var idx = _.findIndex(arrpacket, item => item.T_PacketID === this.$store.state.packet.last_id)
                console.log(idx)
                // this.$store.dispatch("patient/search", {
                //     status: this.status,
                //     current_page: this.curr_page,
                //     lastid: idx
                // })

                // var prm = {}
                // prm.search = this.search_tpacket
                // prm.current_page = this.curr_page
                // prm.tpriceheader = this.$store.state.packet.selected_tpriceheaderCb.T_PriceHeaderID

                this.$store.dispatch("packet/searchv0", {
                    // natsubgroup: this.selected_natsubgroupCb,
                    search: this.search_tpacket,
                    tpriceheader: this.$store.state.packet.selected_tpriceheaderCb.T_PriceHeaderID,
                    current_page: this.curr_page,
                    lastid: idx
                })
                this.$store.commit("packet/update_dialog_success", false)
            },
        },
        computed: {
            xdatestart : {
                get() {
                    return this.$store.state.packet.start_date
                },
                set(val) {
                    this.$store.commit("packet/update_start_date",val)
                    //this.searchTransaction()
                }
            },
            xdateend : {
                get() {
                    return this.$store.state.packet.end_date
                },
                set(val) {
                    this.$store.commit("packet/update_end_date",val)
                    //this.searchTransaction()
                }
            },
            filterComputedDateFormattedStart () {
                return this.formatDate(this.xdatestart)
            },
            filterComputedDateFormattedEnd () {
                return this.formatDate(this.xdateend)
            },
            dialogconfirmationdelete: {
                get() {
                    return this.$store.state.packet.dialog_confirmation_delete
                },
                set(val) {
                    this.$store.commit("packet/update_dialog_confirmation_delete", val)
                }
            },
            msgconfirmationdelete() {
                return this.$store.state.packet.msg_confirmation_delete
            },
            xnatsubgroupCb() {
                return this.$store.state.packet.natsubgroupCb
            },
            selected_natsubgroupCb: {
                get() {
                    return this.$store.state.packet.selected_natsubgroupCb
                },
                set(val) {
                    this.$store.commit("packet/update_selected_natsubgroupCb", val)
                }
            },
            dialogerror: {
                get() {
                    return this.$store.state.packet.dialog_error
                },
                set(val) {
                    this.$store.commit("packet/update_dialog_error", val)
                }
            },
            msgerror() {
                return this.$store.state.packet.msg_error
            },
            totalTPricePacket:{
                get(){
                    return this.$store.state.packet.totalTPricePacket
                },
                set(val) {
                    this.$store.commit("packet/update_totalTPricePacket", val)
                },
            },
            totalTPriceAwal:{
                get(){
                    return this.$store.state.packet.totalTPriceAwal
                },
                set(val) {
                    this.$store.commit("packet/update_totalTPriceAwal", val)
                },
            },
            tpacketdetails: {
                // return this.$store.state.packet.tpacketdetails
                get() {
                    return this.$store.state.packet.tpacketdetails
                },
                set(val) {
                    this.$store.commit("packet/update_tpacketdetails", val)
                }
            },
            curr_page_tpacketdetails: {
                get() {
                    return this.$store.state.packet.current_page_tpacketdetails
                },
                set(val) {
                    this.$store.commit("packet/update_current_page_tpacketdetails", val)
                    // var prm = {}
                    // prm.searchNama = this.search_nama
                    // prm.searchKode = this.search_kode
                    // prm.current_page = val
                    // // prm.tpriceheader = this.$store.state.packet.selected_tpriceheaderCb.T_PriceHeaderID
                    // // this.$store.commit("packet/update_current_page", 1)
                    // this.$store.dispatch("packet/searchTPricev0", prm)
                }
            },
            xtotal_page_tpacketdetails: {
                get() {
                    return this.$store.state.packet.total_tpacketdetails
                },
                set(val) {
                    this.$store.commit("packet/update_total_tpacketdetails", val)
                }
            },
            pricepackets: {
                get() {
                    return this.$store.state.packet.pricepackets
                },
                set(val) {
                    this.$store.commit("packet/update_pricepackets", val)
                }
            },
            xtpacketRb:{
                get() {
                    return this.$store.state.packet.tpackettypeRb
                },
                set(val) {
                    this.$store.commit("packet/update_tpackettypeRb", val)
                }
            },
            tprices() {
                return this.$store.state.packet.tprices
            },
            curr_page_tprice: {
                get() {
                    return this.$store.state.packet.current_page_tprice
                },
                set(val) {
                    this.$store.commit("packet/update_current_page_tprice", val)
                    var prm = {}
                    prm.natsubgroup = this.selected_natsubgroupCb.Nat_SubGroupID
                    prm.searchNama = this.search_nama
                    prm.searchKode = this.search_kode
                    prm.current_page = val
                    prm.tpriceheader = this.selected_tpriceheaderformCb.T_PriceHeaderID
                    // this.$store.commit("packet/update_current_page", 1)
                    this.$store.dispatch("packet/searchTPricev0", prm)
                }
            },
            xtotal_page_tprice: {
                get() {
                    return this.$store.state.packet.total_prices
                },
                set(val) {
                    this.$store.commit("packet/update_total_prices", val)
                }
            },
            xtpriceheaderformCb() {
                return this.$store.state.packet.tpriceheaderformCb
            },
            selected_tpriceheaderformCb: {
                get() {
                    return this.$store.state.packet.selected_tpriceheaderformCb
                },
                set(val) {
                    this.$store.commit("packet/update_selected_tpriceheaderformCb", val)
                }
            },
            search_kode: {
                get() {
                    return this.$store.state.packet.search_kode
                },
                set(val) {
                    this.$store.commit("packet/update_search_kode", val)
                    this.$store.commit("packet/update_no_save", 1)
                }
            },
            search_nama: {
                get() {
                    return this.$store.state.packet.search_nama
                },
                set(val) {
                    this.$store.commit("packet/update_search_nama", val)
                    this.$store.commit("packet/update_no_save", 1)
                }
            },
            inp_T_PacketName:{
                get() {
                    return this.$store.state.packet.inp_T_PacketName
                },
                set(val) {
                    this.$store.commit("packet/update_inp_T_PacketName", val)
                }
            },
            xact() {
                return this.$store.state.packet.act
            },
            dialogadd: {
                get() {
                    return this.$store.state.packet.dialog_add
                },
                set(val) {
                    this.$store.commit("packet/update_dialog_add", val)
                }
            },
            dialogedit: {
                get() {
                    return this.$store.state.packet.dialog_edit
                },
                set(val) {
                    this.$store.commit("packet/update_dialog_edit", val)
                }
            },
            curr_page: {
                get() {
                    return this.$store.state.packet.current_page
                },
                set(val) {
                    this.$store.commit("packet/update_current_page", val)
                    // this.$store.dispatch("packet/searchv0", {
                    //     status: this.status,
                    //     current_page: val,
                    //     lastid: -1
                    // })
                    var prm = {}
                    prm.search = this.search_tpacket
                    // prm.natsubgroup = this.selected_natsubgroupCb
                    prm.current_page = val
                    prm.tpriceheader = this.$store.state.packet.selected_tpriceheaderCb.T_PriceHeaderID
                    // this.$store.commit("packet/update_current_page", 1)
                    this.$store.dispatch("packet/searchv0", prm)
                }
            },
            xtotal_page: {
                get() {
                    return this.$store.state.packet.total_packets
                },
                set(val) {
                    this.$store.commit("packet/update_total_packets", val)
                }
            },
            tpackets() {
                return this.$store.state.packet.tpackets
            },
            isLoading() {
                return this.$store.state.packet.search_status == 1
            },
            xtpriceheaderCb() {
                return this.$store.state.packet.tpriceheaderCb
            },
            selected_tpriceheaderCb: {
                get() {
                    return this.$store.state.packet.selected_tpriceheaderCb
                },
                set(val) {
                    this.$store.commit("packet/update_selected_tpriceheaderCb", val)
                }
            },
            search_tpacket: {
                get() {
                    return this.$store.state.packet.search_tpacket
                },
                set(val) {
                    this.$store.commit("packet/update_search_tpacket", val)
                    this.$store.commit("packet/update_no_save", 1)
                }
            },
            dialogsuccess: {
                get() {
                    return this.$store.state.packet.dialog_success
                },
                set(val) {
                    this.$store.commit("packet/update_dialog_success", val)
                }
            },
            msgsuccess() {
                return this.$store.state.packet.msg_success
            },
            openalertconfirmation: {
                get() {
                    return this.$store.state.packet.open_alert_confirmation
                },
                set(val) {
                    this.$store.commit("packet/update_open_alert_confirmation", val)
                }
            },
        },
        watch: {
        },
        data() {
            return {
                menufilterdatestart:false,
                menufilterdateend:false,
                date: new Date().toISOString().substr(0, 10),
                msgalertconfirmation: "Perubahan yang telah dilakukan belum disimpan dong !",
                page: 1,
                headers: [
                    {
                        text: "JENIS PAKET",
                        align: "left",
                        sortable: false,
                        value: "mr",
                        width: "20%",
                        class: "pa-2 primary white--text"
                    },
                    {
                        text: "NAMA PAKET",
                        align: "left",
                        sortable: false,
                        value: "lab",
                        width: "55%",
                        class: "pa-2 primary white--text"
                    },
                     {
                        text: "AKSI",
                        align: "left",
                        sortable: false,
                        value: "lab",
                        width: "15%",
                        class: "pa-2 primary white--text"
                    }
                ],
                pagination: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'T_PacketID',
                    totalItems: this.$store.state.packet.total_packets
                },

                // t_price
                headersTPrice: [
                    {
                        text: "KODE",
                        align: "left",
                        sortable: false,
                        value: "mr",
                        width: "20%",
                        class: "pa-2 primary white--text"
                    },
                    {
                        text: "NAMA",
                        align: "left",
                        sortable: false,
                        value: "lab",
                        width: "55%",
                        class: "pa-2 primary white--text"
                    },
                     {
                        text: "AKSI",
                        align: "left",
                        sortable: false,
                        value: "lab",
                        width: "15%",
                        class: "pa-2 primary white--text"
                    }
                ],
                paginationTPrice: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'T_PriceID',
                    totalItems: this.$store.state.packet.total_prices
                },

                // t_packetdetail array
                headersTPacketDetailArray: [
                    {
                        text: "NAMA",
                        align: "left",
                        sortable: false,
                        value: "mr",
                        width: "20%",
                        class: "pa-2 primary white--text"
                    },
                    {
                        text: "HARGA AWAL",
                        align: "left",
                        sortable: false,
                        value: "lab",
                        width: "27.5%",
                        class: "pa-2 primary white--text"
                    },
                    {
                        text: "HARGA PAKET",
                        align: "left",
                        sortable: false,
                        value: "lab",
                        width: "27.5%",
                        class: "pa-2 primary white--text"
                    },
                    {
                        text: "AKSI",
                        align: "left",
                        sortable: false,
                        value: "lab",
                        width: "15%",
                        class: "pa-2 primary white--text"
                    }
                ],
                paginationTPacketDetailArray: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'T_PriceID',
                    totalItems: this.$store.state.packet.total_tpacketdetails
                },
            }
        },
    }
</script>