<template>
  <div class="inspection-summary">
    <!-- 标题 -->
    <div class="summary-header">
      <div class="summary-title">
        <a-icon type="file-text" style="color: #1890FF;" />
        <span>{{title}}</span>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="summary-content">
      <!-- 键值对网格 -->
      <div class="kv-grid">
        <!-- 用户信息 -->
        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="user" />
            用户
          </div>
          <div class="kv-value">{{ basicInfo.f_user_name || '——' }}</div>
        </div>

        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="number" />
            用户编号
          </div>
          <div class="kv-value">{{ basicInfo.f_userinfo_code || '——' }}</div>
        </div>
        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="number" />
            卡号
          </div>
          <div class="kv-value">{{ basicInfo.f_card_id || '——' }}</div>
        </div>
        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="idcard" />
            身份证号
          </div>
          <div class="kv-value time-field">{{ basicInfo.f_idnumber_display || basicInfo.f_idnumber || '——' }}</div>
        </div>

        <div class="kv-item kv-item-wide">
          <div class="kv-label">
            <a-icon type="environment" />
            地址
          </div>
          <div class="kv-value">{{ basicInfo.f_address || '——' }}</div>
        </div>

        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="clock-circle" />
            安检时间
          </div>
          <div class="kv-value time-field">{{ formatDateTime(basicInfo.f_offsite_time) }}</div>
        </div>

        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="user-switch" />
            安检员
          </div>
          <div class="kv-value">{{ basicInfo.f_checker_name || '——' }}</div>
        </div>

        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="team" />
            用户类型
          </div>
          <div class="kv-value">{{ basicInfo.f_user_type || '——' }}</div>
        </div>

        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="phone" />
            联系电话
          </div>
          <div class="kv-value">{{ basicInfo.f_user_phone_display || basicInfo.f_user_phone || '——' }}</div>
        </div>

        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="home" />
            入户状态
          </div>
          <div class="kv-value">
            <span class="simple-status-badge" :class="getEntryStatusClass(basicInfo.f_entry_status)">
              {{ basicInfo.f_entry_status || '——' }}
            </span>
          </div>
        </div>

        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="safety-certificate" />
            安检状态
          </div>
          <div class="kv-value">
            <span class="simple-status-badge" :class="getUserStatusClass(basicInfo.f_user_status)">
              {{ basicInfo.f_user_status || '——' }}
            </span>
          </div>
        </div>

        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="login" />
            到达时间
          </div>
          <div class="kv-value time-field">{{ formatDateTime(basicInfo.f_arrive_time) }}</div>
        </div>

        <div class="kv-item">
          <div class="kv-label">
            <a-icon type="logout" />
            离开时间
          </div>
          <div class="kv-value time-field">{{ formatDateTime(basicInfo.f_leave_time) }}</div>
        </div>
      </div>

      <!-- 备注信息 -->
      <div class="summary-note" v-if="basicInfo.f_comments">
        <div class="note-label">
          <a-icon type="edit" />
          备注
        </div>
        <div class="note-content">
          {{ basicInfo.f_comments }}
        </div>
      </div>

      <!-- 审核信息 -->
      <!-- <div class="audit-info" v-if="basicInfo.auditStatus">
        <div class="audit-status" :class="basicInfo.auditStatus.class">
          <a-icon :type="getAuditIcon(basicInfo.auditStatus.class)" />
          <span>{{ basicInfo.auditStatus.text }}</span>
        </div>
        <div class="audit-details" v-if="basicInfo.f_approved_time">
          <div class="audit-time">审核时间：{{ formatDateTime(basicInfo.f_approved_time) }}</div>
          <div class="audit-person" v-if="basicInfo.f_approved_name">
            审核人：{{ basicInfo.f_approved_name }}
          </div>
          <div class="audit-note" v-if="basicInfo.f_approved_note">
            审核说明：{{ basicInfo.f_approved_note }}
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'InspectionSummary',
  props: {
    basicInfo: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: '安检结果摘要'
    }
  },
  methods: {
    /**
     * 格式化日期时间显示
     */
    formatDateTime (dateTimeStr) {
      if (!dateTimeStr) return '——'

      // 基本格式化 - 保留到秒数
      const formatted = dateTimeStr.replace('T', ' ').substring(0, 19)

      // 在窄屏下使用更紧凑的格式但保留秒数
      if (typeof window !== 'undefined' && window.innerWidth < 1200) {
        return formatted.substring(5) // 去掉年份，显示月-日 时:分:秒
      }

      return formatted
    },

    /**
     * 获取入户状态样式类
     */
    getEntryStatusClass (status) {
      const classMap = {
        入户: 'status-success',
        正常入户: 'status-success',
        预约入户: 'status-info',
        拒绝入户: 'status-error',
        无人在家: 'status-warning'
      }
      return classMap[status] || 'status-default'
    },

    /**
     * 获取用户安检状态颜色
     */
    getUserStatusColor (status) {
      const colorMap = {
        正常: '#52c41a',
        有隐患: '#fa8c16',
        不通过: '#f5222d'
      }
      return colorMap[status] || '#d9d9d9'
    },

    /**
     * 获取用户安检状态样式类
     */
    getUserStatusClass (status) {
      const classMap = {
        正常: 'status-success',
        有隐患: 'status-warning',
        不通过: 'status-error'
      }
      return classMap[status] || 'status-default'
    },

    /**
     * 获取审核状态图标
     */
    getAuditIcon (auditClass) {
      const iconMap = {
        approved: 'check-circle',
        rejected: 'close-circle',
        pending: 'clock-circle'
      }
      return iconMap[auditClass] || 'question-circle'
    }
  }
}
</script>

