<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="data-list">
        <view class="data-card" v-for="(item, index) in dataList" :key="index">
          <view class="data-card-header">
            <text class="data-card-title">{{ item.name }}</text>
            <text class="data-card-tag green">已入库</text>
          </view>
          <view class="data-card-row"><text>入库编号</text><text class="val">{{ item.code }}</text></view>
          <view class="data-card-row"><text>净重</text><text class="val">{{ item.weight }}</text></view>
          <view class="data-card-row"><text>仓库/仓位</text><text class="val">{{ item.location }}</text></view>
          <view class="data-card-row"><text>入库时间</text><text class="val">{{ item.time }}</text></view>
        </view>
      </view>
      <view class="filter-reset-area">
        <button class="btn btn-outline filter-reset-btn" @click="handleReset">重置筛选</button>
      </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(),
      dataList: [
        { name: '感染性废物', code: 'RK20260514001', weight: '2.35 KG', location: '1号暂存间/A区', time: '05-14 09:30' },
        { name: '损伤性废物', code: 'RK20260514002', weight: '1.50 KG', location: '1号暂存间/B区', time: '05-14 10:15' }
      ]
    }
  },
  methods: {
    
    handleQuery() { uni.showToast({ title: '查询中...', icon: 'none' }) },
    handleReset() {
      this.startDate = ''
      this.endDate = ''
      uni.showToast({ title: '已重置', icon: 'none' })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.filter-reset-area {
  padding: 8px 16px;
}

.filter-reset-btn {
  width: 100%;
  height: 36px;
  font-size: $font-size-sm;
}
</style>
