EmailBill/Web/src/views/CalendarView.vue

<template>
  <div class="page-container calendar-container">
    <van-calendar
      title="日历"
      :poppable="false"
      :show-confirm="false"
      :formatter="formatterCalendar"
      :min-date="minDate"
      :max-date="maxDate"
      @month-show="onMonthShow"
      @select="onDateSelect"
    />

    <!-- 日期交易列表弹出层 -->
    <PopupContainer
      v-model="listVisible"
      :title="selectedDateText"
      :subtitle="getBalance(dateTransactions)"
      height="85%"
    >
      <template #header-actions>
        <SmartClassifyButton 
          ref="smartClassifyButtonRef"
          :transactions="dateTransactions"
          @save="onSmartClassifySave"
        />
      </template>
      <TransactionList
        :transactions="dateTransactions"
        :loading="listLoading"
        :finished="true"
        :show-delete="true"
        @click="viewDetail"
        @delete="handleDateTransactionDelete"
      />
    </PopupContainer>

    <!-- 交易详情组件 -->
    <TransactionDetail
      v-model:show="detailVisible"
      :transaction="currentTransaction"
      @save="onDetailSave"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import { showToast } from "vant";
import request from "@/api/request";
import { getTransactionDetail, getTransactionsByDate } from "@/api/transactionRecord";
import TransactionList from "@/components/TransactionList.vue";
import TransactionDetail from "@/components/TransactionDetail.vue";
import SmartClassifyButton from "@/components/SmartClassifyButton.vue";
import PopupContainer from "@/components/PopupContainer.vue";

const dailyStatistics = ref({});
const listVisible = ref(false);
const detailVisible = ref(false);
const dateTransactions = ref([]);
const currentTransaction = ref(null);
const listLoading = ref(false);
const selectedDate = ref(null);
const selectedDateText = ref("");

// 设置日历可选范围（例如：过去2年到未来1年）
const minDate = new Date(new Date().getFullYear() - 2, 0, 1); // 2年前的1月1日
const maxDate = new Date(new Date().getFullYear() + 1, 11, 31); // 明年12月31日

onMounted(async () => {
  await nextTick();
  setTimeout(() => {
    // 计算页面高度，滚动3/4高度以显示更多日期
    const height = document.querySelector(".calendar-container").clientHeight * 0.45;
    document.querySelector(".van-calendar__body").scrollBy({
      top: -height,
      behavior: "smooth",
    });
  }, 300);
});

// 获取日历统计数据
const fetchDailyStatistics = async (year, month) => {
  try {
    const response = await request.get("/TransactionRecord/GetDailyStatistics", {
      params: { year, month },
    });
    if (response.success && response.data) {
      // 将数组转换为对象，key为日期
      const statsMap = {};
      response.data.forEach((item) => {
        statsMap[item.date] = {
          count: item.count,
          amount: item.amount,
        };
      });
      dailyStatistics.value = {
        ...dailyStatistics.value,
        ...statsMap,
      };
    }
  } catch (error) {
    console.error("获取日历统计数据失败:", error);
  }
};

const smartClassifyButtonRef = ref(null);
// 获取指定日期的交易列表
const fetchDateTransactions = async (date) => {
  try {
    listLoading.value = true;
    const dateStr = date
      .toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
      .replace(/\//g, "-");

    const response = await getTransactionsByDate(dateStr);

    if (response.success && response.data) {
      // 根据金额从大到小排序
      dateTransactions.value = response
        .data
        .sort((a, b) => b.amount - a.amount);
      // 重置智能分类按钮
      smartClassifyButtonRef.value?.reset()
    } else {
      dateTransactions.value = [];
      showToast(response.message || "获取交易列表失败");
    }
  } catch (error) {
    console.error("获取日期交易列表失败:", error);
    dateTransactions.value = [];
    showToast("获取交易列表失败");
  } finally {
    listLoading.value = false;
  }
};

const getBalance = (transactions) => {
  let balance = 0;
  transactions.forEach(tx => {
    if(tx.type === 1) {
      balance += tx.amount;
    } else if(tx.type === 0) {
      balance -= tx.amount;
    }
  });

  if(balance >= 0) {
    return `结余收入 ${balance.toFixed(1)} 元`;
  } else {
    return `结余支出 ${(-balance).toFixed(1)} 元`;
  }
};

// 当月份显示时触发
const onMonthShow = ({ date }) => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  fetchDailyStatistics(year, month);
};

