<template>
    <v-dialog v-model="dialog_create_order" persistent width="80vw">
        <v-card style="max-height: 80vh; display: flex; flex-direction: column;">
            <v-card-title class="headline grey lighten-2">BUAT ORDER ASET</v-card-title>
            <template>
                <div>
                    <v-stepper non-linear v-model="steps">
                        <v-stepper-header>
                            <v-stepper-step editable step="1" @click="steps = 1">
                                FORM ORDER ASET
                            </v-stepper-step>
                            <v-divider></v-divider>
                            <v-stepper-step editable step="2" @click="steps = 2">
                                FORM KONTRAK ASET
                            </v-stepper-step>
                            <v-divider></v-divider>
                            <v-stepper-step editable step="3" @click="steps = 3">
                                ITEM ORDER ASET
                            </v-stepper-step>
                        </v-stepper-header>

                        <v-stepper-items>
                            <v-stepper-content step="1">
                                <form-order-asset></form-order-asset>
                            </v-stepper-content>

                            <v-stepper-content step="2">
                                <form-kontrak-asset></form-kontrak-asset>
                            </v-stepper-content>

                            <v-stepper-content step="3">

                            </v-stepper-content>
                        </v-stepper-items>
                    </v-stepper>
                </div>
            </template>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn @click="dialog_create_order = false" color="error" class="white--text">Batal</v-btn>
                <v-btn @click="" color="primary" class="white--text">Simpan</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            steps: 1
        }
    },
    components: {
        'form-order-asset': httpVueLoader('./form-order-asset.vue'),
        'form-kontrak-asset': httpVueLoader('./form-kontrak-asset.vue')
    },
    computed: {
        dialog_create_order: {
            get() {
                return this.$store.state.orderAsset.dialog_create_order
            },
            set(val) {
                this.$store.commit("orderAsset/update_dialog_create_order", val)
            }
        }
    },
    methods: {}
}
</script>
