<template>
  <view class="page">
    <custom-navbar title="捐款记录" />
    <tile-grid />
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <view class="search-filter-row">
        <search-box
          v-model="searchKeyword"
          :width="'100%'"
          btn-text="搜索"
          placeholder="请输入搜索关键词"
          @search="onSearch()"
        />
        <view class="filter-btn" @click="show = true">
          <image
            :src="CommonEnum.FILTER"
            class="filter-icon"
            mode="aspectFit"
          />
          <text class="filter-text">筛选</text>
        </view>
      </view>

      <!-- 项目信息组件 -->
      <project-info
        :project-desc="projectInfo.proProfile"
        :project-name="projectInfo.proName"
      />

      <!-- 捐款统计组件 -->
      <donation-summary
        :participant-count="participantCount"
        :total-amount="totalAmount"
      />

      <!-- 捐款记录列表组件 -->
      <donation-list :donation-list="dataList" />

      <status-display v-if="loading" loading-text="加载中..." type="loading" />
    </view>

    <u-popup
      v-model="show"
      border-radius="30"
      height="880rpx"
      mode="bottom"
      width="750rpx"
    >
      <view class="filterBox">
        <view class="filterAll">全部筛选</view>
        <u-icon class="filterClose" name="close" @click="show = false"></u-icon>
        <view class="filterBody">
          <view class="filterTag">金额排序</view>
          <view class="custom-radio-group">
            <view
              :class="[
                'custom-radio-button',
                filter.orderAmount === 'desc' ? 'checked' : '',
              ]"
              @click="changeorderAmount('desc')"
            >
              由高到低
            </view>
            <view
              :class="[
                'custom-radio-button',
                filter.orderAmount === 'asc' ? 'checked' : '',
              ]"
              @click="changeorderAmount('asc')"
            >
              由低到高
            </view>
          </view>
          <view class="filterTag">时间排序</view>
          <view class="custom-radio-group">
            <view
              :class="[
                'custom-radio-button',
                filter.orderTime === 'desc' ? 'checked' : '',
              ]"
              @click="changeorderTime('desc')"
            >
              由远及近
            </view>
            <view
              :class="[
                'custom-radio-button',
                filter.orderTime === 'asc' ? 'checked' : '',
              ]"
              @click="changeorderTime('asc')"
            >
              由近及远
            </view>
          </view>
          <view class="filterTag">捐款区间</view>
          <template>
            <view class="container">
              <!-- 金额区间选择网格 -->
              <view class="amount-grid">
                <view
                  v-for="(item, index) in amountOptions"
                  :key="index"
                  :class="[
                    'amount-item',
                    selectedRange.key === item.key ? 'selected' : '',
                  ]"
                  @click="selectRange(item)"
                >
                  <text class="amount-text">{{ item.label }}</text>
                </view>
              </view>

              <view
                class="[amount-text,customAmount]"
                @click="selectedRange.key = 'custom'"
              >
                <view class="customItem">
                  <input
                    v-model="filter.minAmount"
                    placeholder="自定义最低"
                    type="number"
                  />
                </view>
                -
                <view class="customItem">
                  <input
                    v-model="filter.maxAmount"
                    placeholder="自定义最高"
                    type="number"
                  />
                </view>
              </view>
            </view>
          </template>
        </view>

        <view class="optionColumn">
          <view class="reset">
            <text>清空选择</text>
          </view>
          <view class="confirm" @click="filterSearch(filter)">
            <text>确定</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
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";
import ProjectInfo from "./components/project-info.vue";
import DonationSummary from "./components/donation-summary.vue";
import DonationList from "./components/donation-list.vue";
import { donationMixin } from "./mixins/donation-mixin.js";