// 日期选择事件
const onDateSelect = (date) => {
  selectedDate.value = date;
  selectedDateText.value = formatSelectedDate(date);
  fetchDateTransactions(date);
  listVisible.value = true;
};

// 格式化选中的日期
const formatSelectedDate = (date) => {
  return date.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  });
};

// 查看详情
const viewDetail = async (transaction) => {
  try {
    const response = await getTransactionDetail(transaction.id);
    if (response.success) {
      currentTransaction.value = response.data;
      detailVisible.value = true;
    } else {
      showToast(response.message || "获取详情失败");
    }
  } catch (error) {
    console.error("获取详情出错:", error);
    showToast("获取详情失败");
  }
};

// 详情保存后的回调
const onDetailSave = async (saveData) => {
  // 重新加载当前日期的交易列表
  if (saveData && dateTransactions.value) {
    var updatedIndex = dateTransactions.value.findIndex(tx => tx.id === saveData.id);
    if (updatedIndex !== -1) {
      // 更新已有记录
      dateTransactions.value[updatedIndex].amount = saveData.amount;
      dateTransactions.value[updatedIndex].balance = saveData.balance;
      dateTransactions.value[updatedIndex].type = saveData.type;
      dateTransactions.value[updatedIndex].upsetedType = '';
      dateTransactions.value[updatedIndex].classify = saveData.classify;
      dateTransactions.value[updatedIndex].upsetedClassify = '';
      dateTransactions.value[updatedIndex].reason = saveData.reason;
    }
  }

  // 重新加载当前月份的统计数据
  const now = selectedDate.value || new Date();
  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
};

// 处理删除事件：从当前日期交易列表中移除，并刷新当日和当月统计
const handleDateTransactionDelete = async (transactionId) => {
  dateTransactions.value = dateTransactions.value.filter(t => t.id !== transactionId)

  // 刷新当前日期以及当月的统计数据
  const now = selectedDate.value || new Date();
  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
};

// 智能分类保存回调
const onSmartClassifySave = async () => {
  // 保存完成后重新加载数据
  if (selectedDate.value) {
    await fetchDateTransactions(selectedDate.value);
  }
  // 重新加载统计数据
  const now = selectedDate.value || new Date();
  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
};

const formatterCalendar = (day) => {
  const dayCopy = { ...day };
  if (dayCopy.date.toDateString() === new Date().toDateString()) {
    dayCopy.text = "今天";
  }

  // 格式化日期为 yyyy-MM-dd
  const dateKey = dayCopy.date
    .toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
    .replace(/\//g, "-");
  const stats = dailyStatistics.value[dateKey];

  if (stats) {
    dayCopy.topInfo = `${stats.count}笔`; // 展示消费笔数
    dayCopy.bottomInfo = `${stats.amount.toFixed(1)}元`; // 展示消费金额
  }

  return dayCopy;
};

// 初始加载当前月份数据
const now = new Date();
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);

// 全局删除事件监听，确保日历页面数据一致
const onGlobalTransactionDeleted = (e) => {
  if (selectedDate.value) {
    fetchDateTransactions(selectedDate.value)
  }
  const now = selectedDate.value || new Date()
  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
}

window.addEventListener && window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)

onBeforeUnmount(() => {
  window.removeEventListener && window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
})

// 当有交易被新增/修改/批量更新时刷新
const onGlobalTransactionsChanged = (e) => {
  if (selectedDate.value) {
    fetchDateTransactions(selectedDate.value)
  }
  const now = selectedDate.value || new Date()
  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
}

window.addEventListener && window.addEventListener('transactions-changed', onGlobalTransactionsChanged)

onBeforeUnmount(() => {
  window.removeEventListener && window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
})
</script>

<style scoped>
.calendar-container {
  /* 使用准确的视口高度减去 TabBar 高度（50px）和安全区域 */
  height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px));
  max-height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.calendar-container :deep(.van-calendar) {
  height: 100% !important;
  flex: 1;
  overflow: auto;
  margin: 0;
  padding: 0;
}

/* 移除日历组件可能的底部 padding */
.calendar-container :deep(.van-calendar__body) {
  padding-bottom: 0 !important;
}

.calendar-container :deep(.van-calendar__months) {
  padding-bottom: 0 !important;
}

/* 设置页面容器背景色 */
:deep(.van-calendar__header-title) {
  background: transparent !important;
}

</style>