<template>
  <view class="page-container">
    <scroll-view class="page-body" scroll-y>
      <view class="filter-bar">
        <input class="filter-input" v-model="startDate" placeholder="起始日期" />
        <input class="filter-input" v-model="endDate" placeholder="结束日期" />
        <button class="filter-btn" @click="handleQuery">查询</button>
      </view>
      <view class="stat-cards">
        <view class="stat-card">
          <text class="stat-label">入库总重量</text>
          <view class="stat-number">38.5 <text class="stat-unit">KG</text></view>
        </view>
        <view class="stat-card">
          <text class="stat-label">入库总数量</text>
          <view class="stat-number">26 <text class="stat-unit">件</text></view>
        </view>
        <view class="stat-card">
          <text class="stat-label">贮存地点</text>
          <view class="stat-number">2 <text class="stat-unit">处</text></view>
        </view>
        <view class="stat-card">
          <text class="stat-label">危废种类</text>
          <view class="stat-number">4 <text class="stat-unit">类</text></view>
        </view>
      </view>
      <view class="chart-title">各类危废重量分布</view>
      <view class="bar-chart">
        <view class="bar-row">
          <text class="bar-label">感染性</text>
          <view class="bar-track"><view class="bar-fill red" style="width:75%;">18.5 KG</view></view>
        </view>
        <view class="bar-row">
          <text class="bar-label">损伤性</text>
          <view class="bar-track"><view class="bar-fill orange" style="width:45%;">10.2 KG</view></view>
        </view>
        <view class="bar-row">
          <text class="bar-label">病理性</text>
          <view class="bar-track"><view class="bar-fill blue" style="width:20%;">5.3 KG</view></view>
        </view>
        <view class="bar-row">
          <text class="bar-label">药物性</text>
          <view class="bar-track"><view class="bar-fill green" style="width:18%;">4.5 KG</view></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { api } from '@/api/index'
import { getMonthStartDate, getDate } from '@/utils/common.js'
export default {
  data() {
    return {
      startDate: getMonthStartDate(),
      endDate: getDate()
    }
  },
  methods: {
    
    handleQuery() { uni.showToast({ title: '查询中...', icon: 'none' }) }
  }
}
</script>

<style lang="scss" scoped>
.stat-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $spacing-base;
  padding: $spacing-md;
}

.stat-card {
  background: #ffffff;
  border-radius: $border-radius-md;
  padding: $spacing-base;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  .stat-label {
    font-size: $font-size-sm;
    color: $text-placeholder;
  }

  .stat-number {
    font-size: $font-size-xxl;
    font-weight: 700;
    color: $text-primary;
    margin-top: $spacing-xs;

    .stat-unit {
      font-size: $font-size-base;
      color: $text-placeholder;
      font-weight: 400;
    }
  }
}

.chart-title {
  padding: 0 $spacing-md $spacing-sm;
  font-size: $font-size-base;
  font-weight: 600;
  color: $text-primary;
}

.bar-chart {
  padding: 0 $spacing-md;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  margin-bottom: $spacing-sm;
}

.bar-label {
  width: 50px;
  font-size: $font-size-sm;
  color: $text-secondary;
  text-align: right;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 20px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 6px;
  font-size: $font-size-xs;
  color: #ffffff;

  &.red { background: $danger-color; }
  &.orange { background: $warning-color; }
  &.blue { background: $primary-color; }
  &.green { background: $success-color; }
}
</style>
