<template>
    <v-container fluid class="bg-white rounded-lg my-5">
        <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
            <v-row>
                <v-col cols="11">
                    <h3>{{ $t('message.table.title') }}</h3>
                </v-col>
                <v-col cols="1" align="end">
                    <h3>{{ datax.length }}</h3>
                </v-col>
            </v-row>
        </div>
        <v-data-table
            :items="datax"
            :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 align="center" class="pa-2">
                        <p class="font-weight-medium">{{ item.xno }}</p>
                    </td>
                    <td align="center" class="pa-2">
                        <p class="font-weight-medium">{{ item.order_date }}</p>
                        <p class="font-weight-medium rounded-lg bg-grey-lighten-2 px-4" style="display: inline-block;">{{ item.order_promise }}</p>
                    </td>
                    <td align="start" class="pa-2">
                        <v-row>
                            <v-col cols="5" align="start">
                                <p class="font-weight-medium">{{ item.no_reg }}</p>
                            </v-col>
                            <v-col cols="7" align="end">
                                <p class="font-weight-bold text-blue">{{ item.no_reg_ext }}</p>
                            </v-col>
                        </v-row>
                        <p class="font-weight-bold">{{ item.patient_name }}</p>
                        <v-row>
                            <v-col cols="5" align="start">
                                <p class="font-weight-medium">{{ item.company_name }}</p>
                            </v-col>
                            <v-col cols="7" align="end">
                                <p class="font-weight-medium text-grey">{{ item.mou_name }}</p>
                            </v-col>
                        </v-row>
                    </td>
                    <td align="center" class="pa-2">
                        <p 
                            :class="['font-weight-medium rounded-lg pointer', item.details_order[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                            style=" width: 80%; height: 60%; align-content: center;"
                            @click="openMultiDialog(true, 'order')"
                        >{{ item.details_order[0].group_name }}</p>
                    </td>
                    <td align="center" class="pa-2">
                        <p 
                            :class="['font-weight-medium rounded-lg pointer', item.details_sampling[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                            style=" width: 80%; height: 60%; align-content: center;"
                            @click="openMultiDialog(true, 'sample')"
                        >{{ item.details_sampling[0].group_name }}</p>
                    </td>
                    <td align="center" class="pa-2">
                        <p 
                            :class="['font-weight-medium rounded-lg pointer', item.details_process[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                            style=" width: 80%; height: 60%; align-content: center;"
                            @click="openMultiDialog(true, 'process')"
                        >{{ item.details_process[0].group_name }}</p>
                    </td>
                    <td align="center" class="pa-2">
                        <p 
                            :class="['font-weight-medium rounded-lg pointer', item.details_result_verification[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                            style=" width: 80%; height: 60%; align-content: center;"
                            @click="openMultiDialog(true, 'verif')"
                        >{{ item.details_result_verification[0].group_name }}</p>
                    </td>
                    <td align="center" class="pa-2">
                        <p 
                            :class="['font-weight-medium rounded-lg pointer', item.details_result_validation[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                            style=" width: 80%; height: 60%; align-content: center;"
                            @click="openMultiDialog(true, 'valid')"
                        >{{ item.details_result_validation[0].group_name }}</p>
                    </td>
                    <td align="center" class="pa-2">
                        <p 
                            :class="['font-weight-medium rounded-lg pointer', item.details_print[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                            style=" width: 80%; height: 60%; align-content: center;"
                            @click="print_dialog=true"
                        >{{ item.details_print[0].group_name }}</p>
                    </td>
                </tr>
            </template>
        </v-data-table>
        <v-pagination :length="total_page"></v-pagination>
        <sp-dialog></sp-dialog>
        <print-dialog></print-dialog>
    </v-container>
</template>

<script>
    import PrintDialog from './print-dialog.vue';
    import Sp_dialog from './sp_dialog.vue';
    export default {
        name: "contentcomp",
        components: {
            "sp-dialog": Sp_dialog,
            "print-dialog": PrintDialog,
        },
        mounted() {},
        data() {
            return {
                menu: false,
                visible: false,
                headers : [
                    {
                        title: this.$t('message.table.h_no'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "5%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_orderr'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "15%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_pasien'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "20%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_status'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_sample'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_proces'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_resver'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_resval'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_printt'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                ]
            };
        },
        computed: {
            datax: {
                get() {
                    return this.$store.state.stored.data;
                }
            },
            total_page: {
                get() {
                    return this.$store.state.stored.total_page;
                }
            },
            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)
                }
            },
            print_dialog: {
                get() {
                    return this.$store.state.stored.print_dialog;
                },
                set(bool) {
                    this.$store.commit("setPrintDialog", bool);
                }
            }
        },
        methods: {
            openMultiDialog(bool, nama) {
                this.multi_dialog.open = bool;
                this.multi_dialog.name = nama;
            }
        },
    }
</script>

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