<template>
  <view class="page-container">
    <scroll-view class="page-body" scroll-y>
      <view class="tabs">
        <view class="tab" :class="{ active: currentTab === 0 }" @click="currentTab = 0">待提交</view>
        <view class="tab" :class="{ active: currentTab === 1 }" @click="currentTab = 1">已提交</view>
        <view class="tab" :class="{ active: currentTab === 2 }" @click="currentTab = 2">已完成</view>
      </view>
      <view class="data-list">
        <view class="data-card" v-for="(item, index) in filteredList" :key="index">
          <view class="data-card-header">
            <text class="data-card-title">{{ item.code }}</text>
            <text class="data-card-tag" :class="item.statusClass">{{ item.status }}</text>
          </view>
          <view class="data-card-row"><text>危废名称</text><text class="val">{{ item.name }}</text></view>
          <view class="data-card-row"><text>转移重量</text><text class="val">{{ item.weight }}</text></view>
          <view class="data-card-row" v-if="item.receiver"><text>接收单位</text><text class="val">{{ item.receiver }}</text></view>
          <view class="data-card-row"><text>{{ item.timeLabel }}</text><text class="val">{{ item.time }}</text></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { api } from '@/api/index'
export default {
  data() {
    return {
      currentTab: 0,
      dataList: [
        { code: 'LD20260514001', name: '感染性废物', weight: '5.60 KG', receiver: '上海XX环保处置公司', status: '待提交', statusClass: 'orange', timeLabel: '创建时间', time: '05-14 14:30' },
        { code: 'LD20260513001', name: '损伤性废物', weight: '3.10 KG', receiver: '', status: '已提交', statusClass: 'blue', timeLabel: '提交时间', time: '05-13 16:50' }
      ]
    }
  },
  computed: {
    filteredList() {
      const statusMap = ['待提交', '已提交', '已完成']
      return this.dataList.filter(item => item.status === statusMap[this.currentTab])
    }
  },
  methods: {
    
  }
}
</script>
