<template>
  <view class="page">
    <custom-navbar title="捐款记录" />
    <tile-grid :tile-image="tilesImageEnum.TILE" />
    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
      <!-- 状态展示 -->
      <status-display
          v-if="loading"
          type="loading"
          loading-text="加载中..."
      />
      <!-- 捐款记录内容将在这里添加 -->
      <search-box
          v-model="searchKeyword"
          :width="'100%'"
          :search-icon="CommonEnum.SEARCH"
          placeholder="请输入搜索关键词"
          btn-text="搜索"
          @search="onSearch"
      />
    </view>

  </view>
</template>

<script>
import { tilesImageEnum } from '@/enum/institutionalStructure.js';
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import TileGrid from "../../components/tile-grid/tile-grid.vue";
import CommonEnum from "../../enum/common";
import StatusDisplay from "../../components/status-display/status-display.vue";
import SearchBox from "../../components/search-box/search-box.vue";

export default {
  components: {
    CustomNavbar,
    TileGrid,
    StatusDisplay,
    SearchBox
  },
  data() {
    return {
      CommonEnum,
      tilesImageEnum,
      loading: false,
      searchKeyword: ''
    }
  },
  onLoad() {
    // 页面加载时获取数据
    this.loadDonationRecords()
  },
  methods: {
    onSearch(val) {
      // 这里写你的搜索逻辑，比如重新请求数据
      console.log('搜索内容：', val)
      // this.loadDonationRecords(val)  // 你可以根据 val 过滤数据
    },
    // 加载捐款记录
    async loadDonationRecords() {
      this.loading = true
      try {
        // TODO: 调用捐款记录API
        // const response = await getDonationRecords()
        // 模拟加载
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } catch (error) {
        console.error('获取捐款记录失败:', error)
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background: #F5F0E7;
}
.header {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 15rpx;
  padding-bottom: 40rpx;
}
</style>