<script lang="ts" setup>
/**
 * 门店录入摘要：录入总数/环比/待审核/有效营业额，整卡可点跳完整业务员看板
 * 复用 store-input/dashboard 接口，仅取 summary（趋势图等留在完整看板页）
 */
import type { SalespersonDashboardResult } from '#/views/system/salesperson-dashboard/api';

import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { getSalespersonDashboardApi } from '#/views/system/salesperson-dashboard/api';

import KpiCard from './KpiCard.vue';
import StatChip from './StatChip.vue';

interface Props {
  title: string;
}
defineProps<Props>();

const router = useRouter();
const data = ref<null | SalespersonDashboardResult>(null);
const loading = ref(true);
const error = ref(false);

/** 环比文案：正数带 +，空值显示 — */
const momText = computed(() => {
  const rate = data.value?.summary?.input_mom_rate;
  if (rate === null || rate === undefined) return '—';
  return `${rate > 0 ? '+' : ''}${rate}%`;
});

/**
 * 拉取近 7 天录入摘要；失败进入错误态可重试（不再静默消失）
 */
async function fetchSummary() {
  loading.value = true;
  error.value = false;
  try {
    data.value = await getSalespersonDashboardApi({ period: 'last7days' });
  } catch {
    error.value = true;
  } finally {
    loading.value = false;
  }
}

/**
 * 跳转完整业务员看板
 */
function goDashboard() {
  router.push('/system/salesperson-dashboard').catch(() => {});
}

onMounted(fetchSummary);
</script>

<template>
  <KpiCard
    :title="title"
    :loading="loading"
    :error="error"
    subtitle="近7天"
    @refresh="fetchSummary"
  >
    <template v-if="data">
      <StatChip
        :value="data.summary.input_total"
        icon="lucide:clipboard-list"
        label="录入总数"
        @click="goDashboard"
      />
      <StatChip
        :value="momText"
        icon="lucide:trending-up"
        label="录入环比"
        @click="goDashboard"
      />
      <StatChip
        :highlight="data.summary.pending_count > 0"
        :value="data.summary.pending_count"
        icon="lucide:hourglass"
        label="待审核"
        @click="goDashboard"
      />
      <StatChip
        :value="data.summary.valid_amount_total"
        icon="lucide:banknote"
        label="有效营业额"
        @click="goDashboard"
      />
    </template>
  </KpiCard>
</template>
