function CreateReceiptSearchApp() {
    const loadMarker = document.getElementById('receiptSearchApp');
    if (loadMarker) {
        DoCreateReceiptSearchApp();
    }
}

function DoCreateReceiptSearchApp() {
    window.__vms = window.__vms || {}

    if (window.__vms.receiptSearchApp)
        return;

    console.log('Create receiptSearchApp');

    window.__vms.receiptSearchApp = new Vue({
        el: '#receiptSearchApp',
        mixins: [DateMixin, ToastMixin, ApiMixin],
        data: {
            searchParams: {
                計畫代號: '',
                計畫名稱: '',
                活動日期_1: '',
                活動日期_2: '',
                身分別: '',
                講師_非講師編號: '',
                憑證類別: '',
                活動類別: '',
                付款方式: ''
            },
            dropdown: {
                身分別: [],
                憑證類別: [],
                付款方式: []
            },
            dataList: [],
            selectedItems: [],
            selectAll: false,
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
            totalPages: 0,
            loading: false
        },
        created() {
            // 從 AJAX 取得查詢用下拉選單資料
            this.loadSearchDropdownLists();

            // 取回保存的查詢條件
            this.searchParams.計畫代號 = document.getElementById('ctl00_ContentPlaceHolder1_hid計畫代號').value;
            this.searchParams.計畫名稱 = document.getElementById('ctl00_ContentPlaceHolder1_hid計畫名稱').value;
            this.searchParams.活動日期_1 = document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_1').value;
            this.searchParams.活動日期_2 = document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_2').value;
            this.searchParams.身分別 = document.getElementById('ctl00_ContentPlaceHolder1_hid身分別').value;
            this.searchParams.憑證類別 = document.getElementById('ctl00_ContentPlaceHolder1_hid憑證類別').value;
            this.searchParams.活動類別 = document.getElementById('ctl00_ContentPlaceHolder1_hid活動類別').value;
            this.searchParams.付款方式 = document.getElementById('ctl00_ContentPlaceHolder1_hid付款方式').value;
            this.currentPage = 1 * document.getElementById('ctl00_ContentPlaceHolder1_hidCurrentPage').value || 1;
            this.pageSize = 1 * document.getElementById('ctl00_ContentPlaceHolder1_hidPageSize').value || 20;
        },
        computed: {
            displayPages() {
                const pages = [];
                const start = Math.max(1, this.currentPage - 2);
                const end = Math.min(this.totalPages, this.currentPage + 2);
                for (let i = start; i <= end; i++) {
                    pages.push(i);
                }
                return pages;
            }
        },
        mounted() {
            this.search();
        },
        methods: {
            async loadSearchDropdownLists() {
                this.dropdown.身分別 = await this.loadSearchDropdownList("身分別");
                this.dropdown.憑證類別 = await this.loadSearchDropdownList("憑證類別");
                this.dropdown.付款方式 = await this.loadSearchDropdownList("付款方式");
            },
            async loadSearchDropdownList(key) {
                try {
                    const result = await this.callApiWithErrorMsg(
                        '領據處理',
                        'GetSearchDropdownLists',
                        { key: key },
                        '載入下拉選單'
                    );
                    return result.Data || [];
                }
                catch(error) {
                    console.error('載入下拉選單失敗:', error);
                    return [];
                }
            },

            clearSearch() {
                this.searchParams.計畫代號 = '';
                this.searchParams.計畫名稱 = '';
                this.searchParams.活動日期_1 = '';
                this.searchParams.活動日期_2 = '';
                this.searchParams.身分別 = '';
                this.searchParams.憑證類別 = '';
                this.searchParams.活動類別 = '';
                this.searchParams.付款方式 = '';
                this.search();
            },

            async search() {
                this.loading = true;

                const params = {
                    pageIndex: this.currentPage,
                    pageSize: parseInt(this.pageSize),
                    活動日期_1: this.searchParams.活動日期_1 || null,
                    活動日期_2: this.searchParams.活動日期_2 || null,
                    身分別: this.searchParams.身分別 || null,
                    講師_非講師編號: this.searchParams.講師_非講師編號 || null,
                    憑證類別: this.searchParams.憑證類別 || null,
                    計畫代號: this.searchParams.計畫代號 || null,
                    計畫名稱: this.searchParams.計畫名稱 || null,
                    活動類別: this.searchParams.活動類別 || null,
                    付款方式: this.searchParams.付款方式 || null,
                    orderBy: ''
                };

                // 保存查詢條件
                document.getElementById('ctl00_ContentPlaceHolder1_hid計畫代號').value = params.計畫代號;
                document.getElementById('ctl00_ContentPlaceHolder1_hid計畫名稱').value = params.計畫名稱;
                document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_1').value = params.活動日期_1;
                document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_2').value = params.活動日期_2;
                document.getElementById('ctl00_ContentPlaceHolder1_hid身分別').value = params.身分別;
                document.getElementById('ctl00_ContentPlaceHolder1_hid憑證類別').value = params.憑證類別;
                document.getElementById('ctl00_ContentPlaceHolder1_hid活動類別').value = params.活動類別;
                document.getElementById('ctl00_ContentPlaceHolder1_hid付款方式').value = params.付款方式;
                document.getElementById('ctl00_ContentPlaceHolder1_hidCurrentPage').value = this.currentPage;
                document.getElementById('ctl00_ContentPlaceHolder1_hidPageSize').value = this.pageSize;

                try {
                    let value = null;
                    const result = await this.callApiWithErrorMsg(
                        '領據處理',
                        'SelectPage',
                        params,
                        '查詢'
                    );
                    // 使用 ConvertDatesInObject 自動轉換日期
                    this.dataList = this.ConvertDatesInObject(result.Data || [], '-');
                    this.totalCount = result.TotalCount;
                    this.totalPages = Math.ceil(this.totalCount / this.pageSize);
                    this.selectedItems = [];
                    this.selectAll = false;
                }
                catch (error) {
                    console.error('查詢失敗:', error);
                }
                finally {
                    this.loading = false;
                };
            },

            searchButtonClick()
            {
                this.currentPage = 1;
                this.search();
            },

            changePage(page) {
                if (page >= 1 && page <= this.totalPages) {
                    this.currentPage = page;
                    this.search();
                }
            },

            toggleSelectAll() {
                if (this.selectAll) {
                    this.selectedItems = [...this.dataList];
                } else {
                    this.selectedItems = [];
                }
            },

            addNew() {
                // 切換到領據登錄與修改分頁
                document.getElementById('ctl00_ContentPlaceHolder1_hid編號').value = '';
                window.__doPostBack('ctl00$ContentPlaceHolder1$btnTab2', '');
            },

            edit(編號) {
                // 切換到領據登錄與修改分頁，並進入該行資料的修改
                document.getElementById('ctl00_ContentPlaceHolder1_hid編號').value = 編號;
                window.__doPostBack('ctl00$ContentPlaceHolder1$btnTab2', '');
            },

            async printSelected() {
                if (this.selectedItems.length === 0) {
                    this.ShowWarning('請選擇要列印的領據');
                    return;
                }

                this.loading = true;
                try {
                    const idList = this.selectedItems.map(item => item.編號);
                    
                    const result = await this.callApiWithErrorMsg(
                        '領據處理',
                        'Print',
                        { idList: idList },
                        '列印領據'
                    );

                    if (result.Success) {
                        // 下載 Excel 檔案
                        if (result.Data && result.Data.fileName) {
                            const link = document.createElement('a');
                            link.href = `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${result.Data.excelData}`;
                            link.download = result.Data.fileName;
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);

                            this.ShowSuccess(result.Message);
                        } else {
                            this.ShowWarning(result.Message);
                        }
                    } else
                    {
                        this.ShowError('列印失敗: ' + (error.message || '請稍後重試'));
                    }
                    
                    // 列印完成後，刷新列表
                    this.search();
                } catch (error) {
                    this.ShowError('列印失敗: ' + (error.message || '請檢查網路連線'));
                } finally {
                    this.loading = false;
                }
            },

            async doExport() {
                if (this.dataList.length === 0) {
                    this.ShowWarning('請先查詢再匯出');
                    return;
                }

                this.loading = true;
                try {
                    const idList = this.selectedItems.map(item => item.編號);

                    const params = {
                        活動日期_1: this.searchParams.活動日期_1 || null,
                        活動日期_2: this.searchParams.活動日期_2 || null,
                        身分別: this.searchParams.身分別 || null,
                        講師_非講師編號: this.searchParams.講師_非講師編號 || null,
                        憑證類別: this.searchParams.憑證類別 || null,
                        計畫代號: this.searchParams.計畫代號 || null,
                        計畫名稱: this.searchParams.計畫名稱 || null,
                        活動類別: this.searchParams.活動類別 || null,
                        付款方式: this.searchParams.付款方式 || null,
                        orderBy: ''
                    };

                    const result = await this.callApiWithErrorMsg(
                        '領據處理',
                        'Export',
                        params,
                        '領據匯出'
                    );

                    // 下載 Excel 檔案
                    if (result.Data && result.Data.fileName) {
                        const link = document.createElement('a');
                        link.href = `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${result.Data.excelData}`;
                        link.download = result.Data.fileName;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);

                        this.ShowSuccess('匯出完成');
                    } else {
                        this.ShowError('匯出失敗，沒有檔案內容');
                    }
                } catch (error) {
                    this.ShowError('匯出失敗: ' + (error.message || '請檢查網路連線'));
                } finally {
                    this.loading = false;
                }
            },

            //async voidSelected() {
            //    if (this.selectedItems.length === 0) {
            //        this.ShowWarning('請選擇要作廢的領據');
            //        return;
            //    }
            //    if (!confirm('確定要作廢/取消作廢選取的領據嗎？')) {
            //        return;
            //    }

            //    this.loading = true;
            //    try {
            //        // 並行調用多個 API
            //        const promises = this.selectedItems.map(item => {
            //            return this.callApi('領據處理', 'Void', {
            //                no: item.編號,
            //                dbAppNo: item.DB_APPNO
            //            });
            //        });

            //        await Promise.all(promises);
            //        this.ShowSuccess('作廢操作完成');
            //        this.search();
            //    } catch (error) {
            //        console.error('Void error:', error);
            //        this.ShowError('作廢操作失敗: ' + (error.message || '請檢查網路連線'));
            //    } finally {
            //        this.loading = false;
            //    }
            //},

            //async deleteSelected() {
            //    if (this.selectedItems.length === 0) {
            //        this.ShowWarning('請選擇要刪除的領據');
            //        return;
            //    }
            //    if (!confirm('確定要刪除選取的領據嗎？此操作無法復原！')) {
            //        return;
            //    }

            //    this.loading = true;
            //    try {
            //        // 並行調用多個 API
            //        const promises = this.selectedItems.map(item => {
            //            return this.callApi('領據處理', 'Delete', {
            //                no: item.編號,
            //                dbAppNo: item.DB_APPNO
            //            });
            //        });

            //        await Promise.all(promises);
            //        this.ShowSuccess('刪除完成');
            //        this.search();
            //    } catch (error) {
            //        console.error('Delete error:', error);
            //        this.ShowError('刪除失敗: ' + (error.message || '請檢查網路連線'));
            //    } finally {
            //        this.loading = false;
            //    }
            //}
        }
    });
}