<template>
  <div class="history-list-container">
    <div class="history-header">
      <div class="header-title">
        <a-icon type="clock-circle" style="color: #1890FF;" />
        <span>历史安检记录</span>
      </div>
      <div class="header-count">共 {{ (historyList || []).length }} 条</div>
    </div>

    <div class="history-content">
      <a-spin :spinning="loading" size="small">
        <div class="history-scroll">
          <div
            v-for="item in historyList"
            :key="item.id"
            class="history-item"
            :class="{ 'is-active': item.id === activeId, [item.statusClass]: true }"
            @click="handleSelect(item)"
          >
            <div class="item-content">
              <div class="item-header">
                <div class="inspect-time">{{ item.displayDate }}</div>
                <div class="status-badge" :class="item.statusClass">
                  <span class="status-dot"></span>
                  <span class="status-text">{{ item.status }}</span>
                </div>
              </div>
              <div class="item-details">
                <div class="detail-row">
                  <a-icon type="safety-certificate" class="detail-icon" />
                  <span class="detail-label">安检状态：</span>
                  <span class="detail-value">{{ item?.f_entry_status || '--' }}</span>
                </div>
                <div class="detail-row">
                  <a-icon type="user" class="detail-icon" />
                  <span class="detail-label">安检人员：</span>
                  <span class="detail-value">{{ item?.inspector || '--' }}</span>
                </div>
                <div class="detail-row" v-if="isAudited && item.f_entry_status === '入户'">
                  <a-icon type="check-circle" class="detail-icon" />
                  <span class="detail-label">审核状态：</span>
                  <span class="detail-value">{{ item?.auditstatus || '--' }}</span>
                </div>
                <div class="detail-row" v-if="isAudited && item.f_entry_status === '入户'">
                  <a-icon type="user" class="detail-icon" />
                  <span class="detail-label">审核人员：</span>
                  <span class="detail-value">{{ item?.auditnote || '--' }}</span>
                </div>
                <div class="detail-row" v-if="isAudited && item.f_entry_status === '入户'">
                  <a-icon type="snippets" class="detail-icon" />
                  <span class="detail-label">审核备注：</span>
                  <span class="detail-value">{{ item?.f_approved_note || '--' }}</span>
                </div>
              </div>
            </div>
          </div>

          <div v-if="(!historyList || historyList.length === 0) && !loading" class="empty-state">
            <a-icon type="inbox" style="font-size: 48px; color: #d9d9d9;" />
            <p style="color: #999; margin-top: 16px;">暂无历史记录</p>
          </div>
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HistoryList',
  props: {
    historyList: { type: Array, default: () => [] },
    activeId: { type: [String, Number], default: null },
    loading: { type: Boolean, default: false },
    isAudited: { type: Boolean, default: false }
  },
  methods: {
    handleSelect (item) {
      if (item.id !== this.activeId) this.$emit('select', item.id)
    }
  }
}
</script>

<style lang="less" scoped>
.history-list-container { height: 100%; display: flex; flex-direction: column; background: white; }
.history-header { flex-shrink: 0; padding: 16px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; background: #fafafa; }
.header-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #1f2937; }
.header-count { font-size: 12px; color: #8b5cf6; background: #ede9fe; padding: 2px 8px; border-radius: 10px; }
.history-content { flex: 1; min-height: 0; overflow: hidden; }
.history-scroll { height: 100%; max-height: calc(100vh - 60px - 32px - 60px); overflow-y: auto; overflow-x: hidden; padding: 8px 12px; }
.history-item { position: relative; margin-bottom: 12px; padding: 12px 16px 12px 20px; border: 1px solid #e6e9ef; border-left: 4px solid #e6e9ef; border-radius: 0.2rem; background: #ffffff; cursor: pointer; transition: all 0.2s ease; }
.history-item:hover { box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15); border-color: #91d5ff; background: #fbfdff; transform: translateY(-1px); }
.history-item.is-active { border-color: #4096ff; border-left-width: 5px; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); background: #fafdff; }
.status-pass .status-badge { background: #f6ffed; color: #135200; border-color: #b7eb8f; }
.status-pass .status-dot { background: #52c41a; }
.status-warn .status-badge { background: #fff7e6; color: #ad4e00; border-color: #ffd591; }
.status-warn .status-dot { background: #fa8c16; }
.status-fail .status-badge { background: #fff1f0; color: #a8071a; border-color: #ffa39e; }
.status-fail .status-dot { background: #f5222d; }
.item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.inspect-time { font-size: 16px; font-weight: 600; color: #1f2937; line-height: 1.2; }
.status-badge { display: flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid; border-radius: 12px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.detail-row { display: flex; align-items: center; margin-bottom: 6px; font-size: 12px; color: #6b7280; }
.detail-icon { width: 12px; margin-right: 6px; color: #9ca3af; flex-shrink: 0; }
.detail-label { color: #6b7280; margin-right: 4px; flex-shrink: 0; }
.detail-value { color: #374151; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; text-align: center; }
</style>
