<template>
  <uni-card padding="0">
    <view class="records-section">
      <view class="section-header">
        <text class="section-title">{{ title }}</text>
        <text class="clear-btn" @click="$emit('clear')">清空</text>
      </view>
      <view v-if="records.length === 0" class="empty-state">
        <text class="empty-text">{{ emptyText }}</text>
      </view>
      <view v-else class="record-card" v-for="(record, idx) in records" :key="idx">
        <view class="record-header">
          <text class="record-status" :class="record.status">{{ record.message }}</text>
          <text class="record-code">{{ record.digitalId }}</text>
          <text class="record-time">{{ record.time }}</text>
        </view>
      </view>
    </view>
  </uni-card>
</template>

<script>
export default {
  name: 'ScanRecords',
  props: {
    records: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      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;
  // padding: 0 16px;
}

.section-title {
  font-size: $font-size-md;
  font-weight: 500;
  color: #333;
}

.clear-btn {
  font-size: $font-size-base;
  color: #666;
  padding: 4px 12px;
}

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

.empty-text {
  font-size: $font-size-base;
  color: #999;
}

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

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-code {
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
  margin-left: 8px;
}

.record-status {
  min-width: 50px;
}

.record-status.success {
  color: #52c41a;
}

.record-status.error {
  color: #ff6b00;
}

.record-status.scan {
  color: #999;
}

.record-time {
  font-size: $font-size-xs;
  color: #999;
  min-width: 70px;
  text-align: right;
}
</style>
