<script setup>
definePage({
  layout: 'PageLayout',
  style: {
    navigationBarTitleText: '推广查询记录',
    navigationStyle: 'default',
  },
})

import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useAgentStore } from '@/stores/agentStore'
import { getPromotionQueryList } from '@/api/agent'

const agentStore = useAgentStore()
const { isAgent } = storeToRefs(agentStore)

const list = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const hasMore = ref(true)

async function loadList(isRefresh = false) {
  if (!isAgent.value) return
  if (loading.value) return
  const nextPage = isRefresh ? 1 : page.value
  if (!isRefresh && !hasMore.value) return
  loading.value = true
  try {
    const { data, error } = await getPromotionQueryList({ page: nextPage, page_size: pageSize.value })
    if (data.value?.code === 200 && !error.value) {
      const res = data.value.data
      total.value = res?.total ?? 0
      const items = res?.list || []
      if (nextPage === 1) {
        list.value = items
        page.value = 1
      } else {
        list.value = list.value.concat(items)
      }
      page.value = nextPage
      hasMore.value = list.value.length < total.value
    }
  } finally {
    loading.value = false
  }
}

function loadMore() {
  if (!hasMore.value || loading.value) return
  page.value += 1
  loadList(false)
}

function queryStateText(state) {
  const map = { pending: '待查询', processing: '查询中', success: '已完成', failed: '失败' }
  return map[state] || state || '—'
}

onMounted(() => {
  if (isAgent.value) loadList(true)
})
</script>

<template>
  <view class="p-4 min-h-screen bg-gray-50">
    <view v-if="!isAgent" class="rounded-xl bg-white shadow p-6 text-center">
      <view class="text-gray-500 text-sm">请先注册成为代理</view>
    </view>
    <template v-else>
      <view class="rounded-xl bg-white shadow overflow-hidden">
        <view class="p-4 border-b border-gray-100">
          <view class="text-base font-semibold text-gray-800">推广查询记录</view>
          <view class="text-xs text-gray-500 mt-1">通过您推广链接产生的订单与报告</view>
        </view>
        <view v-if="loading && list.length === 0" class="p-6">
          <wd-skeleton :row="4" />
        </view>
        <view v-else-if="list.length === 0" class="p-8 text-center text-gray-500 text-sm">
          暂无推广查询记录
        </view>
        <view v-else class="divide-y divide-gray-100">
          <view
            v-for="item in list"
            :key="item.id"
            class="p-4"
          >
            <view class="flex items-start justify-between gap-2">
              <view class="flex-1 min-w-0">
                <view class="font-medium text-gray-800">{{ item.product_name || '推广订单' }}</view>
                <view class="text-xs text-gray-500 mt-1">{{ item.create_time }}</view>
                <view v-if="item.params && Object.keys(item.params).length" class="text-xs text-gray-500 mt-1 truncate">
                  {{ JSON.stringify(item.params) }}
                </view>
              </view>
              <view class="text-right shrink-0">
                <view class="text-base font-semibold text-primary">¥ {{ (item.price || 0).toFixed(2) }}</view>
                <view class="text-xs text-gray-500 mt-0.5">{{ queryStateText(item.query_state) }}</view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="hasMore && list.length > 0" class="p-4 text-center">
          <view
            class="text-sm text-primary"
            @click="loadMore"
          >
            {{ loading ? '加载中...' : '加载更多' }}
          </view>
        </view>
      </view>
    </template>
  </view>
</template>
