﻿<template>
    <div id="content" class="container-fluid">
        <v-btn @click.prevent="gotoAdd()" color="primary">新增</v-btn>
        <v-data-table v-model="data_table.selected"
                      :items="data_table.list"
                      item-key="order_no"
                      :options.sync="options"
                      :headers="data_table.header"
                      :footer-props="data_table.footer"
                      :server-items-length="data_table.count"
                      :loading="data_table.loading"
                      :single-select="data_table.singleSelect"
                      hide-default-footer
                      :page.sync="data_table.page"
                      :items-per-page.sync="data_table.pageSize"
                      class="elevation-1">

            <template #item.slot_btn="{ item }">
                <a @click.prevent="openReceipt(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-receipt-text"></i>開立收據</a>
                <!--<a :href="'reg.aspx?order_no='+item.order_no" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>編輯</a>
            <a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>-->
            </template>
        </v-data-table>
        <v-container>
            <v-row class="align-baseline" wrap>
                <v-col cols="12" md="9">
                    <v-pagination v-model="data_table.page"
                                  :length="pageCount">
                    </v-pagination>
                </v-col>
                <v-col class="text-truncate text-right" cols="12" md="2">
                    共 {{ data_table.count }} 筆, 頁數:
                </v-col>
                <v-col cols="6" md="1">
                    <v-text-field v-model="data_table.page"
                                  type="number"
                                  hide-details
                                  dense
                                  min="1"
                                  :max="pageCount"
                                  @input="data_table.page = parseInt($event, 10)"></v-text-field>
                </v-col>
            </v-row>
        </v-container>




        <div v-if="isModalOpen" class="modal-backdrop" @click.self="closeModal" 
             style="top: 5vh !important; left: 5vw !important; display: flex; margin: auto !important; width: 100% !important; height: 100% !important; ">

            <!-- Modal Window Box -->
            <div class="modal-window" style="height: 100% !important; width: 100% !important; overflow: auto !important; width: 80vw !important; height: 80vh !important; ">
                <header class="modal-header">
                    <!--<h2>Modal Title</h2>-->
                    <button @click="closeModal" class="close-btn">&times;</button>
                </header>

                <main class="modal-body" style="overflow-y:auto;">
                    <!-- Async component loaded dynamically via v-if -->
                    <receipt-component :form-data="formData" @close-dialog="closeModal" mode="preOrder" :order_no="receiptComponent.order_no" :total_amt="receiptComponent.total_amt" />
                </main>
            </div>

        </div>
    </div>
</template>

<script>
    module.exports = {
        props: ['formData'],
        name:"ParentComponent",
        components: {
            // Add .then(m => m.default || m) to safely handle module.exports
            'ReceiptComponent': httpVueLoader('../receipt/receipt.vue'),
        },
        data() {
            return {
                options: { multiSort: false },
                search_options: { multiSort: false },
                isModalOpen: false,
                receiptComponent: {
                    order_no: "",
                    total_amt:0
                },
                search: {},
                data_table: {
                    loading: true,
                    list: [],
                    selected: [],
                    singleSelect: false,
                    count: 0,
                    page: 1,
                    pageSize: 10,
                    header: [
                        { text: '信眾', value: 'f_name' },
                        { text: '報名單號', value: 'order_no' },
                        { text: '收據號碼', value: 'receipt_num' },
                        { text: '活動', value: 'act_name'},
                        { text: '功德項目數量', value: 'item_count' },
                        { text: '總金額', value: 'total_amt' },
                        { text: '登錄人員', value: 'admin_num' },
                        { text: '登錄時間', value: 'reg_time' },
                        { text: '', value: 'slot_btn', sortable: false, align: 'end' }
                    ],
                    footer: {
                        showFirstLastPage: true,
                        itemsPerPageOptions: [5, 10, 20, 30],
                    },
                },
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            openModal() {
                this.isModalOpen = true;
            },
            closeModal(param="") {
                this.isModalOpen = false;
                if (param=="reload") {
                    this.loadData()
                }
            },
            openReceipt(item) {///開收據
                this.openModal();
                this.receiptComponent.order_no = item.order_no;
                this.receiptComponent.total_amt = item.total_amt;
            },
            gotoAdd() {
                this.$emit('custom-event', { action: 'add' });
            },
            loadData(clearpage = false) {
                const { sortBy, sortDesc, page, itemsPerPage } = this.options
                //page = this.data_table.page;
                let search = {}
                const params = {
                    sortBy: "", sortDesc: false,
                    page: clearpage ? '1' : page, pageSize: itemsPerPage
                };
                this.data_table.loading = true
                axios
                    .post(HTTP_HOST + 'api/preOrder/GetPreOrder', search, { params: params })
                    .then(response => {
                        console.log(response)
                        this.data_table.list = response.data.list
                        this.data_table.count = response.data.count;
                        this.data_table.loading = false

                        const dataToStore = JSON.stringify(this.data_table);
                        //sessionStorage.setItem("order_list_cache", dataToStore);
                    })
                    .catch(error => console.log(error))
            },
            search_headers() {

            },
            search_select() {

            }
        },
        watch: {

        },
        computed: {
            pageCount() {
                return Math.ceil(this.data_table.count / this.data_table.pageSize)
            },
        }
    };
</script>

<style scoped>
    /* Basic Modal Styles */
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10001;
    }

    .modal-window {
        background: white;
        padding: 20px;
        border-radius: 8px;
        min-width: 300px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .close-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }
</style>