﻿<template>
            <v-container>
                <v-card>
                    <v-card-title class="bg-info 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 balance-reconcile-table"
                                      item-key="id"
                                      :footer-props="{ 'items-per-page-options': [10, 20, 50] }">
                            <template v-slot:item.follower="{ item }">
                                <div>
                                    <div class="font-weight-bold">{{ item.follower }}</div>
                                    <div class="caption text--secondary" v-if="item.phone">{{ item.phone }}</div>
                                    <div class="caption text--secondary" v-if="item.phone2">{{ item.phone2 }}</div>
                                </div>
                            </template>
                            <template v-slot:item.bank_info="{ item }">
                                <div>
                                    <div class="font-weight-bold">{{ item.acc_name }}</div>
                                    <div class="caption text--secondary">{{ item.check_date | date }}</div>
                                </div>
                            </template>
                            <template v-slot:item.amount_info="{ item }">
                                <div>
                                    <div class="font-weight-bold text-primary">入帳金額：{{ item.check_amount || 0 }}</div>
                                    <div class="text-success">核銷金額：{{ (item.remain_amount || 0) }}</div>
                                    <!-- 狀態95不會有待核銷，不顯示這一行 -->
                                </div>
                            </template>
                            <template v-slot:item.remain_amount="{ item }">
                                <div class="text-success">{{ item.remain_amount || 0 }}</div>
                            </template>
                            <template v-slot:item.select_items="{ item }">
                                <div style="min-width: 120px;">
                                    {{ item.balance_actitem_name || '未選擇項目' }}
                                </div>
                            </template>
                            <template v-slot:item.detail_info="{ item }">
                                <v-btn color="info" outlined @click="showDetailDialog(item)">
                                    <v-icon small class="mr-1">mdi-information-outline</v-icon> 詳細
                                </v-btn>
                            </template>
                            <template v-slot:item.verify_note="{ item }">
                                <div style="white-space: pre-line;">{{ item.verify_note }}</div>
                            </template>
                            <template v-slot:item.check_date="{ item }">
                                <span>{{ item.check_date | date }}</span>
                            </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.name }}</div>
                                        <div class="mb-2"><span class="font-weight-bold">電話：</span>{{ dialog.selected.phone }}</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.check_date | date }}</div>
                                        <div class="mb-2"><span class="font-weight-bold">入帳金額：</span>{{ dialog.selected.check_amount }}</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>
                                    </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.verify_note || '-' }}</div>
                                    </v-col>
                                </v-row>
                            </div>
                        </v-card-text>
                    </v-card>
                </v-dialog>
            </v-container>
</template>

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

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

<script>
    module.exports = {
  data() {
    return {
      loading: false,
      query: {
        start_date: '',
        end_date: '',
        activity_num: '',
        activity_name: '',
        follower_num: '',
        follower_name: ''
      },
      headers: [
        { text: '信眾', value: 'follower' },
        { text: '入帳帳戶/日期', value: 'bank_info' },
        { text: '核銷日期', value: 'check_date', sortable: true, width: '120px' },
        { text: '核銷項目', value: 'select_items', sortable: false, width: '120px' },
        { text: '核銷金額', value: 'reconcile_amount', sortable: false, width: '120px' },
        { text: '詳細資訊', value: 'detail_info', sortable: false },
        // { text: '狀態', value: 'status', sortable: false, width: '100px' }, // 移除狀態欄
        { text: '核對記錄', value: 'verify_note', sortable: false, width: '180px' },
      ],
      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' }
        ]
      }
    }
  },
  filters: {
    date(val) {
      if (!val) return '';
      const date = new Date(val);
      return date.toLocaleDateString();
    }
  },
  methods: {
    // 使用全域 DraftUtils 工具函數
    search() {
      this.loading = true;
      // 串接查詢 API，帶入所有查詢條件
      axios.get('../../api/transfer_register/balance_reconcile_query', { params: this.query })
        .then(res => { this.items = res.data; })
        .catch(() => { this.items = []; })
        .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 = [];
    },
    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;
    }
  }
};
</script>