let app = null;

let V人員類別 = null;
let V講師編號 = null;
let V憑證類別 = [];
let V扣繳類別 = [];
let V銀行分行 = [];

function CreatePaymentSettingApp() {
    const loadMarker = document.getElementById('PaymentSettingAPP');
    if (loadMarker) {
        DoCreatePaymentSettingApp();
    }
}

function DoCreatePaymentSettingApp() {
    app = new Vue({
        el: "#PaymentSettingAPP",
        mixins: [DateMixin, ToastMixin, ApiMixin],
        data: {
            // 分頁相關
            PageIndex: 1,
            PageSize: 50,
            Total: 0,
            Items: [],

            // 輸入參數
            人員類別: "",
            講師編號: "",

            // 下拉選單資料
            憑證類別Options: [],
            扣繳類別Options: [],

            // 新增/編輯狀態
            Appending: false,
            Editing: false,

            // 銀行分行浮動選單相關
            銀行分行: [],
            ShowBankDropdown: false,
            FilteredBankBranches: [],

            // 編輯用空白物件範本
            EmptyItem: {
                編號: 0,
                講師_非講師編號: "",
                生效日期: "",
                憑證類別: "",
                扣繳類別: "",
                匯款戶名: "",
                匯款帳號: "",
                銀行分行: "",
                銀行分行代碼: "",
                備註: ""
            },

            // 目前正在編輯的項目
            EditingItem: {},

            // 編輯表單錯誤訊息
            EditErrorMessages: {
                講師_非講師編號: "",
                生效日期: "",
                憑證類別: "",
                扣繳類別: "",
                匯款戶名: "",
                匯款帳號: "",
                銀行分行: "",
                銀行分行代碼: "",
                備註: "",
                Clear() {
                    this.講師_非講師編號 = "";
                    this.生效日期 = "";
                    this.憑證類別 = "";
                    this.扣繳類別 = "";
                    this.匯款戶名 = "";
                    this.匯款帳號 = "";
                    this.銀行分行 = "";
                    this.銀行分行代碼 = "";
                    this.備註 = "";
                }
            }
        },
        created() {
            // 從全域變數取得初始資料
            this.人員類別 = V人員類別;
            this.講師編號 = V講師編號;
            this.講師姓名 = V講師姓名;
            this.憑證類別Options = V憑證類別;
            this.扣繳類別Options = V扣繳類別;
            this.銀行分行 = V銀行分行;
        },
        mounted() {
            this.SelectPage();
        },
        methods: {
            // === 資料載入方法 ===
            async SelectPage() {
                try {
                    // 使用 ASMX Web Service
                    const result = await this.callApiWithErrorMsg('付款設定', 'SelectPage', {
                        人員類別: this.人員類別,
                        講師編號: this.講師編號,
                        PageIndex: this.PageIndex,
                        PageSize: this.PageSize
                    }, '載入資料');
                    const items = this.ConvertDatesInObject(result.Data || [], '-');
                    this.Items = items;
                    this.Total = result.count || 0;
                } catch (error) {
                    console.error('SelectPage error:', error);
                }
            },

            // === 新增/編輯/刪除方法 ===
            Append() {
                this.EditingItem = JSON.parse(JSON.stringify(this.EmptyItem));
                this.EditingItem.講師_非講師編號 = this.講師編號;
                this.EditingItem.備註 = '更新內容：'
                this.Appending = true;
            },

            Edit(item, index) {
                this.EditingItem = JSON.parse(JSON.stringify(item));
                this.EditingItem.Index = index;
                this.Editing = true;
            },

            async Save() {
                this.EditErrorMessages.Clear();

                let messages = [];
                // 驗證資料
                if (!this.EditingItem.生效日期) {
                    this.EditErrorMessages.生效日期 = '請填寫';
                    messages.push('請填寫生效日期');
                }
                if (!this.EditingItem.憑證類別) {
                    this.EditErrorMessages.憑證類別 = '請選擇';
                    messages.push('請選擇憑證類別');
                }
                if (!this.EditingItem.扣繳類別) {
                    this.EditErrorMessages.扣繳類別 = '請選擇';
                    messages.push('請選擇扣繳類別');
                }
                if (!this.EditingItem.備註) {
                    this.EditErrorMessages.備註 = '請填寫';
                    messages.push('請填寫備註');
                }
                if (this.EditingItem.備註.length > 100) {
                    this.EditErrorMessages.備註 = '最多 100 個字';
                    messages.push('備註最長 100 個字');
                }

                if (messages.length > 0) {
                    this.ShowWarning(messages.join('、'));
                    return;
                }

                const isNew = this.Appending;

                try {
                    await this.callApiWithErrorMsg('付款設定', 'Save',
                        {
                            itemStr: JSON.stringify(this.EditingItem),
                            isNew: isNew
                        },
                        '儲存'
                    );
                    this.ShowSuccess('儲存成功');
                    this.Appending = false;
                    this.Editing = false;
                    this.EditingItem = {};
                    this.SelectPage(); // 重新載入資料
                } catch (error) {
                    console.error('付款設定 Save error:', error);
                    this.ShowError('儲存時發生錯誤: ' + (error.message || '請檢查網路連線'));
                }
            },

            Cancel() {
                this.EditingItem = {};
                this.Appending = false;
                this.Editing = false;
            },

            async Delete(item, index) {
                if (!confirm('確定要刪除此筆資料？')) return;

                try {
                    await this.callApiWithErrorMsg('付款設定', 'Delete',
                        {
                            編號: item.編號,
                            DB_APPNO: item.DB_APPNO
                        },
                        '儲存'
                    );
                    this.ShowSuccess('刪除成功');
                    this.SelectPage(); // 重新載入資料
                } catch (error) {
                    console.error('付款設定 Delete error:', error);
                    this.ShowError('刪除時發生錯誤: ' + (error.message || '請檢查網路連線'));
                }
            },

            GetOptionName(options, value) {
                const option = options.find(o => o.Value === value);
                return option ? option.Name : '';
            },

            // === 銀行分行浮動選單方法 ===
            FilterBankBranch() {
                const keyword = this.EditingItem.銀行分行代碼;
                if (!keyword || keyword.trim() === '') {
                    this.FilteredBankBranches = this.銀行分行.slice(0, 20);
                    return;
                }

                const lowerKeyword = keyword.toLowerCase();
                this.FilteredBankBranches = this.銀行分行.filter(branch => {
                    return branch.Value.toLowerCase().includes(lowerKeyword) ||
                        branch.Name.toLowerCase().includes(lowerKeyword);
                }).slice(0, 20);
            },

            ShowBankBranchList() {
                this.FilterBankBranch();
                this.ShowBankDropdown = true;
            },

            HideBankBranchList() {
                setTimeout(() => {
                    this.ShowBankDropdown = false;
                }, 200);
            },

            SelectBankBranch(branch) {
                this.EditingItem.銀行分行代碼 = branch.Value;
                this.EditingItem.銀行分行 = branch.Name;
                this.ShowBankDropdown = false;
            }
        }
    });
}