export default {
  mixins: [donationMixin],
  components: {
    CustomNavbar,
    TileGrid,
    StatusDisplay,
    SearchBox,
    ProjectInfo,
    DonationSummary,
    DonationList,
  },
  data() {
    return {
      // 金额选项配置
      amountOptions: [
        { key: "under100", label: "100元以下", min: 0, max: 100 },
        { key: "100to500", label: "100~500元", min: 100, max: 500 },
        { key: "501to1000", label: "501~1000元", min: 501, max: 1000 },
        { key: "over1000", label: "1000元以上", min: 1000, max: null },
      ],

      // 当前选中的区间
      selectedRange: {},

      // 自定义金额输入
      customMin: "",
      customMax: "",

      show: false,

      filter: {
        minAmount: "",
        maxAmount: "",
        orderAmount: "desc",
        orderTime: "desc",
        sortAmount: "amount",
        sortTime: "time",
      },

      CommonEnum,
    };
  },
  onLoad(options) {
    // 获取页面参数
    if (options.formedId) {
      this.initData(options.formedId);
    }
  },
  onReachBottom() {
    // 触底事件

    this.loadMoreDonationRecords();
  },
  methods: {
    changeorderAmount(order) {
      this.filter.orderAmount = order;
      console.log("当前选择的排序方式:", order);
      // 触发排序操作
    },
    changeorderTime(order) {
      this.filter.orderTime = order;
      console.log("当前选择的排序方式:", order);
      // 触发排序操作
    },
    // 选择金额区间
    selectRange(item) {
      this.selectedRange = { ...item };

      // 更新筛选条件
      if (item.key !== "custom" && item.key !== "customMax") {
        this.filter.minAmount = item.min;
        this.filter.maxAmount = item.max;
      }

      // 如果是自定义选项，初始化输入值
      if (item.key === "custom") {
        this.customMin = "";
        this.customMax = "";
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f5f0e7;
}

.filterBox {
  position: relative;

  .filterAll {
    width: 750rpx;
    height: 122rpx;
    background: #fffbf5;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 40rpx;
    color: #695347;
    line-height: 122rpx;
    font-style: normal;
    text-transform: none;
    text-align: center;
  }

  .filterClose {
    position: absolute;
    right: 30rpx;
    top: 50rpx;
  }

  .filterBody {
    height: 618rpx;
    background: #fff1dd;
    padding: 20rpx;

    .filterTag {
      margin-left: 40rpx;
      width: 96rpx;
      height: 32rpx;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 500;
      font-size: 24rpx;
      color: #c7a26d;
      line-height: 32rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .custom-radio-group {
      display: flex;
      flex-direction: row;

      padding: 10px;
      border-radius: 8px;
      justify-content: space-around;

      .custom-radio-button {
        margin: 0 20rpx;
        flex: 1;
        padding: 12rpx 24rpx;
        background-color: #ffffff;
        color: #333333;
        text-align: center;
        border: 1px solid #eee;
        border-radius: 12rpx;
      }

      /* 选中状态 */
      .custom-radio-button.checked {
        background-color: #c0a580;
        color: #ffffff;
        border-color: #c0a580;
      }
    }

    .container {
      padding: 20rpx;

      border-radius: 12rpx;

      .customAmount {
        background-color: #ffffff;
        margin-top: 16rpx;
        padding: 16rpx;
        display: flex;
        gap: 16rpx;
        justify-content: center;

        .customItem {
          display: flex;
          width: 327rpx;
          align-items: center;
          justify-content: center;

          input {
            width: 150rpx;
          }
        }
      }

      .amount-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16rpx;

        .amount-item {
          height: 80rpx;
          background-color: #ffffff;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          border: 2rpx solid #eeeeee;

          &.selected {
            background-color: #c0a580;
            border-color: #c0a580;

            .amount-text {
              color: #ffffff;
            }

            .custom-hint {
              color: rgba(255, 255, 255, 0.8);
            }
          }

          .amount-text {
            font-size: 28rpx;
            color: #333;
          }

          .custom-hint {
            font-size: 22rpx;
            color: #999;
            margin-top: 4rpx;
          }
        }
      }

      .custom-input-area {
        margin-top: 20rpx;
        padding: 20rpx;
        background-color: #ffffff;
        border-radius: 8rpx;

        .input-row {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;

          .input-label {
            font-size: 28rpx;
            color: #333;
            width: 140rpx;
          }

          .amount-input {
            flex: 1;
            height: 60rpx;
            border: 2rpx solid #ddd;
            border-radius: 6rpx;
            padding: 0 16rpx;
            font-size: 28rpx;
          }

          .unit {
            font-size: 28rpx;
            color: #666;
            margin-left: 12rpx;
            width: 40rpx;
          }
        }
      }
    }
  }

  .optionColumn {
    margin-top: 20rpx;
    display: flex;
    margin-left: 34rpx;
    width: 686rpx;
    height: 90rpx;

    border-radius: 13rpx 13rpx 13rpx 13rpx;

    .reset {
      width: 344rpx;
      height: 90rpx;
      background: #fff1dd;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 13rpx 0 0 13rpx;

      text {
        height: 50rpx;
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: 500;
        font-size: 36rpx;
        color: #a24242;
        line-height: 50rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }

    .confirm {
      width: 344rpx;
      height: 90rpx;
      background: #a24242;
      border-radius: 0 13rpx 13rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;

      text {
        height: 50rpx;
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: 500;
        font-size: 36rpx;
        color: #fff1dd;
        line-height: 50rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}

.header {
  width: 100%;

  display: flex;

  flex-direction: column;
  padding: 0 15rpx 0 15rpx;
}

.search-filter-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10rpx 0 10rpx 0;
  padding: 0 20rpx;
}

.search-filter-row search-box {
  flex: 1;
}

.filter-btn {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
  padding: 0 16rpx;
  height: 70rpx;
  border-radius: 10rpx;
  cursor: pointer;
}

.filter-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.filter-text {
  color: #6b4a1b;
  font-size: 28rpx;
}
</style>
