<template>
    <v-layout class="mb-2" column>
        <v-dialog v-model="dialog_confirm_create_db" persistent max-width="400">
            <v-card>
                <v-card-title class="headline warning" primary-title>
                    Konfirmasi Generate Ulang
                </v-card-title>
                <v-card-text>
                    Anda yakin ingin meng-generate ulang database untuk company <br>
                    <strong>{{ selected_mgmmcu.mcuName }}</strong>? <br><br>
                    <span class="red--text">Semua data sebelumnya akan hilang.</span>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn text @click="dialog_confirm_create_db = false">Batal</v-btn>
                    <v-btn color="warning" text @click="confirmCreateDatabase">Ya, Lanjutkan</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

        <v-card v-if="selected_mgm_mcu_id && (isLoading || kelainanCount.length > 0)">
            <v-card-title style="background:#57c492; color:white">
                <span>Daftar Kelainan</span>
                <v-spacer></v-spacer>
                <v-btn small color="primary" @click="saveSelection" :loading="loading_save">Simpan Pilihan</v-btn>
            </v-card-title>

            <v-card-text>
                <v-data-table
                    :headers="kelainanHeaders"
                    :items="kelainanCount"
                    item-key="Mcu_KelainanID"
                    select-all
                    class="elevation-1"
                    :pagination.sync="pagination" 
                >
                    <template v-slot:headers="props">
                        <tr>
                            <th class="text-xs-left" style="width:10%">
                                Pilih
                            </th>
                            <th v-for="header in props.headers" :key="header.text" class="text-xs-left">
                                {{ header.text }}
                            </th>
                        </tr>
                    </template>

                    <template v-slot:items="props">
                        <td>
                           <v-checkbox
                                v-model="selectedKelainan"
                                :value="props.item.Mcu_KelainanID"
                                hide-details
                            ></v-checkbox>
                        </td>
                        <td class="text-xs-left">{{ props.item.Mcu_KelainanName }}</td>
                        <td class="text-xs-left">{{ props.item.total_patient }}</td>
                    </template>
                </v-data-table>
            </v-card-text>
        </v-card>

        <v-card class="mt-4 pa-3" v-else-if="selected_mgm_mcu_id && !isLoading && kelainanCount.length === 0">
            <v-layout row wrap align-center justify-center text-xs-center>
                <v-flex xs12>
                    <h3 class="headline font-weight-light mb-2">Data Kelainan Belum Ada</h3>
                    <span class="font-weight-light">Tidak ada data kelainan yang ditemukan untuk MCU ini. Silakan buat database terlebih dahulu.</span>
                </v-flex>
                <v-flex xs12 mt-3>
                    <v-btn large color="success" @click="createDatabase" :loading="loading_create_db">
                        <v-icon left>mdi-database-plus</v-icon>
                        Create Database
                    </v-btn>
                </v-flex>
            </v-layout>
        </v-card>

        <v-card class="mt-4 pa-3" v-if="savedKelainan.length > 0" color="black--text">
            <v-layout row wrap align-center justify-center text-xs-center>
                <v-flex xs12>
                    <span class="font-weight-light">Jika pilihan kelainan sudah sesuai, Anda dapat men-generate dan mengunduh database.</span>
                </v-flex>
                <v-flex xs12 mt-3>
                    <v-btn x-large color="primary" @click="generateDatabase" :loading="loading_generate">
                        <v-icon left>mdi-database-arrow-down</v-icon>
                        Download Database
                    </v-btn>
                </v-flex>
            </v-layout>
        </v-card>

    </v-layout>
</template>

<style scoped>


    table,
    td,
    th {
        border: 0px solid #ddd;
        text-align: left;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 8px;
        padding-right: 5px;
    }

    .mini-input .v-input {
        margin-top: 0px;
    }

    .mini-input .v-input,
    .mini-input .v-input--selection-controls,
    .mini-input .v-input__slot {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 3px;
    }

    .mini-input .v-messages {
        min-height: 0px;
    }

    input.fhm-input {
        border: 1px solid black;
        border-radius: 2px;
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 4px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 4px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 4px rgba(0, 0, 0, 0.1);
        padding: 2px 4px;
        background: rgba(255, 255, 255, 0.5);
        margin: 0 0 1px 0;
        width: 30px;
        text-align: center;
    }
