<script setup lang="ts">
import type { DashboardBreakdownItem } from '@/types/api'

defineProps<{
  data: DashboardBreakdownItem[]
  loading: boolean
  dimension: 'company' | 'platform' | 'store'
  dataType: string | undefined
}>()

const emit = defineEmits<{
  'update:dimension': ['company' | 'platform' | 'store']
  'update:dataType': [string | undefined]
  'update:dateRange': [[string, string] | null]
}>()

const dimensionOptions = [
  { label: '公司', value: 'company' },
  { label: '平台', value: 'platform' },
  { label: '店铺', value: 'store' },
]

const dataTypeOptions = [
  { label: '全部', value: '' },
  { label: '订单', value: 'order' },
  { label: '产品', value: 'product' },
  { label: '退款', value: 'refund' },
  { label: '库存', value: 'inventory' },
]

const columns = computed(() => [
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: '成功数', dataIndex: 'success', key: 'success', sorter: (a: DashboardBreakdownItem, b: DashboardBreakdownItem) => a.success - b.success },
  { title: '失败数', dataIndex: 'failed', key: 'failed', sorter: (a: DashboardBreakdownItem, b: DashboardBreakdownItem) => a.failed - b.failed },
  { title: '合计', key: 'total', sorter: (a: DashboardBreakdownItem, b: DashboardBreakdownItem) => (a.success + a.failed) - (b.success + b.failed) },
  { title: '失败率', key: 'failRate', sorter: (a: DashboardBreakdownItem, b: DashboardBreakdownItem) => failRate(a) - failRate(b) },
])

function failRate(row: DashboardBreakdownItem): number {
  const total = row.success + row.failed
  return total === 0 ? 0 : row.failed / total
}

function formatPercent(row: DashboardBreakdownItem): string {
  return (failRate(row) * 100).toFixed(1) + '%'
}

function handleDimensionChange(e: unknown) {
  const val = (e as { target: { value?: string } }).target.value as 'company' | 'platform' | 'store'
  emit('update:dimension', val)
}

function handleDataTypeChange(val: unknown) {
  emit('update:dataType', (val as string) || undefined)
}

function handleDateRangeChange(_dates: unknown, dateStrings: [string, string]) {
  if (dateStrings[0] && dateStrings[1]) {
    emit('update:dateRange', dateStrings)
  } else {
    emit('update:dateRange', null)
  }
}
</script>

<template>
  <a-card title="分维度统计" class="mb-4">
    <template #extra>
      <a-space>
        <a-radio-group
          :value="dimension"
          size="small"
          @change="handleDimensionChange"
        >
          <a-radio-button v-for="opt in dimensionOptions" :key="opt.value" :value="opt.value">
            {{ opt.label }}
          </a-radio-button>
        </a-radio-group>
        <a-range-picker
          size="small"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateRangeChange"
        />
        <a-select
          :value="dataType ?? ''"
          :options="dataTypeOptions"
          style="width: 100px"
          size="small"
          @change="handleDataTypeChange"
        />
      </a-space>
    </template>
    <a-table
      :columns="columns"
      :data-source="data"
      :loading="loading"
      :pagination="false"
      row-key="id"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'failed'">
          <span :class="{ 'text-red-500 font-bold': (record as DashboardBreakdownItem).failed > 0 }">
            {{ (record as DashboardBreakdownItem).failed }}
          </span>
        </template>
        <template v-else-if="column.key === 'total'">
          {{ (record as DashboardBreakdownItem).success + (record as DashboardBreakdownItem).failed }}
        </template>
        <template v-else-if="column.key === 'failRate'">
          <span :class="{ 'text-red-500': failRate(record as DashboardBreakdownItem) > 0 }">
            {{ formatPercent(record as DashboardBreakdownItem) }}
          </span>
        </template>
      </template>
      <template #emptyText>
        <a-empty description="暂无统计数据" />
      </template>
    </a-table>
  </a-card>
</template>
