<script lang='ts' setup>
import dayjs from "dayjs";
import { peopleOutline, trendingUpOutline, walletOutline } from "ionicons/icons";
import { client, safeClient } from "@/api";

const [depth1Query] = useResetRef({
  depth: 1,
  pageIndex: 1,
  pageSize: 10,
});
const [depth2Query] = useResetRef({
  depth: 2,
  pageIndex: 1,
  pageSize: 10,
});
const [depth3Query] = useResetRef({
  depth: 3,
  pageIndex: 1,
  pageSize: 10,
});
// 统计数据
const { data: statistics } = safeClient(client.api.team.stats.get());
const { data: depth1, execute: executeDepth1 } = safeClient(() => client.api.team.members.get({ query: { ...depth1Query.value } }));
const { data: depth2, execute: executeDepth2 } = safeClient(() => client.api.team.members.get({ query: { ...depth2Query.value } }));
const { data: depth3, execute: executeDepth3 } = safeClient(() => client.api.team.members.get({ query: { ...depth3Query.value } }));

// 当前选中的级别
const selectedLevel = ref<1 | 2 | 3>(1);

// 获取当前级别对应的数据源和执行函数
const currentData = computed(() => {
  switch (selectedLevel.value) {
    case 1:
      return depth1;
    case 2:
      return depth2;
    case 3:
      return depth3;
    default:
      return depth1;
  }
});

const currentExecute = computed(() => {
  switch (selectedLevel.value) {
    case 1:
      return executeDepth1;
    case 2:
      return executeDepth2;
    case 3:
      return executeDepth3;
    default:
      return executeDepth1;
  }
});

const currentQuery = computed(() => {
  switch (selectedLevel.value) {
    case 1:
      return depth1Query;
    case 2:
      return depth2Query;
    case 3:
      return depth3Query;
    default:
      return depth1Query;
  }
});

// 当前级别的团队成员列表（API返回的已分页数据）
const filteredMembers = computed(() => {
  return currentData.value.value?.data || [];
});

// 全部成员数量
const totalMembers = computed(() => {
  return currentData.value.value?.pagination.total || 0;
});

// 总页数
const totalPages = computed(() => {
  return Math.ceil(totalMembers.value / currentQuery.value.value.pageSize);
});

// 当前页码
const currentPage = computed(() => {
  return currentQuery.value.value.pageIndex;
});

function handleLevelChange(event: CustomEvent) {
  selectedLevel.value = event.detail.value;
  // 切换级别时重置到第一页
  currentQuery.value.value.pageIndex = 1;
  currentExecute.value();
}

async function goToPage(page: number) {
  if (page >= 1 && page <= totalPages.value) {
    currentQuery.value.value.pageIndex = page;
    await currentExecute.value();
  }
}

function prevPage() {
  goToPage(currentPage.value - 1);
}

