<script setup>
import { ref, onMounted } from 'vue'
import AppHeader from '@/components/AppHeader.vue'
import { showFailToast } from 'vant'
import request from '@/utils/request'

// 响应式数据
const smCount = ref(0)
const rate = ref('')
const tzAmountTodayTotal = ref(null)
const tzAmountTotal = ref(null)
const list = ref([])
const total = ref(0)
const allTotal = ref(null)
const pageSize = ref(10)
const pageNum = ref(1)
const loading = ref(false)
const finished = ref(false)
const emptyTipsShow = ref(false)
const oneC = ref(0)
const twoC = ref(0)
const thirC = ref(0)
const teamTotalIncome = ref(0)
const todayIncome = ref(0)
const commissionAmount = ref(0)
const totalInvestment = ref(0)
const userData = ref({})
const listContent = ref(null)

// 获取用户信息
const getUserInfo = async () => {
  const res = await request.get("/system/user/")
  if (res.smCount) {
    smCount.value = res.smCount
    userData.value = res
  }
}
let level = ref(1)
const changeLevel = (level1) => {
  level.value = level1
  resetList()
  getTeam()
}
// 获取团队信息
const getTeam = async () => {
  try {
    loading.value = true
    const data = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      type: level.value
    }
    const res = await request.get('/ops/teamRanking/achievement', data)
    if (res.code === 200) {
      list.value = [...list.value, ...res.data.rows]
      total.value = res.data.total
      allTotal.value = res.data.allTotal
      tzAmountTodayTotal.value = res.data.tzAmountTodayTotal
      tzAmountTotal.value = res.data.tzAmountTotal
      rate.value = res.data.rate
      oneC.value = res.data.firstChildTotal
      twoC.value = res.data.secondChildTotal
      thirC.value = res.data.thirdChildTotal
      teamTotalIncome.value = res.data.teamTotalIncome || 0
      todayIncome.value = res.data.todayIncome || 0
      commissionAmount.value = res.data.commissionAmount || 0
      totalInvestment.value = res.data.totalInvestment || 0

      if (list.value.length >= total.value) {
        finished.value = true
      } else {
        pageNum.value++
      }
    } else {
      showFailToast(res.msg || '加载失败')
      finished.value = true
    }
  } catch (error) {
    console.error('获取团队信息失败:', error)
    showFailToast(error.msg || '加载失败，请重试')
  } finally {
    loading.value = false
  }
}

// 重置列表状态
const resetList = () => {
  list.value = []
  pageNum.value = 1
  finished.value = false
  loading.value = false
  total.value = 0
  emptyTipsShow.value = false
}

// 添加滚动处理函数
const handleScroll = () => {
  if (loading.value || finished.value) return
  
  const scrollEl = listContent.value
  if (!scrollEl) return
  
  const { scrollTop, scrollHeight, clientHeight } = scrollEl
  // 当滚动到距离底部20px时触发加载
  if (scrollHeight - scrollTop - clientHeight < 20) {
    getTeam()
  }
}

// 初始化
onMounted(() => {
  getUserInfo()
  getTeam()
})
</script>

