<template>
  <view class="recent-records-container">
    <view class="table-header">
      <text class="title">最近记录</text>
    </view>
    
    <scroll-view 
      scroll-x="true" 
      class="table-scroll"
      show-scrollbar="false"
    >
      <view class="table-wrapper">
        <!-- 表头 -->
        <view class="table-row header-row">
          <view class="table-cell">物料名称</view>
          <view class="table-cell">型号</view>
          <view class="table-cell">当前库存</view>
          <view class="table-cell">安全库存</view>
          <view class="table-cell">在途数量</view>
          <view class="table-cell">库存状态</view>
        </view>
        
        <!-- 表体 -->
        <view 
          class="table-row" 
          v-for="(item, index) in tableData" 
          :key="index"
          :class="{ 'odd-row': index % 2 === 1 }"
        >
          <view class="table-cell">{{ item.name }}</view>
          <view class="table-cell">{{ item.model }}</view>
          <view class="table-cell">{{ item.inventory }}</view>
          <view class="table-cell">{{ item.threshold }}</view>
          <view class="table-cell">{{ item.taskInventory }}</view>
          <view class="table-cell">
            <view 
              class="status-tag"
              :class="calcInventoryStatus(item.inventory, item.taskInventory, item.threshold).type"
            >
              {{ calcInventoryStatus(item.inventory, item.taskInventory, item.threshold).status }}
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="tableData.length === 0" class="empty-state">
          <uni-icons type="empty" size="60" color="#cccccc"></uni-icons>
          <text class="empty-text">暂无记录</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'RecentRecords',
  props: {
    // 接收表格数据
    tableData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 计算库存状态
    calcInventoryStatus(inventory, inTransit, threshold) {
      const total = inventory + inTransit;

      if (total > threshold + 10) {
        return { status: '库存积压', type: 'warning' };
      } else if (total > threshold) {
        return { status: '正常', type: 'success' };
      } else if (total <= threshold && total > threshold - 2) {
        return { status: '库存预警', type: 'danger' };
      } else {
        return { status: '库存不足', type: 'info' };
      }
    }
  }
};
</script>

<style scoped>
.recent-records-container {
  width: 100%;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.table-header {
  padding: 20rpx 16rpx;
  border-bottom: 1px solid #f5f5f5;
}

.title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}

.table-scroll {
  width: 100%;
}

.table-wrapper {
  width: 100%;
  min-width: 900rpx; /* 确保表格有足够宽度展示内容 */
}

.table-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #f5f5f5;
}

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

.header-row {
  background-color: #f9f9f9;
}

.odd-row {
  background-color: #fafafa;
}

.table-cell {
  flex: 1;
  padding: 20rpx 10rpx;
  font-size: 24rpx;
  color: #666666;
  text-align: center;
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 14rpx;
  font-size: 22rpx;
  color: #ffffff;
}

.status-tag.success {
  background-color: #00b42a;
}

.status-tag.warning {
  background-color: #ff7d00;
}

.status-tag.danger {
  background-color: #f53f3f;
}

.status-tag.info {
  background-color: #86909c;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
}

.empty-text {
  font-size: 26rpx;
  color: #999999;
  margin-top: 20rpx;
}
</style>