</style>

<script>
  module.exports = {
    data () {
        return {        
            createDb: false,
            // selectedKelainan: [], // Dihapus karena akan menggunakan computed property dari Vuex
            pagination: {
                rowsPerPage: 10
            },
            kelainanHeaders: [
                { text: 'Nama Kelainan', value: 'Mcu_KelainanName', sortable: false },
                { text: 'Total Pasien', value: 'total_patient', sortable: false },
            ]
        }
    },
    
    mounted() { 
        // Tidak perlu memanggil loadSelectedKelainan() di sini lagi
        // karena data sudah dimuat saat MCU dipilih di komponen list.
        // Jika perlu memastikan data ada saat komponen dimuat ulang,
        // logika bisa ditambahkan di sini atau di `created`.
    },
    computed: {
        kelainanCount() {
            return this.$store.state.patient.kelainan_count
        },
        preSelectedKelainan() {
            return this.$store.state.patient.pre_selected_kelainan;
        },
        loading_save() {
            return this.$store.state.patient.loading_save
        },
        loading_generate() {
            return this.$store.state.patient.loading_generate
        },
        loading_create_db() {
            return this.$store.state.patient.loading_create_db;
        },
        selected_mgm_mcu_id() {
            return this.$store.state.patient.selected_mgm_mcu_id
        },
        isLoading() {
            return this.$store.state.patient.get_data_status === 1;
        },
        selected_mgmmcu() {
            return this.$store.state.patient.selected_mgmmcu;
        },
        dialog_confirm_create_db: {
            get() { return this.$store.state.patient.dialog_confirm_create_db; },
            set(val) { this.$store.commit("patient/update_dialog_confirm_create_db", val); }
        },
        selectedKelainan: {
            get() { return this.$store.state.patient.selectedKelainan; },
            set(val) { this.$store.commit("patient/update_selected_kelainan", val); }
        },
        savedKelainan() {
            return this.$store.state.patient.savedKelainan;
        },
        pages () {
            if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) 
                return 0

            return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
        }
    },

    watch: {
        // Watcher untuk kelainanCount tidak lagi diperlukan untuk memuat data
    },


    methods: {
        async saveSelection() {
            const totalAvailable = this.kelainanCount.length;
            const totalSelected = this.selectedKelainan.length;

            if (totalAvailable >= 10) {
                if (totalSelected !== 10) {
                    this.$store.commit("patient/update_msg_info", "Harap pilih tepat 10 kelainan.");
                    this.$store.commit("patient/update_open_dialog_info", true);
                    return;
                }
            } else if (totalSelected !== totalAvailable) {
                this.$store.commit("patient/update_msg_info", `Harap pilih ${totalAvailable} kelainan yang tersedia.`);
                this.$store.commit("patient/update_open_dialog_info", true);
                return;
            }

            const payload = {
                mgm_mcu_id: this.selected_mgm_mcu_id,
                selected_kelainan: this.selectedKelainan.map(id => {
                    const item = this.kelainanCount.find(x => x.Mcu_KelainanID == id);
                    return {
                        id: parseInt(id),
                        name: item ? item.Mcu_KelainanName : ""
                    };
                })
            };

            await this.$store.dispatch("patient/savekelainanselection", payload);
        },

        async generateDatabase() {
            this.$store.dispatch("patient/generateDatabase", {
                mgm_mcu_id: this.selected_mgm_mcu_id
            });
        },
        createDatabase() {
            this.dialog_confirm_create_db = true;
        },
        async confirmCreateDatabase() {
            this.dialog_confirm_create_db = false;
            const truncateSuccess = await this.$store.dispatch("patient/truncateDatabaseAction", {
                mgm_mcu_id: this.selected_mgm_mcu_id,
                confirm_truncate: true
            });

            if (truncateSuccess) {
                this.$store.dispatch("patient/createDatabase", {
                    mgm_mcu_id: this.selected_mgm_mcu_id
                });
            }
        }
    },

  }
</script>