﻿<template>
    <v-container>
        <v-card>
            <v-card-title class="bg-primary white--text text-center">
                <h5 class="mb-0">帳務查詢</h5>
                <button class="btn btn-default ms-auto"><i class="mdi mdi-close"></i></button>
            </v-card-title>
            <v-card-text>
                <v-row class="mb-0 mt-4">
                    <v-col cols="12" md="2">
                        <v-text-field v-model="query.start_date" label="起始日" type="date" dense outlined></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="query.end_date" label="結束日" type="date" dense outlined></v-text-field>
                    </v-col>
                    <v-col cols="12" md="3">
                        <v-text-field v-model="query.activity_name" label="法會" dense outlined readonly>
                            <template v-slot:append>
                                <v-btn icon @click="showActivityDialog"><v-icon>mdi-magnify</v-icon></v-btn>
                            </template>
                        </v-text-field>
                    </v-col>
                    <v-col cols="12" md="3">
                        <v-text-field v-model="query.follower_name" label="信眾" dense outlined readonly>
                            <template v-slot:append>
                                <v-btn icon @click="showFollowerDialog"><v-icon>mdi-magnify</v-icon></v-btn>
                            </template>
                        </v-text-field>
                    </v-col>
                    <v-col cols="12" md="2" class="d-flex justify-end">
                        <v-btn color="primary" class="mr-2" @click="search">查詢</v-btn>
                        <v-btn color="grey" @click="reset">重設</v-btn>
                    </v-col>
                </v-row>
                <v-data-table :headers="headers"
                              :items="items"
                              :loading="loading"
                              loading-text="載入中..."
                              class="elevation-1 verify-query-table"
                              item-key="transfer_id"
                              :footer-props="{ 'items-per-page-options': [10, 20, 50] }"
                              :expanded.sync="expanded"
                              show-expand>
                    <template v-slot:item.follower="{ item }">
                        <div>
                            <div class="font-weight-bold">{{ item.follower }}</div>
                            <div class="caption text--secondary">{{ item.transfer_name }}</div>
                            <div class="caption text--secondary">{{ item.transfer_phone }}</div>
                        </div>
                    </template>
                    <template v-slot:item.activity_info="{ item }">
                        <div>
                            <div class="font-weight-bold">{{ item.activity_name }}</div>
                            <div class="caption text--secondary">{{ item.acc_name }}</div>
                        </div>
                    </template>
                    <template v-slot:item.transfer_info="{ item }">
                        <div>
                            <div class="font-weight-bold text-primary">應收總額：{{ item.price_totals | currency }}</div>
                            <div class="font-weight-bold text-primary">入帳金額：{{ item.transfer_check_amount | currency }}</div>
                            <div class="text-success">沖帳日期：{{ item.transfer_check_date | date }}</div>
                            <div v-if="item.transfer_remain_amount > 0" class="text-warning">
                                剩餘金額：{{ item.transfer_remain_amount | currency }}
                            </div>
                        </div>
                    </template>
                    <template v-slot:item.status_info="{ item }">
                        <div>
                            <v-chip small :color="getStatusColor(item.transfer_check_status)" text-color="white">
                                {{ getStatusText(item.transfer_check_status) }}
                            </v-chip>
                            <div class="caption text--secondary mt-1">{{ item.transfer_check_memo }}</div>
                        </div>
                    </template>
                    <template v-slot:item.actions="{ item }">
                        <v-btn color="info" outlined small @click="showDetailDialog(item)">
                            <v-icon small class="mr-1">mdi-information-outline</v-icon> 詳細
                        </v-btn>
                    </template>
                    <template v-slot:expanded-item="{ headers, item }">
                        <td :colspan="headers.length">
                            <div class="pa-4">
                                <h6 class="mb-3 text-primary">
                                    <v-icon color="primary" small class="mr-1">mdi-receipt</v-icon>
                                    沖帳明細
                                </h6>
                                <v-data-table :headers="detailHeaders"
                                              :items="item.pro_order_records"
                                              class="elevation-1"
                                              hide-default-footer
                                              :disable-pagination="true"
                                              dense>
                                    <template v-slot:item.order_info="{ item }">
                                        <div>
                                            <div class="font-weight-bold">{{ item.pro_order_detail?.pro_order?.order_no }}</div>
                                            <div class="caption text--secondary">{{ item.pro_order_detail?.actitem_name }}</div>
                                        </div>
                                    </template>
                                    <template v-slot:item.payment_info="{ item }">
                                        <div>
                                            <div class="font-weight-bold">{{ item.payment_name }}</div>
                                            <div class="caption text--secondary">{{ item.bank_code }}</div>
                                        </div>
                                    </template>
                                    <template v-slot:item.amount_info="{ item }">
                                        <div>
                                            <div class="font-weight-bold text-success">{{ item.price | currency }}</div>
                                            <div class="caption text--secondary">{{ item.pay_date | date }}</div>
                                        </div>
                                    </template>
                                    <template v-slot:item.memo="{ item }">
                                        <div style="white-space: pre-line;">{{ item.reconcile_memo }}</div>
                                    </template>
                                </v-data-table>
                            </div>
                        </td>
                    </template>
                </v-data-table>
            </v-card-text>
        </v-card>

        <!-- 法會選取 Dialog -->
        <v-dialog v-model="activityDialog.show" max-width="700px">
            <v-card>
                <v-card-title class="grey lighten-2">
                    <v-icon color="primary" class="mr-2">mdi-table</v-icon>
                    選擇法會
                    <v-spacer></v-spacer>
                    <v-btn icon @click="activityDialog.show = false"><v-icon>mdi-close</v-icon></v-btn>
                </v-card-title>
                <v-card-text class="mt-4">
                    <v-text-field v-model="activityDialog.search" label="搜尋法會" dense outlined @keyup.enter="searchActivity"></v-text-field>
                    <v-data-table :headers="activityDialog.headers"
                                  :items="activityDialog.items"
                                  :loading="activityDialog.loading"
                                  item-key="num"
                                  class="elevation-1 mt-2"
                                  @click:row="selectActivity"
                                  hide-default-footer></v-data-table>
                </v-card-text>
            </v-card>
        </v-dialog>

        <!-- 信眾選取 Dialog -->
        <v-dialog v-model="followerDialog.show" max-width="700px">
            <v-card>
                <v-card-title class="grey lighten-2">
                    <v-icon color="primary" class="mr-2">mdi-account</v-icon>
                    選擇信眾
                    <v-spacer></v-spacer>
                    <v-btn icon @click="followerDialog.show = false"><v-icon>mdi-close</v-icon></v-btn>
                </v-card-title>
                <v-card-text class="mt-4">
                    <v-text-field v-model="followerDialog.search" label="搜尋信眾" dense outlined @keyup.enter="searchFollower"></v-text-field>
                    <v-data-table :headers="followerDialog.headers"
                                  :items="followerDialog.items"
                                  :loading="followerDialog.loading"
                                  item-key="num"
                                  class="elevation-1 mt-2"
                                  @click:row="selectFollower"
                                  hide-default-footer></v-data-table>
                </v-card-text>
            </v-card>
        </v-dialog>

        <!-- 詳細資訊對話框 -->
        <v-dialog v-model="dialog.show" max-width="900px">
            <v-card>
                <v-card-title class="grey lighten-2">
                    <v-icon color="info" class="mr-2">mdi-information-outline</v-icon>
                    詳細資訊
                    <v-spacer></v-spacer>
                    <v-btn icon @click="dialog.show = false">
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-card-text>
                    <div v-if="dialog.selected">
                        <v-row>
                            <v-col cols="12" md="6">
                                <h6 class="mb-3 text-primary">匯款人資訊</h6>
                                <div class="mb-2"><span class="font-weight-bold">姓名：</span>{{ dialog.selected.transfer_name }}</div>
                                <div class="mb-2"><span class="font-weight-bold">電話：</span>{{ dialog.selected.transfer_phone }}</div>
                                <div class="mb-2"><span class="font-weight-bold">信眾：</span>{{ dialog.selected.follower }}</div>
                            </v-col>
                            <v-col cols="12" md="6">
                                <h6 class="mb-3 text-success">入帳資訊</h6>
                                <div class="mb-2"><span class="font-weight-bold">入帳帳戶：</span>{{ dialog.selected.acc_name }}</div>
                                <div class="mb-2"><span class="font-weight-bold">入帳日期：</span>{{ dialog.selected.transfer_check_date | date }}</div>
                                <div class="mb-2"><span class="font-weight-bold">入帳金額：</span>{{ dialog.selected.transfer_check_amount | currency }}</div>
                                <div class="mb-2"><span class="font-weight-bold">應收總額：</span>{{ dialog.selected.price_totals | currency }}</div>
                            </v-col>
                        </v-row>
                        <v-divider class="my-4"></v-divider>
                        <v-row>
                            <v-col cols="12" md="6">
                                <h6 class="mb-3 text-purple">活動資訊</h6>
                                <div class="mb-2"><span class="font-weight-bold">活動名稱：</span>{{ dialog.selected.activity_name || '-' }}</div>
                                <div class="mb-2"><span class="font-weight-bold">支付方式：</span>{{ payTypeText[dialog.selected.transfer_pay_type] || dialog.selected.transfer_pay_type }}</div>
                                <div class="mb-2"><span class="font-weight-bold">帳號後5碼：</span>{{ dialog.selected.transfer_account_last5 || '-' }}</div>
                            </v-col>
                            <v-col cols="12" md="6">
                                <h6 class="mb-3 text-info">核對記錄</h6>
                                <div class="mb-2"><span class="font-weight-bold">核對記錄：</span>{{ dialog.selected.transfer_verify_note || '-' }}</div>
                                <div class="mb-2"><span class="font-weight-bold">帳簿備註：</span>{{ dialog.selected.transfer_check_memo || '-' }}</div>
                                <div v-if="dialog.selected.transfer_proof_img" class="mb-2">
                                    <span class="font-weight-bold">證明圖片：</span>
                                    <a :href="'../../upload/transfer_proof/' + dialog.selected.transfer_proof_img" target="_blank">查看相片</a>
                                </div>
                            </v-col>
                        </v-row>
                    </div>
                </v-card-text>
            </v-card>
        </v-dialog>
    </v-container>

