<template>
    <v-timeline side="end" align="start">
        <v-timeline-item
                dot-color="white"
                :fill-dot="true"
                icon="mdi-check-circle"
                icon-color="primary"
                size="small"
            >
                <div style="min-width: 600px; max-width: 750px;">
                    <v-row>
                        <v-col cols="7" align="start">
                            <h4 class="font-weight-medium">Order diterima oleh ADMIN</h4>
                        </v-col>
                        <v-col cols="5" align="end">
                            <h4 class="font-weight-medium">21-08-2024 16:53</h4>
                        </v-col>
                    </v-row>
                    <v-row no-gutters class="ml-2 mb-4 mt-2">
                        <v-col cols="3" align="start">
                            <h5 class="font-weight-medium text-grey">Kel. Pelanggan</h5>
                        </v-col>
                        <v-col cols="9" align="end">
                            <h5 class="font-weight-medium text-grey">PASIEN MANDIRI/PASIEN UMUM 2024</h5>
                        </v-col>
                        <v-col cols="3" align="start">
                            <h5 class="font-weight-medium text-grey">Pengirim</h5>
                        </v-col>
                        <v-col cols="9" align="end">
                            <h5 class="font-weight-medium text-grey">dr. A. B. WARDOYO, Sp. PD.</h5>
                        </v-col>
                        <v-col cols="3" align="start">
                            <h5 class="font-weight-medium text-grey">Alamat</h5>
                        </v-col>
                        <v-col cols="9" align="end">
                            <h5 class="font-weight-medium text-grey">JL. MH. THAMRIN NO. 1 BINTARO JAYA</h5>
                        </v-col>
                        <v-col cols="3" align="start">
                            <h5 class="font-weight-medium text-grey">Catatan</h5>
                        </v-col>
                        <v-col cols="9" align="end">
                            <h5 class="font-weight-medium text-grey">-</h5>
                        </v-col>
                    </v-row>
                    
                    <div class="bg-secondary-lighten rounded-lg pa-2 mb-2">
                        <v-row>
                            <v-col cols="4">
                                <h4>Janji Hasil</h4>
                            </v-col>
                            <v-col cols="8" align="end">
                                <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2 mr-2" style="display: inline-block; font-size: 12px;">21-08-2024 16:53</p>
                                <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">21-08-2024 20:53</p>
                            </v-col>
                        </v-row>
                    </div>
                    <v-data-table
                        :items="orderdata"
                        :headers="headers"
                        hide-default-footer
                    >
                        <template v-slot:headers="{ columns }">
                            <tr>
                                <template v-for="column in columns" :key="column.key">
                                    <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
                                        <span>{{ column.title }}</span>
                                    </td>
                                </template>
                            </tr>
                        </template> 
                        <template v-slot:item="{ item }">
                            <tr :class="[item.pemeriksaan === 'TOTAL' ? 'bg-primary-lighten' : '']">
                                <td align="start">
                                    <p class="font-weight-medium">{{ item.pemeriksaan }}</p>
                                </td>
                                <td align="center">
                                    <p class="font-weight-medium">{{ item.bruto }}</p>
                                </td>
                                <td align="center">
                                    <p class="font-weight-medium">{{ item.diskon }}</p>
                                </td>
                                <td align="center">
                                    <p class="font-weight-medium">{{ item.total }}</p>
                                </td>
                            </tr>
                        </template>
                    </v-data-table>
                    <v-row no-gutters class="ml-2 mb-4 mt-2">
                        <v-col cols="3" align="start">
                            <h5 class="font-weight-medium text-grey">Alamat Sendiri</h5>
                        </v-col>
                        <v-col cols="9" align="end">
                            <h5 class="font-weight-medium text-grey">PASIEN MANDIRI/PASIEN UMUM 2024</h5>
                        </v-col>
                        <v-col cols="3" align="start">
                            <h5 class="font-weight-medium text-grey">Alamat Pasien</h5>
                        </v-col>
                        <v-col cols="9" align="end">
                            <h5 class="font-weight-medium text-grey">HRC 05/TELKOM MOJOKERTO Sawunggalung, Wonokromo, Surabaya</h5>
                        </v-col>
                    </v-row>
                </div>
        </v-timeline-item>
        <v-timeline-item
            dot-color="white"
            :fill-dot="true"
            icon="mdi-check-circle"
            icon-color="primary"
            size="small"   
        >
            <div style="min-width: 600px; max-width: 750px;">
                <v-row>
                    <v-col cols="7" align="start">
                        <h4 class="font-weight-medium">Pembayaran diterima oleh ADMIN</h4>
                    </v-col>
                    <v-col cols="5" align="end">
                        <h4 class="font-weight-medium">21-08-2024 21:53</h4>
                    </v-col>
                </v-row>
                <div class="bg-secondary-lighten rounded-lg pa-2 mt-2">
                    <v-row>
                        <v-col cols="4">
                            <h4>Janji Hasil</h4>
                        </v-col>
                        <v-col cols="8" align="end">
                            <h4>176.000</h4>
                        </v-col>
                    </v-row>
                </div>
                <div class="bg-primary-lighten rounded-lg pa-2 mt-2">
                    <v-row>
                        <v-col cols="4">
                            <h4>TOTAL</h4>
                        </v-col>
                        <v-col cols="8" align="end">
                            <h4>176.000</h4>
                        </v-col>
                    </v-row>
                </div>
            </div>
        </v-timeline-item>
    </v-timeline>
</template>

<script>
    export default {
        name: "orderdialog",
        components: {},
        mounted() {},
        data() {
            return {
                headers: [
                    {
                        title: 'PEMERIKSAAN',
                        align: "start",
                        sortable: false,
                        key: "pemeriksaan",
                        width: "40%",
                        class: "font-weight-bold",
                    },
                    {
                        title: 'BRUTO',
                        align: "center",
                        sortable: false,
                        key: "bruto",
                        width: "20%",
                        class: "font-weight-bold",
                    },
                    {
                        title: 'DISKON',
                        align: "center",
                        sortable: false,
                        key: "diskon",
                        width: "20%",
                        class: "font-weight-bold",
                    },
                    {
                        title: 'TOTAL',
                        align: "center",
                        sortable: false,
                        key: "total",
                        width: "20%",
                        class: "font-weight-bold",
                    },
                ]
            };
        },
        computed: {
            orderdata: {
                get() {
                    return this.$store.state.stored.data_order;
                }
            }
        },
    }
</script>