<script setup>
import { ref, computed } from 'vue'
import { getAgentRevenue } from '@/api/apis'

// 日期选项映射
const dateRangeMap = {
  today: 'today',
  week: 'last7d',
  month: 'last30d'
}

// 直推报告数据
const promoteDateOptions = [
  { label: '今日', value: 'today' },
  { label: '近7天', value: 'week' },
  { label: '近1月', value: 'month' }
]
const selectedPromoteDate = ref('today')

// 活跃下级数据
const activeDateOptions = [
  { label: '今日', value: 'today' },
  { label: '近7天', value: 'week' },
  { label: '近1月', value: 'month' }
]
const selectedActiveDate = ref('today')

const data = ref(null)

// 计算当前直推数据
const currentPromoteData = computed(() => {
  const range = dateRangeMap[selectedPromoteDate.value]
  return data.value?.direct_push?.[range] || { commission: 0, report: 0 }
})

// 计算当前活跃数据
const currentActiveData = computed(() => {
  const range = dateRangeMap[selectedActiveDate.value]
  return data.value?.active_reward?.[range] || {
    active_reward: 0,
    sub_promote_reward: 0,
    sub_upgrade_reward: 0,
    sub_withdraw_reward: 0
  }
})

const getData = async () => {
  try {
    const res = await getAgentRevenue()
    if (res.code === 200) {
      data.value = res.data
    }
  } catch (error) {
    console.error(error)
  }
}

onBeforeMount(() => {
  if (uni.getStorageSync('token')) {
    getData()
  }
})

// 路由跳转
function goToPromoteDetail() {
  uni.navigateTo({
    url: '/pages/promoteDetails'
  })
}

function goToActiveDetail() {
  uni.navigateTo({
    url: '/pages/rewardsDetails'
  })
}

function toWithdraw() {
  uni.navigateTo({
    url: '/pages/withdraw'
  })
}

function toWithdrawDetails() {
  uni.navigateTo({
    url: '/pages/withdrawDetails'
  })
}
</script>

