<template>
    <div>
        <v-container class="bg-white rounded-lg" fluid>
            <div class="bg-primary-lighten rounded-lg pa-5">
                <v-row>
                    <v-col cols="2">
                        <div class="rounded-lg bg-secondary-lighten" style="width: 100%; height: 120px;">
                            <!-- placeholder photo -->
                        </div>
                    </v-col>
                    <v-col cols="8">
                        <h4>{{ selected.noreg }}</h4>
                        <h4 class="text-grey-darken-1">{{ selected.nama }}</h4>
                    </v-col>
                    <v-col cols="2" align-self="center" class="d-flex justify-end">
                        <div
                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                            class="rounded-lg pa-2 mr-2 bg-grey-lighten-5 pointer"
                            v-show="selected.status === 'Call'"
                        >
                            <iconify-icon
                                class="text-grey"
                                style="font-size: 1.5rem;"
                                icon="fluent:arrow-previous-24-regular"
                            ></iconify-icon>
                        </div>
                        <div
                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                            class="rounded-lg bg-secondary-lighten pa-2 pointer"
                            @click="setCall(selected)"
                            v-show="selected.doneCall !== 'Y'"
                        >
                            <iconify-icon
                                class="text-secondary-darken"
                                style="font-size: 1.5rem;"
                                :icon="setIconCall(selected.status)"
                            ></iconify-icon>
                        </div>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="10">
                        <p class="font-weight-medium">PID</p>
                    </v-col>
                    <v-col cols="2" class="text-end">
                        <p class="font-weight-medium" style="color: slategray;">-</p>
                    </v-col>
                </v-row>
                <v-row no-gutters>
                    <v-col cols="4">
                        <p class="font-weight-medium">{{ $t('message.dobage') }}</p>
                    </v-col>
                    <v-col cols="4" class="text-end">
                        <p class="font-weight-medium" style="color: slategray;">{{ selected.dob }}</p>
                    </v-col>
                    <v-col cols="4" class="text-end">
                        <p class="font-weight-medium" style="color: slategray;">{{ selected.age }}</p>
                    </v-col>
                </v-row>
            </div>
        </v-container>
        <v-container class="bg-white rounded-lg mt-5" fluid>
            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
                <v-row>
                    <v-col cols="10" align-self="center">
                        <h3 class="primary-lighten">{{ $t('message.tableDetail.title') }}: {{ details.staff }}</h3>
                    </v-col>
                    <v-col cols="2" align-self="center" class="d-flex justify-end">
                        <div
                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
                            class="rounded-lg bg-primary-lighten pa-2 pointer"
                        >
                            <iconify-icon
                                class="text-primary-darken"
                                style="font-size: 1.5rem;"
                                icon="fluent:note-add-24-regular"
                            ></iconify-icon>
                        </div>
                        <div
                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
                            class="rounded-lg bg-success-lighten pa-2 ml-2 pointer"
                        >
                            <iconify-icon
                                class="text-success-darken"
                                style="font-size: 1.5rem;"
                                icon="fluent:notepad-person-24-regular"
                            ></iconify-icon>
                        </div>
                    </v-col>
                </v-row>
            </div>
            <v-data-table
                :items="details.specimen"
                :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>
                        <td>
                            <p class="font-weight-medium">{{ item.specimen }}</p>
                        </td>
                        <td>
                            <p class="font-weight-medium">{{ item.barcode }}</p>
                        </td>
                        <td align="center">
                            <div
                                style="display: flex; align-items: center; justify-content: center;"
                                class="rounded-lg pa-2"
                                v-if="selected.doneCall === 'Y'"
                            >
                                <div
                                    class="pointer"
                                    style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
                                >
                                    <iconify-icon
                                        :class="{'text-error': item.requirement === 'N'}"
                                        style="font-size: 1.5rem;"
                                        icon="fluent:dismiss-12-filled"
                                        @click="setReq(item, 'N')"
                                    ></iconify-icon>
                                </div>
                                <div
                                    class="pointer"
                                    style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
                                >
                                    <iconify-icon
                                        :class="{'text-success': item.requirement === 'Y'}"
                                        style="font-size: 2rem;"
                                        icon="fluent:checkmark-12-filled"
                                        @click="setReq(item, 'Y')"
                                    ></iconify-icon>
                                </div>
                            </div>
                            <p v-else style="font-size: 1.5rem;">-</p>
                        </td>
                        <td align="center">
                            <div v-if="selected.doneCall === 'Y'" class="py-1">
                                <div class="bg-warning rounded-lg pa-1 text-white">
                                    {{ formatDate(item.sDate) }}
                                </div>
                                <div :class="['rounded-lg rounded-lg pa-1 mt-1', { 'bg-grey-lighten-5': !item.eDate, 'bg-success': item.eDate }]">
                                    {{ item.eDate === "" ? '00-00-0000 00:00': formatDate(item.eDate) }}
                                </div>
                            </div>
                            <p v-else style="font-size: 1.5rem;">-</p>
                        </td>
                    </tr>
                </template>
            </v-data-table>
            <div class="ml-3">
                <v-chip v-for="y in details.jenis" class="mr-2 mt-2" :color="selected.doneCall === 'Y' ? 'success' : 'primary'">{{ y }}</v-chip>
            </div>
        </v-container>
        <v-container class="bg-white rounded-lg mt-5" fluid>
            <div class="bg-secondary-lighten rounded-lg pa-5">
                <h3 class="primary-lighten">{{ $t('message.examination') }}</h3>
            </div>
            <div>
                <v-chip v-for="x in pemeriksaan" class="mt-5 mr-2" color="success">{{ x }}</v-chip>
            </div>
        </v-container>
    </div>
</template>

<script>
    export default {
        name: "rightcomp",
        components: {

        },
        mounted() {},
        data() {
            return {
                menu: false,
                visible: false,
                headers: [
                    {
                        title: this.$t('message.tableDetail.speciment'),
                        align: "start",
                        sortable: false,
                        key: "name",
                        width: "20%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.tableDetail.barcode'),
                        align: "start",
                        sortable: false,
                        key: "name",
                        width: "20%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.tableDetail.requirement'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "20%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.tableDetail.action'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "20%",
                        class: "font-weight-bold",
                    },
                ],
            };
        },
        computed: {
            selected: {
                get() {
                    return this.$store.state.collection.selected_patients;
                },
                set(data) {
                    this.$store.commit("setSelectedPatients", data);
                }
            },
            details: {
                get() {
                    return this.$store.state.collection.details;
                },
                set(data) {
                    this.$store.commit("")
                }
            },
            pemeriksaan() {
                return this.$store.state.collection.pemeriksaan;
            }
        },
        methods: {
            setIconCall(status) {
                switch (status.toLowerCase()) {
                    case "call":
                        return "fluent:arrow-sync-24-regular";
                    default:
                        return "fluent:speaker-2-24-regular";
                }
            },
            setCall(data) {
                if (data.status == "New") {
                    data.status = "Call";    
                } else if (data.status == "Call") {
                    data.doneCall = "Y";
                }
            },
            setReq(data, status) {
                data.requirement = status;
                data.eDate= new Date();
            },
            formatDate(date) {
                if (!date) return null;

                return moment(date).format("DD-MM-YYYY HH:mm");
            },
        },
    }
</script>

<style scoped>
    .pointer {
        cursor: pointer;
    }
</style>