</template>

<script>
    module.exports = {
        data() {
            return {
                loading: false,
                expanded: [],
                query: {
                    start_date: '',
                    end_date: '',
                    activity_num: '',
                    activity_name: '',
                    follower_num: '',
                    follower_name: ''
                },
                headers: [
                    { text: '信眾/匯款人', value: 'follower' },
                    { text: '法會/入帳帳戶', value: 'activity_info' },
                    { text: '入帳資訊', value: 'transfer_info' },
                    { text: '狀態/備註', value: 'status_info' },
                    { text: '操作', value: 'actions', sortable: false }
                ],
                detailHeaders: [
                    { text: '訂單/項目', value: 'order_info' },
                    { text: '付款機構', value: 'payment_info' },
                    { text: '沖帳金額/日期', value: 'amount_info' },
                    { text: '備註', value: 'memo' }
                ],
                items: [],
                dialog: {
                    show: false,
                    selected: null
                },
                activityDialog: {
                    show: false,
                    search: '',
                    loading: false,
                    items: [],
                    headers: [
                        { text: '編號', value: 'num' },
                        { text: '名稱', value: 'subject' }
                    ]
                },
                followerDialog: {
                    show: false,
                    search: '',
                    loading: false,
                    items: [],
                    headers: [
                        { text: '編號', value: 'num' },
                        { text: '姓名', value: 'u_name' }
                    ]
                },
                payTypeText: {
                    1: '現金',
                    2: '匯款',
                    3: '支票'
                }
            }
        },
        filters: {
            currency(val) {
                if (!val) return '0';
                return Number(val).toLocaleString();
            },
            date(val) {
                if (!val) return '';
                const date = new Date(val);
                return date.toLocaleDateString();
            }
        },
        methods: {
            search() {
                this.loading = true;
                // 串接查詢 API，帶入所有查詢條件
                axios.get('../../api/transfer_register/verify_order_record_query', { params: this.query })
                    .then(res => {
                        this.items = res.data;
                        this.expanded = []; // 重置展開狀態
                    })
                    .catch(() => {
                        this.items = [];
                        this.expanded = [];
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            reset() {
                this.query.start_date = '';
                this.query.end_date = '';
                this.query.activity_num = '';
                this.query.activity_name = '';
                this.query.follower_num = '';
                this.query.follower_name = '';
                this.items = [];
                this.expanded = [];
            },
            showDetailDialog(item) {
                this.dialog.selected = item;
                this.dialog.show = true;
            },
            showActivityDialog() {
                this.activityDialog.show = true;
                this.searchActivity();
            },
            searchActivity() {
                this.activityDialog.loading = true;
                axios.get('../../api/activity', { params: { keyword: this.activityDialog.search } })
                    .then(res => { this.activityDialog.items = res.data; })
                    .catch(() => { this.activityDialog.items = []; })
                    .finally(() => { this.activityDialog.loading = false; });
            },
            selectActivity(row) {
                this.query.activity_num = row.num;
                this.query.activity_name = row.subject;
                this.activityDialog.show = false;
            },
            showFollowerDialog() {
                this.followerDialog.show = true;
                this.searchFollower();
            },
            searchFollower() {
                this.followerDialog.loading = true;
                axios.post('../..../..../../api/follower/GetList', { u_name: this.followerDialog.search }, { params: { page: 1, pageSize: 10 } })
                    .then(res => { this.followerDialog.items = res.data.list; })
                    .catch(() => { this.followerDialog.items = []; })
                    .finally(() => { this.followerDialog.loading = false; });
            },
            selectFollower(row) {
                this.query.follower_num = row.num;
                this.query.follower_name = row.u_name;
                this.followerDialog.show = false;
            },
            getStatusColor(status) {
                switch (status) {
                    case '90': return 'warning';
                    case '99': return 'success';
                    default: return 'grey';
                }
            },
            getStatusText(status) {
                switch (status) {
                    case '90': return '沖帳有剩餘';
                    case '99': return '沖帳完成';
                    default: return '未知狀態';
                }
            }
        }
    };
</script>

<style>
    .v-data-table.verify-query-table .v-data-table__wrapper tbody tr {
        min-height: 90px !important;
        height: 90px !important;
    }

    .v-data-table.verify-query-table .v-data-table__wrapper tbody td {
        min-height: 90px !important;
        height: 90px !important;
        vertical-align: middle !important;
    }
</style>