王明 / Food-Labeling-Management-Platform

<template>
  <view class="page">
    <view class="header-hero" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="top-bar">
        <view class="top-left" @click="goBack">
          <AppIcon name="chevronLeft" size="sm" color="white" />
        </view>
        <view class="top-center">
          <text class="page-title">Label Report</text>
          <LocationPicker />
        </view>
        <view class="top-right" @click="isMenuOpen = true">
          <AppIcon name="menu" size="sm" color="white" />
        </view>
      </view>
    </view>

    <view class="period-bar">
      <view
        v-for="p in periodOptions"
        :key="p.value"
        class="period-btn"
        :class="{ active: period === p.value }"
        @click="selectPeriod(p.value)"
      >
        <text class="period-text">{{ p.label }}</text>
      </view>
    </view>

    <view v-if="period === 'custom'" class="custom-date-bar">
      <view class="date-field">
        <text class="date-label">Start</text>
        <picker mode="date" :value="customStart" :end="customEnd || '2099-12-31'" @change="onStartChange">
          <view class="date-picker-btn">{{ customStart || 'Select' }}</view>
        </picker>
      </view>
      <view class="date-field">
        <text class="date-label">End</text>
        <picker mode="date" :value="customEnd" :start="customStart || '2000-01-01'" @change="onEndChange">
          <view class="date-picker-btn">{{ customEnd || 'Select' }}</view>
        </picker>
      </view>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- 指标卡 -->
      <view class="metrics-grid">
        <view class="metric-card">
          <text class="metric-label">Total Labels Printed</text>
          <text class="metric-value">2,543</text>
          <text class="metric-trend up">+20.1% from last month</text>
        </view>
        <view class="metric-card">
          <text class="metric-label">Most Printed Category</text>
          <text class="metric-value">Dairy</text>
          <text class="metric-trend">450 labels generated</text>
        </view>
        <view class="metric-card">
          <text class="metric-label">Top Product</text>
          <text class="metric-value">Whole Milk</text>
          <text class="metric-trend">182 labels generated</text>
        </view>
        <view class="metric-card">
          <text class="metric-label">Avg. Daily Prints</text>
          <text class="metric-value">85</text>
          <text class="metric-trend up">+12% from last week</text>
        </view>
      </view>

      <!-- 柱状图 -->
      <view class="section">
        <text class="section-title">Labels by Category</text>
        <text class="section-desc">Distribution of printed labels across product categories.</text>
        <view class="bar-chart">
          <view v-for="item in categoryData" :key="item.name" class="bar-row">
            <text class="bar-label">{{ item.name }}</text>
            <view class="bar-track">
              <view class="bar-fill" :style="{ width: item.percent + '%' }" />
            </view>
            <text class="bar-value">{{ item.value }}</text>
          </view>
        </view>
      </view>

      <!-- 走势图 -->
      <view class="section">
        <text class="section-title">Print Volume Trends</text>
        <text class="section-desc">Daily label printing volume for the last 7 days.</text>
        <view class="line-chart">
          <view class="chart-bars">
            <view v-for="(pct, i) in trendData" :key="i" class="day-bar-wrap">
              <view class="day-bar" :style="{ height: pct + '%' }" />
            </view>
          </view>
          <view class="chart-labels">
            <text v-for="d in dayLabels" :key="d" class="day-label">{{ d }}</text>
          </view>
        </view>
      </view>

      <!-- 最常用产品列表 -->
      <view class="section">
        <text class="section-title">Most Used Products</text>
        <view class="product-table">
          <view class="product-row header">
            <text class="col-name">Product Name</text>
            <text class="col-cat">Category</text>
            <text class="col-total">Total Printed</text>
            <text class="col-pct">Usage %</text>
          </view>
          <view v-for="p in topProducts" :key="p.name" class="product-row">
            <text class="col-name">{{ p.name }}</text>
            <text class="col-cat">{{ p.category }}</text>
            <text class="col-total">{{ p.total }}</text>
            <text class="col-pct">{{ p.usage }}%</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <SideMenu v-model="isMenuOpen" />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import AppIcon from '../../components/AppIcon.vue'
import SideMenu from '../../components/SideMenu.vue'
import LocationPicker from '../../components/LocationPicker.vue'
import { getStatusBarHeight } from '../../utils/statusBar'

const statusBarHeight = getStatusBarHeight()
const isMenuOpen = ref(false)
const period = ref('7d')
const customStart = ref('')
const customEnd = ref('')

const periodOptions = [
  { value: '7d', label: 'Last 7 Days' },
  { value: '30d', label: 'Last 30 Days' },
  { value: '90d', label: 'Last 90 Days' },
  { value: 'custom', label: 'Custom' },
]

function selectPeriod(val: string) {
  period.value = val
  if (val === 'custom') {
    const today = formatDate(new Date())
    const weekAgo = new Date()
    weekAgo.setDate(weekAgo.getDate() - 7)
    customStart.value = customStart.value || formatDate(weekAgo)
    customEnd.value = customEnd.value || today
  }
}

function formatDate(d: Date): string {
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
}

function onStartChange(e: any) {
  customStart.value = e.detail.value
}

function onEndChange(e: any) {
  customEnd.value = e.detail.value
}

const categoryDataRaw = [
  { name: 'Dairy', value: 450 },
  { name: 'Meat', value: 380 },
  { name: 'Bakery', value: 320 },
  { name: 'Deli', value: 280 },
  { name: 'Produce', value: 220 },
  { name: 'Beverage', value: 180 },
]

