<template>
    <div>
        <v-dialog v-model="dialog" width="auto">
            <v-card min-width="600" max-width="750" class="rounded-lg">
                <v-card-item class="bg-primary mb-5">
                    <v-card-title>TIMELINE</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>
                    
                    <v-timeline side="end" style="align-items: start; align-content: start">
                        <v-timeline-item
                                v-for="item in items"
                                :key="item.id"
                                dot-color="white"
                                fill-dot="false"
                                :icon="item.icon"
                                icon-color="primary"
                                size="small"
                            >
                            
                        </v-timeline-item>
                    </v-timeline>
                </v-card-text>
                <template v-slot:actions>
                    <v-btn
                        class="ms-auto text-primary font-weight-medium"
                        text="TUTUP"
                        @click="dialog=false"
                    ></v-btn>
                </template>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    export default {
        name: "statuspasiendialog",
        components: {},
        mounted() {},
        data() {
            return {
                items: [
                    {
                        id: 1,
                        color: 'info',
                        icon: 'mdi-check-circle',
                    },
                    {
                        id: 2,
                        color: 'error',
                        icon: 'mdi-alert-circle',
                    },
                ],
            };
        },
        computed: {
            dialog: {
                get() {
                    return this.$store.state.stored.sp_dialog;
                },
                set(bool) {
                    this.$store.commit("setDialog", bool);
                }
            }
        },
    }
</script>