<template>
    <v-layout row wrap pa-1 fill-height>
        <v-snackbar v-model="snackbar.isOpen" :timeout="5000" :multi-line="false" :vertical="false" :top="true" :color="snackbar.color">
            {{ snackbar.msg }}
            <v-btn pr-1 flat @click="closeSnack()">Tutup</v-btn>
        </v-snackbar>

        <!-- First section with buttons -->
        <v-flex xs12>
            <v-card flat>
                <v-layout row>
                    <v-flex xs6 pa-1>
                        <v-btn 
                            color="primary" :outline="this.type_transfer === 'NP'"
                            class="white--text" @click="changeType('P')" block>
                            Transfer Persediaan
                        </v-btn>
                    </v-flex>
                    <v-flex xs6 pa-1>
                        <v-btn 
                            color="primary" :outline="this.type_transfer === 'P'" 
                            class="white--text" @click="changeType('NP')" block>
                            Transfer Non Persediaan
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-card>
        </v-flex>

        <!-- persediaan section -->
        <v-flex v-if="type_transfer === 'P'" xs12 mt-2>
            <v-layout row>
                <v-flex xs6 pr-1>
                    <one-tfp-listing></one-tfp-listing>
                </v-flex>
                <v-flex xs6 pl-1>
                    <one-tfp-form></one-tfp-form>       
                </v-flex>
            </v-layout>
        </v-flex>

        <!-- non persediaan section -->
         <v-flex v-if="type_transfer === 'NP'" xs12 mt-2>
            <v-layout row>
                <v-flex xs6 pr-1>
                    <one-tfnp-listing></one-tfnp-listing>
                </v-flex>
                <v-flex xs6 pl-1>
                    <one-tfnp-form></one-tfnp-form>
                </v-flex>
            </v-layout>
         </v-flex>

        <!-- dialog  -->
        <one-tfp-dialogdetail></one-tfp-dialogdetail>
        <one-tfp-dialogbatch></one-tfp-dialogbatch>
        <one-tfnp-dialogdetail></one-tfnp-dialogdetail>
        <one-tfnp-dialogbatch></one-tfnp-dialogbatch>
        <one-tfp-dialogunpack></one-tfp-dialogunpack>
    </v-layout>
</template>

<script>
    module.exports = {
        components: {
            'one-tfp-listing': httpVueLoader('./listingPersediaanTF.vue'),
            'one-tfp-form': httpVueLoader('./formPersediaanTF.vue'),
            'one-tfp-dialogdetail': httpVueLoader('./dialogDetailPersediaan.vue'),
            'one-tfp-dialogbatch': httpVueLoader('./dialogBatchPersediaan.vue'),
            'one-tfnp-listing': httpVueLoader('./listingNonPersediaanTF.vue'),
            'one-tfnp-form': httpVueLoader('./formNonPersediaanTF.vue'),
            'one-tfnp-dialogdetail': httpVueLoader('./dialogDetailNonPersediaan.vue'),
            'one-tfnp-dialogbatch': httpVueLoader('./dialogBatchNonPersediaan.vue'),
            'one-tfp-dialogunpack': httpVueLoader('./dialogUnpackPersediaan.vue')
        },
        data() {
            return {
                
            }
        },
        computed: {
            snackbar: {
                get() {
                    return this.$store.state.p_data.snackbar
                },
                set(val) {
                    this.$store.commit("p_data/update_snackbar", val)
                }
            },
            type_transfer: {
                get() {
                    return this.$store.state.type_transfer
                },
                set(val) {
                    this.$store.commit("update_type_transfer", val)
                }
            }
        },
        methods: {
            closeSnack() {
                const snac = {
                    isOpen: false,
                    color: "success",
                    msg: ""
                }
                this.snackbar = snac
            },
            changeType(type) {
                this.type_transfer = type
                this.$store.dispatch("p_form/newForm", {}, { root: true })
                this.$store.dispatch("np_form/newForm", {}, { root: true })
            }
        },
    }
</script>