<template>
  <div class="accident-view-container">
    <div v-for="(person, index) in personnelList" :key="index" class="personnel-item">
      <div class="field-item">
        <label class="field-label">车牌号：</label>
        <div class="field-value">{{ person.carNum || '-' }}</div>
      </div>
      <div class="field-item">
        <label class="field-label">事故人员：</label>
        <div class="field-value">{{ person.accidentPersonnel || '-' }}</div>
      </div>
      <div class="field-item">
        <label class="field-label">联系方式：</label>
        <div class="field-value">{{ person.phoneNum || '-' }}</div>
      </div>
    </div>
    <div class="field-item">
      <label class="field-label">事故地点：</label>
      <div class="field-value">{{ formData.trafficAccidentRecord.accidentLocation || '-' }}</div>
    </div>
    <div class="field-item">
      <label class="field-label">事故时间：</label>
      <div class="field-value">{{ formData.trafficAccidentRecord.accidentTime || '-' }}</div>
    </div>
    <div class="field-item">
      <label class="field-label">事故描述：</label>
      <div class="field-value description">{{ formData.trafficAccidentRecord.accidentDescription || '-' }}</div>
    </div>
    <div class="field-item">
      <label class="field-label">备注：</label>
      <div class="field-value">{{ formData.trafficAccidentRecord.remark || '-' }}</div>
    </div>
    <div class="field-item">
      <label class="field-label">创建人：</label>
      <div class="field-value">{{ formData.trafficAccidentRecord.createdByName || '-' }}</div>
    </div>
    <div class="field-item image-item">
      <label class="field-label">事故图片：</label>
      <div class="field-value">
        <ShowImages v-if="recordImageList.length > 0" style="min-height: 100px" :image-list="recordImageList" />
        <div v-else class="no-data">暂无图片</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed } from 'vue';
  import { useRoute } from 'vue-router';
  import ShowImages from '@/views/emergency/emergency-drill/components/ShowImages.vue';
  import type { AddAccidentInfoStruct, AccidentPersonnelInfoStruct } from '@/api/traffic-accident';
  import { getAccidentInfoDetail } from '@/api/traffic-accident';

  const route = useRoute();
  const id = route.query.id as string;

  const formData = ref<AddAccidentInfoStruct>({
    trafficAccidentRecord: {
      accidentImages: '',
      accidentLocation: '',
      accidentTime: '',
      accidentDescription: '',
      remark: '',
      createdByName: '',
    },
    accidentPersonnelInfoList: [],
  });

  const personnelList = ref<AccidentPersonnelInfoStruct[]>([]);

  const recordImageList = computed(() => {
    if (!formData.value.trafficAccidentRecord.accidentImages) return [];
    try {
      return JSON.parse(formData.value.trafficAccidentRecord.accidentImages);
    } catch {
      return [];
    }
  });

  // 加载数据
  const loadData = async () => {
    if (!id) return;
    try {
      const response = await getAccidentInfoDetail({ accidentRecordId: Number(id) });
      if (response) {
        // 填充事故记录数据
        formData.value.trafficAccidentRecord = {
          ...response.trafficAccidentRecord,
          id: response.trafficAccidentRecord.id,
        };

        // 填充人员信息数据
        if (response.accidentPersonnelInfoList && response.accidentPersonnelInfoList.length > 0) {
          personnelList.value = response.accidentPersonnelInfoList;
        } else {
          // 如果没有人员信息，显示空状态
          personnelList.value = [];
        }
      }
    } catch (error) {
      console.error('加载数据失败:', error);
    }
  };

  onMounted(() => {
    loadData();
  });
</script>

<style scoped lang="scss">
  .accident-view-container {
    .personnel-item {
      display: flex;
      align-items: center;

      .field-value {
        width: 300px;
      }
    }

    .field-item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .field-label {
        width: 92.54px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 16px;
        font-weight: 500;
        line-height: 32px;
        flex-shrink: 0;
      }

      .field-value {
        flex: 1;
        color: rgba(0, 0, 0, 0.65);
        font-size: 16px;
        line-height: 32px;
        word-break: break-all;

        &.description {
          line-height: 1.5;
          white-space: pre-wrap;
        }
      }

      .no-data {
        color: rgba(0, 0, 0, 0.25);
        font-style: italic;
      }
    }

    .image-item {
      display: flex;
      align-items: flex-start;
    }
  }
</style>
