<!-- 食材清单 -->
<view class="container">
  <view class="header-bar">
    <text class="page-title">📋 食材清单</text>
    <view class="filter-bar">
      <text class="filter-tag {{currentFilter===''?'active':''}}" bindtap="setFilter" data-filter="">全部</text>
      <text class="filter-tag {{currentFilter==='fresh'?'active':''}}" bindtap="setFilter" data-filter="fresh">新鲜</text>
      <text class="filter-tag {{currentFilter==='expiring'?'active':''}}" bindtap="setFilter" data-filter="expiring">快过期</text>
      <text class="filter-tag {{currentFilter==='expired'?'active':''}}" bindtap="setFilter" data-filter="expired">已过期</text>
    </view>
  </view>

  <block wx:if="{{foods.length}}">
    <view class="food-card" wx:for="{{foods}}" wx:key="id">
      <view class="food-icon">{{categoryEmoji[item.category] || '📦'}}</view>
      <view class="food-info">
        <text class="food-name">{{item.name}}</text>
        <text class="food-meta">{{item.quantity}}{{item.unit}} · {{item.category}}</text>
        <text class="food-date">保质期至 {{item.expiry_date}}</text>
      </view>
      <view class="food-actions">
        <text class="badge badge-{{item.status === 'fresh' ? 'green' : (item.status === 'expiring' ? 'orange' : 'red')}}">
          {{item.status === 'fresh' ? '新鲜' : (item.status === 'expiring' ? '快过期' : '已过期')}}
        </text>
        <view class="food-btns">
          <text class="btn-sm" bindtap="consumeItem" data-id="{{item.id}}">✏️</text>
          <text class="btn-sm" bindtap="deleteItem" data-id="{{item.id}}">🗑️</text>
        </view>
      </view>
    </view>
  </block>
  <view wx:else class="empty-state">
    <text style="font-size:80rpx;">🧊</text>
    <text style="display:block;margin-top:20rpx;">冰箱空空如也</text>
    <navigator url="/pages/add/add" class="mt-20" style="color:#FF7E67;font-size:28rpx;">去添加食材 →</navigator>
  </view>
</view>