<style lang="less" scoped>
.inspection-summary {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.summary-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
  border-radius: 8px 8px 0 0;
}

.summary-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.summary-content {
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
  gap: 12px 16px;
  margin-bottom: 16px;

  // 动态网格列数 - 优化后的断点，支持中等屏幕3列显示
  --grid-columns: 2; // 默认2列

  @media (min-width: 1000px) {
    --grid-columns: 3; // 从1000px开始：通过压缩历史面板和扩宽抽屉获得3列空间
  }

  @media (min-width: 800px) and (max-width: 999px) {
    --grid-columns: 2; // 中屏：保持2列
  }

  @media (max-width: 799px) {
    --grid-columns: 1; // 小屏：1列布局
  }
}

.kv-item {
  display: flex;
  flex-direction: column;
  gap: 3px;

  &.kv-item-wide {
    grid-column: span var(--grid-columns, 2);
  }
}

.kv-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap; // 防止标题换行
  min-width: 0; // 允许flex收缩

  .anticon {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0; // 防止图标被压缩
  }
}

.kv-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-all;

  // 时间字段特殊处理
  &.time-field {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    @media (max-width: 1200px) {
      white-space: normal; // 小屏允许换行
    }
  }
}

// 最简化的状态显示，使用伪元素模拟圆点
.simple-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  padding-left: 18px; // 为伪元素圆点留出空间

  // 使用伪元素创建圆点，避免复杂的flex布局
  &::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}

// 状态样式 - 为每个状态定义背景色、文字颜色、边框颜色和伪元素圆点颜色
.status-success {
  background: #f6ffed;
  color: #135200;
  border-color: #b7eb8f;

  &::before {
    background-color: #52c41a;
  }
}

.status-info {
  background: #e6f7ff;
  color: #003a8c;
  border-color: #91d5ff;

  &::before {
    background-color: #1890ff;
  }
}

.status-warning {
  background: #fff7e6;
  color: #ad4e00;
  border-color: #ffd591;

  &::before {
    background-color: #fa8c16;
  }
}

.status-error {
  background: #fff1f0;
  color: #a8071a;
  border-color: #ffa39e;

  &::before {
    background-color: #f5222d;
  }
}

.status-default {
  background: #f5f5f5;
  color: #757575;
  border-color: #d9d9d9;

  &::before {
    background-color: #d9d9d9;
  }
}

.summary-note {
  margin-bottom: 16px;
  padding: 10px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #1890ff;
}

.note-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 6px;
}

.note-content {
  font-size: 13px;
  color: #374151;
  line-height: 1.5;
}

.audit-info {
  padding: 10px 12px;
  border-radius: 6px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.audit-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;

  &.approved {
    color: #52c41a;
  }

  &.rejected {
    color: #f5222d;
  }

  &.pending {
    color: #fa8c16;
  }
}

.audit-details {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;

  > div {
    margin-bottom: 4px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.audit-time,
.audit-person {
  display: flex;
  align-items: center;
}

.audit-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e9ecef;
  color: #374151;
}

/* 响应式适配优化 */
@media (max-width: 1200px) {
  .kv-grid {
    gap: 10px 12px;
  }

  .kv-label {
    font-size: 11px;
  }

  .kv-value {
    font-size: 13px;
  }
}

/* 针对3列布局的标题换行优化 */
@media (min-width: 1000px) and (max-width: 1300px) {
  .kv-label {
    font-size: 11px; // 在中等宽度下使用更小的字号
    gap: 4px; // 减少间距
  }

  .kv-grid {
    gap: 10px 12px; // 减少列间距
  }
}

@media (max-width: 900px) {
  .kv-grid {
    gap: 8px 10px;
  }

  .kv-item {
    gap: 2px;
  }
}

@media (max-width: 768px) {
  .summary-header {
    padding: 12px;
  }

  .summary-content {
    padding: 12px;
  }

  .kv-grid {
    gap: 10px;
  }

  .summary-title {
    font-size: 14px;
  }

  .kv-label {
    font-size: 11px;
  }

  .kv-value {
    font-size: 13px;
  }
}

/* 滚动条样式 */
.summary-content::-webkit-scrollbar {
  width: 4px;
}

.summary-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.summary-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;

  &:hover {
    background: #a8a8a8;
  }
}
</style>