<template>
  <view class="safe-area-top p-4 min-h-screen">

    <!-- 资产卡片 -->
    <view class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-blue-50/70 to-blue-100/50 p-6">
      <view class="flex justify-between items-center mb-3">
        <view class="flex items-center">
          <wd-icon name="balance-pay" class="text-blue-500 text-xl mr-2" />
          <text class="text-lg font-bold text-gray-800">余额</text>
        </view>
        <text class="text-3xl text-blue-600 font-bold">¥ {{ (data?.balance || 0).toFixed(2) }}</text>
      </view>
      <view class="text-sm text-gray-500 mb-2">累计收益：¥ {{ (data?.total_earnings || 0).toFixed(2) }}</view>
      <view class="text-sm text-gray-500 mb-6">冻结余额：¥ {{ (data?.frozen_balance || 0).toFixed(2) }}</view>
      <view class="grid grid-cols-2 gap-3">
        <view @click="toWithdraw"
          class="bg-gradient-to-r from-blue-500 to-blue-400 text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center">
          <wd-icon name="gold-coin" class="mr-1" />
          <text>提现</text>
        </view>
        <view @click="toWithdrawDetails"
          class="bg-white/90 text-gray-600 border border-gray-200/50 rounded-full py-2 px-4 shadow-sm flex items-center justify-center">
          <wd-icon name="notes" class="mr-1" />
          <text>提现记录</text>
        </view>
      </view>
    </view>

    <!-- 直推报告收益 -->
    <view class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-blue-50/40 to-cyan-50/50 p-6">
      <view class="flex justify-between items-center mb-4">
        <view class="flex items-center">
          <wd-icon name="balance-list" class="text-blue-400 text-xl mr-2" />
          <text class="text-lg font-bold text-gray-800">直推报告收益</text>
        </view>
        <view class="text-right">
          <text class="text-2xl text-blue-600 font-bold">¥ {{ (data?.direct_push?.total_commission || 0).toFixed(2)
            }}</text>
          <view class="text-sm text-gray-500 mt-1">有效报告 {{ data?.direct_push?.total_report || 0 }} 份</view>
        </view>
      </view>

      <!-- 日期选择 -->
      <view class="grid grid-cols-3 gap-2 mb-6">
        <view v-for="item in promoteDateOptions" :key="item.value" @click="selectedPromoteDate = item.value" :class="[
          'rounded-full transition-all py-1 px-4 text-sm',
          selectedPromoteDate === item.value
            ? 'bg-blue-500 text-white shadow-md'
            : 'bg-white/90 text-gray-600 border border-gray-200/50'
        ]">
          {{ item.label }}
        </view>
      </view>

      <view class="grid grid-cols-2 gap-4 mb-6">
        <view class="bg-blue-50/60 p-3 rounded-lg backdrop-blur-sm">
          <view class="flex items-center text-sm text-gray-500">
            <wd-icon name="gold-coin" class="mr-1" />
            <text>本日收益</text>
          </view>
          <text class="text-xl text-blue-600 font-bold mt-1">¥ {{ currentPromoteData.commission?.toFixed(2) || '0.00'
            }}</text>
        </view>
        <view class="bg-blue-50/60 p-3 rounded-lg backdrop-blur-sm">
          <view class="flex items-center text-sm text-gray-500">
            <wd-icon name="description" class="mr-1" />
            <text>有效报告</text>
          </view>
          <text class="text-xl text-blue-600 font-bold mt-1">{{ currentPromoteData.report || 0 }} 份</text>
        </view>
      </view>

      <view class="flex items-center justify-between text-blue-500 text-sm font-semibold" @click="goToPromoteDetail">
        <text>查看收益明细</text>
        <text class="text-lg">→</text>
      </view>
    </view>

    <!-- 活跃下级奖励 -->
    <view class="rounded-xl shadow-lg bg-gradient-to-r from-green-50/40 to-cyan-50/30 p-6">
      <view class="flex justify-between items-center mb-4">
        <view class="flex items-center">
          <wd-icon name="friends" class="text-green-500 text-xl mr-2" />
          <text class="text-lg font-bold text-gray-800">活跃下级奖励</text>
        </view>
        <view class="text-right">
          <text class="text-2xl text-green-600 font-bold">¥ {{ (data?.active_reward?.total_reward || 0).toFixed(2)
            }}</text>
          <view class="text-sm text-gray-500 mt-1">活跃下级 0 位</view>
        </view>
      </view>

      <!-- 日期选择 -->
      <view class="grid grid-cols-3 gap-2 mb-6">
        <view v-for="item in activeDateOptions" :key="item.value" @click="selectedActiveDate = item.value" :class="[
          'rounded-full transition-all py-1 px-4 text-sm',
          selectedActiveDate === item.value
            ? 'bg-green-500 text-white shadow-md'
            : 'bg-white/90 text-gray-600 border border-gray-200/50'
        ]">
          {{ item.label }}
        </view>
      </view>

      <view class="grid grid-cols-2 gap-2 mb-6">
        <view class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
          <view class="flex items-center text-sm text-gray-500">
            <wd-icon name="medal" class="mr-1" />
            <text>本日奖励</text>
          </view>
          <text class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.active_reward || 0).toFixed(2)
            }}</text>
        </view>
        <view class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
          <view class="flex items-center text-sm text-gray-500">
            <wd-icon name="discount" class="mr-1" />
            <text>下级推广奖励</text>
          </view>
          <text class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.sub_promote_reward ||
            0).toFixed(2) }}</text>
        </view>
        <view class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
          <view class="flex items-center text-sm text-gray-500">
            <wd-icon name="contact" class="mr-1" />
            <text>新增活跃奖励</text>
          </view>
          <text class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.sub_upgrade_reward ||
            0).toFixed(2) }}</text>
        </view>
        <view class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
          <view class="flex items-center text-sm text-gray-500">
            <wd-icon name="fire" class="mr-1" />
            <text>下级转化奖励</text>
          </view>
          <text class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.sub_withdraw_reward ||
            0).toFixed(2) }}</text>
        </view>
      </view>

      <view class="flex items-center justify-between text-green-500 text-sm font-semibold" @click="goToActiveDetail">
        <text>查看奖励明细</text>
        <text class="text-lg">→</text>
      </view>
    </view>
  </view>
</template>

<style>
button {
  transition: all 0.2s ease;
}

button:hover {
  transform: translateY(-1px);
}
</style>

<route lang="json">{
  "layout": "home"
}</route>
