<template>
  <view class="page">
    <NavBar title="利润报表" :showBack="true" />
    <scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore">
      <view class="card-set">
        <view class="card" v-for="item in list" :key="item.shopId">
          <view class="card-head">
            <view class="card-left">
              <text class="card-name">{{ item.shopName }}</text>
              <text class="card-meta">收入 {{ formatMoney(item.revenue || 0) }}</text>
              <text class="card-meta">成本 {{ formatMoney(item.cost || 0) }}</text>
            </view>
            <text class="card-profit" :class="(item.profit || 0) >= 0 ? 'positive' : 'negative'">{{ formatMoney(item.profit || 0) }}</text>
          </view>
          <view class="card-foot">
            <text class="foot-stat">毛利率 {{ (item.profitRate || 0).toFixed(1) }}%</text>
          </view>
        </view>
      </view>
      <view class="load-tip" v-if="loading"><view class="dot-row"><view class="pulse-dot"></view><view class="pulse-dot"></view><view class="pulse-dot"></view></view></view>
      <view class="end-tip" v-if="!hasMore && list.length > 0"><text>没有更多了</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 list = ref<any[]>([]); const loading = ref(false); const hasMore = ref(true); const page = ref(1);
const loadData = async () => {
  loading.value = true;
  try {
    const end = formatDate(new Date()); const start = formatDate(new Date(Date.now()-30*86400000));
    const res = await get('/statistics/profit/list', { page: page.value, pageSize: 20, startDate: start, endDate: end, sortBy: 'profit', sortOrder: 'desc' });
    if (page.value === 1) list.value = res.list || []; else list.value = [...list.value, ...(res.list || [])];
    hasMore.value = list.value.length < (res.total || 0);
  } catch { }
  loading.value = false;
};
const loadMore = () => { if (loading.value || !hasMore.value) return; page.value++; loadData(); };
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; }
.card-set { padding: 20rpx 24rpx; 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: flex-start; margin-bottom: 10rpx; }
.card-left { display: flex; flex-direction: column; }
.card-name { font-size: 28rpx; font-weight: 600; color: $text-color-primary; margin-bottom: 4rpx; }
.card-meta { font-size: 22rpx; color: $text-color-muted; line-height: 1.5; }
.card-profit { font-size: 32rpx; font-weight: 700; white-space: nowrap; }
.card-profit.positive { color: $success-color; } .card-profit.negative { color: $error-color; }
.card-foot { margin-top: 8rpx; }
.foot-stat { font-size: 22rpx; color: $text-color-muted; }
.load-tip { display: flex; justify-content: center; padding: 36rpx 0; }
.dot-row { display: flex; gap: 8rpx; }
.pulse-dot { width: 9rpx; height: 9rpx; background: $text-color-placeholder; border-radius: 50%; animation: pulse 1.2s ease-in-out infinite; }
.pulse-dot:nth-child(2) { animation-delay: 0.2s; } .pulse-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%,80%,100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.end-tip { text-align: center; padding: 36rpx; font-size: 24rpx; color: $text-color-muted; }
</style>
