<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 收益列表 -->
    <uni-list :loading="loading" :loadmore="loadMoreStatus" @loadmore="onLoadMore">
      <EmptyState v-if="!loading && list.length === 0" text="暂无直推报告" />

      <view v-for="(item, index) in list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
        <view class="flex justify-between items-center mb-2">
          <text class="text-gray-500 text-sm">{{ item.create_time || '-' }}</text>
          <text class="text-green-500 font-bold">+{{ item.amount.toFixed(2) }}</text>
        </view>
        <view class="flex items-center">
          <text class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
            :class="getReportTypeStyle(item.product_name)">
            <text class="w-2 h-2 rounded-full mr-1 inline-block" :class="getDotColor(item.product_name)"></text>
            {{ item.product_name }}
          </text>
        </view>
      </view>

      <!-- 加载更多/加载完成提示 -->
      <uni-load-more :status="loadMoreStatus" />
    </uni-list>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getAgentCommission } from '@/apis/agent'

// 颜色配置（根据产品名称映射）
const typeColors = {
  '老板企业报告': { bg: 'bg-blue-100', text: 'text-blue-800', dot: 'bg-blue-500' },
  '人事背调': { bg: 'bg-green-100', text: 'text-green-800', dot: 'bg-green-500' },
  '家政风险': { bg: 'bg-purple-100', text: 'text-purple-800', dot: 'bg-purple-500' },
  '婚恋风险': { bg: 'bg-pink-100', text: 'text-pink-800', dot: 'bg-pink-500' },
  '贷前背调': { bg: 'bg-orange-100', text: 'text-orange-800', dot: 'bg-orange-500' },
  '租赁风险': { bg: 'bg-indigo-100', text: 'text-indigo-800', dot: 'bg-indigo-500' },
  '个人风险': { bg: 'bg-red-100', text: 'text-red-800', dot: 'bg-red-500' },
  // 默认类型
  'default': { bg: 'bg-gray-100', text: 'text-gray-800', dot: 'bg-gray-500' }
}

const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const list = ref([])
const loading = ref(false)
const loadMoreStatus = ref('more') // 'more'|'loading'|'noMore'

// 获取颜色样式
const getReportTypeStyle = (name) => {
  const color = typeColors[name] || typeColors.default
  return `${color.bg} ${color.text}`
}

// 获取小圆点颜色
const getDotColor = (name) => {
  return (typeColors[name] || typeColors.default).dot
}

// 加载更多数据
const onLoadMore = async () => {
  if (loadMoreStatus.value === 'noMore') return

  page.value++
  await getData()
}

// 获取数据
const getData = async () => {
  try {
    loading.value = true
    loadMoreStatus.value = 'loading'

    const res = await getAgentCommission({
      page: page.value,
      page_size: pageSize.value
    })

    if (res.code === 200) {
      // 首次加载
      if (page.value === 1) {
        list.value = res.data.list
        total.value = res.data.total
      } else {
        // 分页加载
        list.value.push(...res.data.list)
      }

      // 判断是否加载完成
      if (list.value.length >= res.data.total || res.data.list.length < pageSize.value) {
        loadMoreStatus.value = 'noMore'
      } else {
        loadMoreStatus.value = 'more'
      }
    } else {
      uni.showToast({
        title: res.msg || '加载失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 页面加载
onMounted(() => {
  getData()
})

// 页面下拉刷新
const onPullDownRefresh = () => {
  page.value = 1
  loadMoreStatus.value = 'more'
  getData().then(() => {
    uni.stopPullDownRefresh()
  })
}

// 导出页面生命周期方法
defineExpose({
  onPullDownRefresh
})
</script>

<route type="page" lang="json">
{
  "layout": "page",
  "title": "直推报告",
  "agent": true,
  "auth": true
}
</route>
