<template>
  <view class="container">
    <!-- <view class="search-bar">
      <u-search
        placeholder="请输入会员编号或姓名查询"
        v-model="keyword"
        @custom="search"
        @search="search"
      ></u-search>
    </view> -->

    <!-- 特殊会员信息 -->
    <view class="top-member-card" v-if="topMember">
      <view class="member-info-header">
        <text>会员信息：</text>
        <text class="member-info-text">{{ formatMemberInfo(topMember) }}</text>
      </view>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{ topMember.todayAchievement }}</text>
          <text class="stat-label">今日业绩</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ topMember.yesterdayAchievement }}</text>
          <text class="stat-label">昨日业绩</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ topMember.monthAchievement }}</text>
          <text class="stat-label">本月业绩</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ topMember.lastMonthAchievement }}</text>
          <text class="stat-label">上月业绩</text>
        </view>
      </view>
    </view>

    <!-- 列表 -->
    <view class="member-list">
      <view class="member-item" v-for="item in memberList" :key="item.memberId">
        <view class="member-info-header list-header">
          <text>会员信息：</text>
          <text>{{ formatMemberInfo(item) }}</text>
        </view>
        <view class="stats-grid list-grid">
          <view class="stat-item">
            <text class="stat-value">{{ item.todayAchievement }}</text>
            <text class="stat-label">今日业绩</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ item.yesterdayAchievement }}</text>
            <text class="stat-label">昨日业绩</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ item.monthAchievement }}</text>
            <text class="stat-label">本月业绩</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ item.lastMonthAchievement }}</text>
            <text class="stat-label">上月业绩</text>
          </view>
        </view>
      </view>
    </view>

    <u-loadmore :status="loadStatus" />
  </view>
</template>

<script>
// 假设的API方法，您需要替换为真实实现
// import { getMarketAchievementTop, getMarketAchievementList } from '@/config/mine.js';

export default {
  data() {
    return {
      keyword: '',
      topMember: null, // 置顶的特殊会员
      memberList: [], // 成员列表
      page: 1,
      pageSize: 10,
      loadStatus: 'loadmore', // loadmore, loading, nomore
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '市场动态-业绩',
    })
    this.fetchTopMember()
    this.fetchMemberList(true)
  },
  onReachBottom() {
    if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
      return
    }
    this.page++
    this.fetchMemberList()
  },
  methods: {
    formatMemberInfo(member) {
      if (!member) return ''
      const { memberCode, nickName, grade, award } = member
      return `${memberCode}/${nickName}/${grade}/${award}`
    },
    search() {
      this.memberList = []
      this.page = 1
      this.fetchTopMember()
      this.fetchMemberList(true)
    },
    // 获取置顶会员数据
    async fetchTopMember() {
      // --- MOCK DATA ---
      this.topMember = {
        memberId: 'HZS32223336', // Using memberId as key
        memberCode: 'HZS32223336',
        nickName: '小新哥',
        grade: 'V5',
        award: 'W1',
        todayAchievement: 0.0,
        yesterdayAchievement: 1.0978,
        monthAchievement: 2.3395,
        lastMonthAchievement: 10.7727,
      }
      // --- REAL API CALL ---
      // try {
      //   const res = await getMarketAchievementTop({ keyword: this.keyword });
      //   if (res.code === 200) {
      //     this.topMember = res.data;
      //   }
      // } catch (e) {
      //   console.error(e);
      // }
    },
    // 获取会员列表数据
    async fetchMemberList(isRefresh = false) {
      if (isRefresh) {
        this.page = 1
        this.memberList = []
      }
      this.loadStatus = 'loading'

      // --- MOCK DATA ---
      const mockData = [
        {
          memberId: 'HZS81617255',
          memberCode: 'HZS81617255',
          nickName: '小星哥',
          grade: 'V5',
          award: 'W1',
          todayAchievement: 0.0,
          yesterdayAchievement: 0.0499,
          monthAchievement: 1.2881,
          lastMonthAchievement: 26.3515,
        },
        {
          memberId: 'HZS93817578',
          memberCode: 'HZS93817578',
          nickName: '婉琳',
          grade: 'V5',
          award: 'W1',
          todayAchievement: 0.0,
          yesterdayAchievement: 0.0,
          monthAchievement: 0.508,
          lastMonthAchievement: 2.422,
        },
        {
          memberId: 'HZS55865236',
          memberCode: 'HZS55865236',
          nickName: '谭谭',
          grade: 'V5',
          award: 'W1',
          todayAchievement: 0.0,
          yesterdayAchievement: 0.0,
          monthAchievement: 0.4261,
          lastMonthAchievement: 8.5454,
        },
        {
          memberId: 'HZS67896897',
          memberCode: 'HZS67896897',
          nickName: '楠杉',
          grade: 'V5',
          award: 'W1',
          todayAchievement: 0.0,
          yesterdayAchievement: 0.0,
          monthAchievement: 0.0,
          lastMonthAchievement: 0.0,
        },
      ]

      // Simulate network delay and pagination
      setTimeout(() => {
        // Mock: stop after 2 pages
        if (this.page > 2) {
          this.loadStatus = 'nomore'
          return
        }

        const moreData = mockData.map(item => ({
          ...item,
          memberId: item.memberId + this.page, // unique key for v-for
        }))
        this.memberList = [...this.memberList, ...moreData]

        // After adding data, check if we should be able to load more
        this.loadStatus = this.page >= 2 ? 'nomore' : 'loadmore'
      }, 500)

      // --- REAL API CALL ---
      // try {
      //   const res = await getMarketAchievementList({ page: this.page, size: this.pageSize, keyword: this.keyword });
      //   if (res.code === 200) {
      //     this.memberList = [...this.memberList, ...res.data.records];
      //     if (res.data.records.length < this.pageSize) {
      //       this.loadStatus = 'nomore';
      //     } else {
      //       this.loadStatus = 'loadmore';
      //     }
      //   }
      // } catch(e) {
      //   this.loadStatus = 'loadmore';
      //   console.error(e);
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-bar {
  margin-bottom: 20rpx;
}

.top-member-card {
  background: linear-gradient(135deg, #005bac, #007bff);
  border-radius: 16rpx;
  padding: 20rpx;
  color: #ffffff;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 91, 172, 0.3);
}

.member-info-header {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  .member-info-text {
    font-weight: bold;
  }
}

.stats-grid {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.member-list {
  .member-item {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .list-header {
      color: #333;
      font-size: 26rpx;
    }
    .list-grid {
      .stat-value {
        color: #333;
      }
      .stat-label {
        color: #666;
      }
    }
  }
}
</style>