function nextPage() {
  goToPage(currentPage.value + 1);
}
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ion-buttons slot="start">
          <back-button />
        </ion-buttons>
        <ion-title>我的团队</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <!-- 团队人数统计 -->
      <div class="stats-section">
        <div class="section-title">
          <ion-icon :icon="peopleOutline" class="title-icon" />
          <span>团队规模</span>
        </div>
        <div class="team-size-card">
          <div class="team-total">
            <div class="total-value">
              {{ statistics?.totalCount }}
            </div>
            <div class="total-label">
              团队总人数
            </div>
          </div>
          <div class="team-growth">
            <div class="growth-item">
              <span class="growth-label">今日新增</span>
              <span class="growth-value">{{ statistics?.todayCount }}</span>
            </div>
            <div class="growth-item">
              <span class="growth-label">昨日新增</span>
              <span class="growth-value">{{ statistics?.yesterdayCount }}</span>
            </div>
            <div class="growth-item">
              <span class="growth-label">本月新增</span>
              <span class="growth-value">{{ statistics?.monthCount }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 助力统计 -->
      <!-- <div class="stats-section">
        <div class="section-title">
          <ion-icon :icon="trendingUpOutline" class="title-icon" />
          <span>团队助力</span>
        </div>
        <div class="unified-card">
          <div class="unified-left">
            <div class="unified-value">
              ¥{{ statistics?.totalSupport.toFixed(2) }}
            </div>
            <div class="unified-label">
              团队总助力
            </div>
          </div>
          <div class="unified-right">
            <div class="unified-item">
              <span class="unified-item-label">本月助力</span>
              <span class="unified-item-value">¥{{ statistics?.monthSupport.toFixed(2) }}</span>
            </div>
            <div class="unified-item">
              <span class="unified-item-label">较上月</span>
              <span class="unified-item-value" :class="supportChange.isPositive ? 'success' : 'danger'">
                {{ supportChange.isPositive ? '+' : '' }}{{ supportChange.percent }}%
              </span>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 收益统计 -->
      <!-- <div class="stats-section">
        <div class="section-title">
          <ion-icon :icon="walletOutline" class="title-icon" />
          <span>团队收益</span>
        </div>
        <div class="unified-card">
          <div class="unified-left">
            <div class="unified-value">
              ¥{{ statistics?.todayIncome.toFixed(2) }}
            </div>
            <div class="unified-label">
              今日收益
            </div>
          </div>
          <div class="unified-right">
            <div class="unified-item">
              <span class="unified-item-label">本周收益</span>
              <span class="unified-item-value">¥{{ statistics.weekIncome.toFixed(2) }}</span>
            </div>
            <div class="unified-item">
              <span class="unified-item-label">较上月</span>
              <span class="unified-item-value" :class="incomeChange.isPositive ? 'success' : 'danger'">
                {{ incomeChange.isPositive ? '+' : '' }}{{ incomeChange.percent }}%
              </span>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 团队列表 -->
      <div class="team-list-section">
        <div class="section-title">
          <span>团队成员</span>
        </div>

        <!-- 级别切换 -->
        <ion-segment :value="selectedLevel" class="level-segment" @ion-change="handleLevelChange">
          <ion-segment-button :value="1">
            <ion-label>一级直推</ion-label>
          </ion-segment-button>
          <ion-segment-button :value="2">
            <ion-label>二级直推</ion-label>
          </ion-segment-button>
          <ion-segment-button :value="3">
            <ion-label>三级直推</ion-label>
          </ion-segment-button>
        </ion-segment>

        <!-- 成员列表 -->
        <div class="member-list">
          <div
            v-for="member in filteredMembers"
            :key="member.profile.userId"
            class="member-card"
          >
            <div class="member-header">
              <div class="flex items-center gap-3">
                <div class="member-avatar">
                  <img src="@/assets/images/avatar.jpg">
                </div>
                <div>
                  <div class="member-name">
                    {{ member.profile.nickname }}
                  </div>
                  <div class="info-row-item">
                    <span class="value">178888888</span>
                  </div>
                </div>
              </div>
              <div class="member-amount">
                ¥{{ 1243 }}
              </div>
            </div>
            <div class="member-info">
              <div class="info-row-item">
                <span class="label">加入时间</span>
                <span class="value">{{ dayjs(member.profile.createdAt).format('YYYY-MM-DD HH:mm') }}</span>
              </div>
              <div class="info-row-item">
                <span class="label">邀请人数</span>
                <span class="value highlight">{{ member.directCount }}人</span>
              </div>
            </div>
          </div>

          <div v-if="filteredMembers.length === 0" class="empty-list">
            <ion-icon :icon="peopleOutline" class="empty-icon" />
            <div class="empty-text">
              暂无成员
            </div>
          </div>
        </div>

        <!-- 分页控制 -->
        <div v-if="totalMembers > 0 && totalPages > 1" class="pagination-section">
          <div class="pagination-info">
            共 {{ totalMembers }} 人，第 {{ currentPage }}/{{ totalPages }} 页
          </div>
          <div class="pagination-buttons">
            <ion-button
              fill="outline"
              size="small"
              :disabled="currentPage === 1"
              @click="prevPage"
            >
              上一页
            </ion-button>
            <ion-button
              fill="outline"
              size="small"
              :disabled="currentPage === totalPages"
              @click="nextPage"
            >
              下一页
            </ion-button>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 100%;
}
.stats-section {
  background: white;
  padding: 20px;
  margin-bottom: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.title-icon {
  font-size: 20px;
  color: #c41e3a;
}

.team-size-card {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #fff7f0 0%, #ffe8e8 100%);
  border-radius: 12px;
  padding: 20px;
  gap: 20px;
}

.team-total {
  flex: 1;
  text-align: center;
  padding-right: 20px;
  border-right: 1px solid #333;
}

.total-value {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.total-label {
  font-size: 14px;
}

.team-growth {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.growth-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.growth-label {
  font-size: 14px;
}

.growth-value {
  font-size: 18px;
  font-weight: 700;
}

.unified-card {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8edf3 100%);
  border-radius: 12px;
  padding: 20px;
  gap: 20px;
}

.unified-left {
  flex: 1;
  text-align: center;
  padding-right: 20px;
  border-right: 1px solid #333;
}

.unified-value {
  font-size: 28px;
  font-weight: 700;
  color: #c41e3a;
  margin-bottom: 8px;
}

.unified-label {
  font-size: 14px;
  color: #666;
}

.unified-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.unified-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unified-item-label {
  font-size: 14px;
  color: #666;
}

.unified-item-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.unified-item-value.success {
  color: #52c41a;
}

.unified-item-value.danger {
  color: #ff4d4f;
}

.team-list-section {
  background: white;
  padding: 20px;
  min-height: 400px;
}

.level-segment {
  margin-bottom: 16px;
  --background: #f5f5f5;
  border-radius: 12px;
  padding: 4px;
}

.level-segment ion-segment-button {
  --indicator-color: #c41e3a;
  --color: #666;
  --color-checked: white;
  min-height: 36px;
  font-size: 14px;
  font-weight: 500;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-card {
  background: #fafafa;
  border-radius: 12px;
  padding: 16px;
}

.member-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
  gap: 12px;
}

.member-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.member-amount {
  font-size: 18px;
  font-weight: 700;
  color: #c41e3a;
}

.member-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-row-item .label {
  font-size: 13px;
  color: #999;
}

.info-row-item .value {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.info-row-item .value.highlight {
  color: #c41e3a;
  font-weight: 600;
}

.empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  color: #ddd;
  margin-bottom: 12px;
}

.empty-text {
  font-size: 14px;
  color: #999;
}

.pagination-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8;
}

.pagination-info {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
}

.pagination-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.pagination-buttons ion-button {
  --border-color: #c41e3a;
  --color: #c41e3a;
  --border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  min-width: 80px;
}

.pagination-buttons ion-button:not([disabled]):hover {
  --background: rgba(196, 30, 58, 0.05);
}

.pagination-buttons ion-button[disabled] {
  --border-color: #ddd;
  --color: #999;
  opacity: 0.5;
}
</style>
