<template>
  <div class="gamma-grid-3">
    <div class="gamma-card info-card">
      <div class="gamma-title"><span>👤</span> 用户信息</div>
      <div class="info-item">
        <span class="info-label">姓名:</span>
        <span class="info-value">
          {{ maskedName }}
          <span v-if="realNameAuth.coincide" class="gamma-tag">身份证姓名一致</span>
        </span>
      </div>
      <div class="info-item"><span class="info-label">性别</span><span>{{ params.sex || '—' }}</span></div>
      <div class="info-item"><span class="info-label">年龄</span><span>{{ params.age || '—' }}</span></div>
      <div class="info-item"><span class="info-label">身份证号</span><span>{{ maskedIdCard }}</span></div>
      <div class="info-item"><span class="info-label">户籍地</span><span>{{ params.location || '—' }}</span></div>
    </div>

    <div class="gamma-card info-card">
      <div class="gamma-title"><span>📱</span> 手机信息</div>
      <div class="info-item">
        <span class="info-label">手机号:</span>
        <span>
          {{ maskedMobile }}
          <span v-if="mobile3Verify.status === 1" class="gamma-tag">身份证姓名手机号一致</span>
        </span>
      </div>
      <div class="info-item">
        <span class="info-label">手机号在网时长:</span>
        <span>{{ durationText }} ✅</span>
      </div>
      <div class="info-item">
        <span class="info-label">手机号在网状态:</span>
        <span :class="mobile4Verify.status === 2 ? 'gamma-text-danger' : ''">
          {{ mobileStatusText(mobile4Verify.status) }}
          <span v-if="mobile4Verify.status === 2"> ❗</span>
        </span>
      </div>
      <div class="info-item"><span class="info-label">手机号运营商:</span><span>{{ params.carrier || '—' }}</span></div>
      <div class="info-item"><span class="info-label">手机号归属地:</span><span>{{ params.phonePlace || '—' }}</span></div>
    </div>

    <div class="gamma-card info-card">
      <div class="gamma-title"><span>⚖️</span> 司法风险</div>
      <div v-for="item in courtItems" :key="item.key" class="info-item">
        <span class="info-label">
          <span :class="item.hit ? 'gamma-text-danger' : 'gamma-text-success'">{{ item.hit ? '❗' : '✅' }}</span>
          {{ item.label }}
        </span>
        <span :class="item.hit ? 'gamma-text-danger' : ''">{{ item.hit ? '是' : '否' }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { maskName, maskIdCard, maskMobile, mobileStatusText, buildCourtRiskItems } from '../reportHelper';

const props = defineProps({
  params: { type: Object, default: () => ({}) },
  realNameAuth: { type: Object, default: () => ({}) },
  mobile3Verify: { type: Object, default: () => ({}) },
  mobile4Verify: { type: Object, default: () => ({}) },
  mobileDuration: { type: Object, default: () => ({}) },
  courtRisk: { type: Object, default: () => ({}) },
  personalLawsuit: { type: Object, default: () => ({}) },
});

const maskedName = computed(() => maskName(props.params.name));
const maskedIdCard = computed(() => maskIdCard(props.params.id_card));
const maskedMobile = computed(() => maskMobile(props.params.mobile));

const durationText = computed(() => {
  const range = props.mobileDuration.range || '';
  if (range.includes('[24')) return '24~36月';
  return range || '—';
});

const courtItems = computed(() =>
  buildCourtRiskItems(props.courtRisk, props.personalLawsuit),
);
</script>

<style lang="scss" scoped>
.info-card { margin-bottom: 0; }

.info-item {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 14px;
  gap: 8px;
}

.info-label { color: #666; flex-shrink: 0; }
</style>
