<template>
  <uni-card padding="0">
    <view class="records-section">
      <view class="section-header">
        <text class="section-title">{{ title }}</text>
      </view>

      <!-- 无数据 -->
      <view v-if="records.length === 0" class="empty-state">
        <text class="empty-text">{{ emptyText }}</text>
      </view>
      <!-- 列表 -->
      <view v-else class="record-list">
        <view class="record-card" v-for="(item, idx) in records" :key="idx">
          <text class="record-text">{{ item }}</text>
        </view>
      </view>
    </view>
  </uni-card>
</template>

<script>
/**
 * 出入库历史列表组件
 */
export default {
  name: 'InoutHistory',
  props: {
    // 标题
    title: { type: String, default: '历史记录' },
    records: {
      type: Array,
      default: () => []
    },
    // 空数据提示
    emptyText: { type: String, default: '暂无历史记录' }
  },

}
</script>

<style lang="scss" scoped>
.records-section {
  padding-top: 8px;
  min-height: 200rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.empty-state {
  padding: 20px 16px;
  text-align: center;
}

.empty-text {
  font-size: 13px;
  color: #999;
}

.record-list {
  // padding: 0 16px;
}

.record-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 13px;
  padding: 12px;
}

.record-text {
  font-size: 13px;
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
