<template>
    <div>
        <v-dialog v-model="multi_dialog.open" width="auto">
            <v-card min-width="600" max-width="750" class="rounded-lg">
                <v-card-item class="bg-primary mb-8">
                    <v-card-title>{{ titleDialog(multi_dialog.name) }}</v-card-title>
                </v-card-item>
                <v-card-text>
                    <v-row class="ga-4 mb-5">
                        <div class="rounded-lg bg-secondary-lighten" style="width: 80px; height: 80px;"></div>
                        <div>
                            <h4 class="font-weight-medium">05600027LA</h4>
                            <h4 class="font-weight-bold">Ny IMELDA JANICE</h4>
                        </div>
                    </v-row>
                    <div v-if="multi_dialog.name === 'order'">
                        <status-order-dialog></status-order-dialog>
                    </div>
                    <div v-else-if="multi_dialog.name === 'sample'">
                        <sampl-collec-dialog></sampl-collec-dialog>
                    </div>
                    <div v-else-if="multi_dialog.name === 'process'">
                        <process-dialog></process-dialog>
                    </div>
                    <div v-else-if="multi_dialog.name === 'verif'">
                        <verification-dialog></verification-dialog>
                    </div>
                    <div v-else-if="multi_dialog.name === 'valid'">
                        <validation-dialog></validation-dialog>
                    </div>
                </v-card-text>
                <template v-slot:actions>
                    <v-btn
                        class="ms-auto text-primary font-weight-medium"
                        text="TUTUP"
                        @click="multi_dialog.open=false"
                    ></v-btn>
                </template>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import OrderDialog from './order-dialog.vue';
    import ProcessDialog from './process-dialog.vue';
    import SampleDialog from './sample-dialog.vue';
    import ValidDialog from './valid-dialog.vue';
    import VerifDialog from './verif-dialog.vue';
    export default {
        name: "statuspasiendialog",
        components: {
            "status-order-dialog": OrderDialog,
            "sampl-collec-dialog": SampleDialog,
            "process-dialog": ProcessDialog,
            "verification-dialog": VerifDialog,
            "validation-dialog": ValidDialog,
        },
        mounted() {},
        data() {
            return {};
        },
        computed: {
            dialog: {
                get() {
                    return this.$store.state.stored.sp_dialog;
                },
                set(bool) {
                    this.$store.commit("setDialog", bool);
                }
            },
            multi_dialog: {
                get() {
                    return this.$store.state.stored.multi_dialog;
                },
                set(bool, nama) {
                    this.$store.commit("setMultiDialog", bool, nama)
                }
            },
        },
        methods: {
            titleDialog(name) {
                switch (name) {
                    case 'order':
                        return "TIMELINE ORDER"
                    case 'sample':
                        return "TIMELINE SAMPLING"
                    case 'process':
                        return "TIMELINE PROCESS"
                    case 'verif':
                        return "TIMELINE VERIFICATION"
                    case 'valid':
                        return "TIMELINE VALIDATION"
                    default:
                        return "TIMELINE"
                }
            }
        },
    }
</script>