<template>
  <AppHeader title="我的团队"/>
  <div class="container">
    <div class="income-header">
      世界银行团队({{ allTotal }}人)
    </div>
    <div class="income-panel">
      <div class="user-info">Hi，{{ userData?.nickName?.substring(0, 1) }}** <span>用户所属职级</span>
      </div>
      <div class="income-content">
        <div class="income-row">
          <div class="income-item">
            <div class="label">累计团队收益<span>(元)</span></div>
            <div class="value">{{ teamTotalIncome.toFixed(2) }}</div>
          </div>
          <div class="income-item">
            <div class="label">今日收益<span>(元)</span></div>
            <div class="value">{{ todayIncome.toFixed(2) }}</div>
          </div>
          <div class="income-item">
            <div class="label">佣金<span>(元)</span></div>
            <div class="value">{{ commissionAmount.toFixed(2) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="stats-panel">
      <div class="stats-row">
        <div class="stats-item">
          <div class="label">总注册会员</div>
          <div class="value">{{ allTotal }}<span>人</span></div>
        </div>
        <div class="stats-item">
          <div class="label">总参与会员</div>
          <div class="value">{{ allTotal }}<span>人</span></div>
        </div>
        <div class="stats-item">
          <div class="label">总投资金额<span>(元)</span></div>
          <div class="value">{{ totalInvestment.toFixed(2) }}</div>
        </div>
      </div>

      <div class="team-level">
        <div class="level-header">
          <div @click="changeLevel(1)" :class="['level-tab', level === 1 ? 'active' : '']">一级团队</div>
          <div @click="changeLevel(2)" :class="['level-tab', level === 2 ? 'active' : '']">二级团队</div>
        </div>
        <div class="level-content">
          <div class="level-info">
            <div>{{ level === 1 ? '一级人数' : '二级人数' }}: <span class="number">{{ level === 1 ? oneC : twoC
                }}</span><span>人</span></div>
            <div>收益金额<span>(元)</span>: <span class="number">{{ teamTotalIncome.toFixed(2) }}</span></div>
          </div>
        </div>
      </div>

      <div class="account-list">
        <div class="list-header">
          <div class="col">下级账户</div>
          <div class="col">姓名</div>
          <div class="col">投资金额</div>
          <div class="col">注册时间</div>
        </div>
        <div class="list-content" ref="listContent" @scroll="handleScroll">
          <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="col">{{ item.userPhone }}</div>
            <div class="col">{{ item.userName }}</div>
            <div class="col">{{ item.tzAmount?.toFixed(2) || '0.00' }}</div>
            <div class="col">{{ item.createTime.split(' ')[0] }}</div>
          </div>
          <div v-if="loading" class="loading-text">加载中...</div>
          <div v-if="finished" class="finished-text">没有更多了</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  margin-top: 54px;
  width: 100%;
  min-height: calc(100vh - 52px);
  background: url('@/static/common/commonbg.png') no-repeat;
  background-size: 100% 100%;
  padding: 10px;

  .income-header {
    font-weight: 500;
    font-size: 20px;
    color: #000000;
    line-height: 22px;
  }

  .income-panel {
    background: #fff;
    border-radius: 12px;
    margin-top: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;

    .user-info {
      display: flex;
      align-items: center;

      span {
        background: url('@/static/my/level.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
        width: 89px;
        margin-left: 10px;
        height: 16px;
        text-align: center;
        font-weight: 400;
        font-size: 10px;
        color: #000000;
        line-height: 20px;
      }
    }

    .income-content {
      margin-top: 15px;

      .income-row {
        display: flex;
      }

      .income-item {
        text-align: center;
        flex: 1;

        .label {
          font-weight: 400;
          font-size: 13px;
          color: #4D4D4D;
          line-height: 18px;

          span {
            font-size: 9px;
          }
        }

        .value {
          margin-top: 17px;
          font-family: Arial;
          font-weight: bold;
          font-size: 19px;
          color: #000000;
          line-height: 20px;
        }
      }
    }
  }
}

.stats-panel {
  background: #fff;
  border-radius: 12px;
  margin-top: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 15px 0 5px;
    border-bottom: 1px dashed #f5f5f5;

    .stats-item {
      text-align: center;

      .label {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;

        span {
          font-size: 9px;
        }
      }

      .value {
        font-size: 18px;
        font-weight: 600;
        color: #333;

        span {
          font-size: 9px;
        }
      }
    }
  }

  .team-level {
    background: url('@/static/my/teambg.png') no-repeat;
    background-size: 100% 100%;
    padding-bottom: 40px;

    .level-header {
      display: flex;
      justify-content: center;

      .level-tab {
        width: 135px;
        height: 25px;
        margin: 24px 0 0;
        text-align: center;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        line-height: 25px;
        border: 1px solid #000000;
      }

      .active {
        background: #000000;
        color: #fff;
      }

    }

    .level-content {
      margin-top: 10px;

      .level-info {
        display: flex;
        justify-content: space-around;
        font-weight: 400;
        font-size: 13px;
        color: #FFF4E3;
        line-height: 18px;

        span {
          font-size: 9px;
        }

        .number {
          font-size: 16px;
        }

        >div {
          text-align: center;
        }
      }
    }
  }

  .account-list {
    .list-header {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 12px 15px;
      font-size: 14px;
      border-top: 1px dashed #eee;
      border-bottom: 1px dashed #eee;
      font-weight: 400;
      font-size: 12px;
      color: #B47E01;
      line-height: 14px;
    }

    .list-content {
      max-height: 30vh;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      
      .list-item {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 12px 15px;
        font-weight: 400;
        font-size: 9px;
        color: #1B1B1B;
        line-height: 12px;
        border-bottom: 1px dashed #f5f5f5;

        &:last-child {
          border-bottom: none;
        }
      }

      .loading-text,
      .finished-text {
        text-align: center;
        padding: 10px 0;
        color: #999;
        font-size: 12px;
      }
    }

    .col {
      text-align: center;
    }
  }
}
</style>