<template>
  <view class="page">
    <NavBar title="品类销售" :showBack="true" />
    <scroll-view class="list-scroll" scroll-y v-if="data">
      <view class="section"><text class="section-title">品类占比</text></view>
      <view class="card-set">
        <view class="card" v-for="item in data.categories" :key="item.name">
          <view class="card-head">
            <text class="card-name">{{ item.name }}</text>
            <text class="card-amount">{{ formatMoney(item.amount || 0) }}</text>
          </view>
          <view class="progress-bar"><view class="progress-fill" :style="{ width: (item.ratio || 0) + '%' }"></view></view>
          <text class="card-ratio">{{ (item.ratio || 0).toFixed(1) }}%</text>
        </view>
      </view>
      <view class="end-tip"><text>-- 数据截至最近30天 --</text></view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import { get } from '@/utils/request';
import { formatMoney, formatDate } from '@/utils/common';
const data = ref<any>(null);
const loadData = async () => {
  try {
    const end = formatDate(new Date());
    const start = formatDate(new Date(Date.now()-30*86400000));
    data.value = await get('/statistics/category/overview', { startDate: start, endDate: end });
  } catch { }
};
onMounted(() => loadData());
</script>

<style lang="scss" scoped>
.page { height: 100vh; background: $bg-color-page; display: flex; flex-direction: column; }
.list-scroll { flex: 1; height: 0; }
.section { background: $bg-color-card; margin-bottom: $spacing-2; padding: $spacing-3 $spacing-4; }
.section-title { font-size: 28rpx; font-weight: 600; color: $text-color-primary; }
.card-set { padding: 0 24rpx 20rpx; display: flex; flex-direction: column; gap: 16rpx; }
.card { background: $bg-color-card; border-radius: $radius-md; padding: 20rpx 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
.card-name { font-size: 28rpx; font-weight: 500; color: $text-color-primary; }
.card-amount { font-size: 28rpx; font-weight: 600; color: $primary-color-dark; }
.progress-bar { height: 12rpx; background: $bg-color-page; border-radius: 6rpx; overflow: hidden; margin-bottom: 6rpx; }
.progress-fill { height: 100%; background: $primary-color; border-radius: 6rpx; }
.card-ratio { font-size: 22rpx; color: $text-color-muted; }
.end-tip { text-align: center; padding: 36rpx; font-size: 24rpx; color: $text-color-placeholder; }
</style>