const categoryData = computed(() => {
  const max = Math.max(...categoryDataRaw.map(d => d.value))
  return categoryDataRaw.map(d => ({ ...d, percent: (d.value / max) * 100 }))
})

const trendDataRaw = [72, 85, 78, 92, 88, 95, 90]
const trendData = computed(() => {
  const max = Math.max(...trendDataRaw)
  return trendDataRaw.map(v => (v / max) * 100)
})

const dayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

const topProducts = ref([
  { name: 'Whole Milk', category: 'Dairy', total: 182, usage: '7.2' },
  { name: 'Ground Beef 80/20', category: 'Meat', total: 145, usage: '5.7' },
  { name: 'Chicken Breast', category: 'Meat', total: 132, usage: '5.2' },
  { name: 'Sliced Ham', category: 'Deli', total: 98, usage: '3.8' },
])

const goBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack()
  } else {
    uni.redirectTo({ url: '/pages/index/index' })
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
}

.header-hero {
  background: linear-gradient(135deg, #1F3A8A, #142a6c);
  padding: 16rpx 32rpx 24rpx;
}

.top-bar {
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-left, .top-right {
  width: 64rpx;
  height: 64rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #fff;
}

.period-bar {
  display: flex;
  gap: 12rpx;
  padding: 16rpx 28rpx;
  background: #fff;
  border-bottom: 1rpx solid #e5e7eb;
}

.period-btn {
  flex: 1;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  background: #f3f4f6;
  text-align: center;
  transition: all 0.2s;
}

.period-btn.active {
  background: linear-gradient(135deg, #1F3A8A, #1447E6);
}

.period-btn.active .period-text {
  color: #fff;
}

.period-text {
  font-size: 26rpx;
  font-weight: 500;
  color: #6b7280;
}

.custom-date-bar {
  display: flex;
  gap: 24rpx;
  padding: 20rpx 28rpx;
  background: #fff;
  border-bottom: 1rpx solid #e5e7eb;
}

.date-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.date-label {
  font-size: 24rpx;
  color: #6b7280;
  font-weight: 500;
}

.date-picker-btn {
  padding: 20rpx 24rpx;
  background: #f3f4f6;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #111827;
  border: 2rpx solid #e5e7eb;
}

.content {
  flex: 1;
  padding: 24rpx 28rpx 40rpx;
  box-sizing: border-box;
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 32rpx;
}

.metric-card {
  background: #fff;
  padding: 28rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #e5e7eb;
}

.metric-label {
  font-size: 24rpx;
  color: #6b7280;
  display: block;
  margin-bottom: 12rpx;
  line-height: 1.5;
}

.metric-value {
  font-size: 38rpx;
  font-weight: 700;
  color: #111827;
  display: block;
  margin-bottom: 8rpx;
  letter-spacing: -0.02em;
}

.metric-trend {
  font-size: 24rpx;
  color: #6b7280;
}

.metric-trend.up {
  color: #16a34a;
  font-weight: 500;
}

.section {
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
  display: block;
  margin-bottom: 8rpx;
}

.section-desc {
  font-size: 26rpx;
  color: #6b7280;
  display: block;
  margin-bottom: 24rpx;
  line-height: 1.5;
}

.bar-chart {
  background: #fff;
  padding: 28rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #e5e7eb;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.bar-row:last-child {
  margin-bottom: 0;
}

.bar-label {
  width: 120rpx;
  font-size: 26rpx;
  color: #374151;
  flex-shrink: 0;
  font-weight: 500;
}

.bar-track {
  flex: 1;
  height: 36rpx;
  background: #f3f4f6;
  border-radius: 10rpx;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1F3A8A, #1447E6);
  border-radius: 10rpx;
  transition: width 0.3s ease;
}

.bar-value {
  width: 88rpx;
  text-align: right;
  font-size: 26rpx;
  font-weight: 600;
  color: #111827;
}

.line-chart {
  background: #fff;
  padding: 28rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #e5e7eb;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12rpx;
  height: 220rpx;
  margin-bottom: 20rpx;
}

.day-bar-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.day-bar {
  width: 100%;
  max-width: 52rpx;
  min-height: 12rpx;
  background: linear-gradient(180deg, #1F3A8A, #1447E6);
  border-radius: 10rpx 10rpx 0 0;
  transition: height 0.3s ease;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  gap: 12rpx;
}

.day-label {
  flex: 1;
  padding: 0 4rpx;
  font-size: 24rpx;
  color: #6b7280;
  text-align: center;
}

.product-table {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #e5e7eb;
}

.product-row {
  display: flex;
  padding: 24rpx 28rpx;
  border-bottom: 1rpx solid #e5e7eb;
  font-size: 28rpx;
}

.product-row:last-child {
  border-bottom: none;
}

.product-row.header {
  background: #fafbfc;
  font-weight: 600;
  color: #6b7280;
  font-size: 24rpx;
}

.col-name { flex: 1; min-width: 0; text-align: left; }
.col-cat { flex: 0 0 140rpx; text-align: left; }
.col-total { flex: 0 0 120rpx; text-align: left; }
.col-pct { flex: 0 0 88rpx; text-align: left; }

.product-row:not(.header) .col-name { color: #111827; font-weight: 500; }
.product-row:not(.header) .col-cat { color: #6b7280; }
.product-row:not(.header) .col-total { color: #111827; }
.product-row:not(.header) .col-pct { color: #1F3A8A; font-weight: 600; }
</style>