<template>
  <div class="web-detail-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button :icon="ArrowLeft" @click="handleClickBack">返回</el-button>
        <h2 class="page-title">灾毁详情</h2>
      </div>
      <div class="header-right">
        <el-tag :type="getEventStatusType()" size="large">
          {{ getEventStatusText() }}
        </el-tag>
      </div>
    </div>

    <div class="content-container">
      <div class="left-panel">
        <!-- 基本信息卡片 -->
        <el-card class="info-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span class="card-title">基本信息</span>
            </div>
          </template>

          <el-row :gutter="20" class="info-row">
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">事件类型：</span>
                <span class="info-value">水毁事件</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">路况类别：</span>
                <span class="info-value">{{ detailData.roadConditionType || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">是否阻断：</span>
                <span class="info-value">{{ detailData.event?.isBlocked ? '是' : '否' }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">抢修进度：</span>
                <span class="info-value">{{ detailData.event?.repairProgress || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">水毁处数：</span>
                <span class="info-value">{{ detailData.event?.damageCount || 0 }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">阻断里程：</span>
                <span class="info-value">{{ detailData.event?.blockedMileage ? detailData.event.blockedMileage + '公里' : '-' }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">发生时间：</span>
                <span class="info-value">{{ detailData.occurTime || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">线路编号：</span>
                <span class="info-value">{{ detailData.routeNo || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">地点路线：</span>
                <span class="info-value">{{ detailData.occurLocation || '-' }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">起点桩号：</span>
                <span class="info-value">{{ detailData.event?.startStakeNo || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">起点桩经度：</span>
                <span class="info-value">{{ detailData.event?.startStakeLng || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">起点桩纬度：</span>
                <span class="info-value">{{ detailData.event?.startStakeLat || '-' }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">止点桩号：</span>
                <span class="info-value">{{ detailData.event?.endStakeNo || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">止点桩经度：</span>
                <span class="info-value">{{ detailData.event?.endStakeLng || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">止点桩纬度：</span>
                <span class="info-value">{{ detailData.event?.endStakeLat || '-' }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">路况位置：</span>
                <span class="info-value">{{ detailData.event?.blockedPointName || detailData.occurLocation || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">阻断点小地名：</span>
                <span class="info-value">{{ detailData.event?.blockedPointName || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">上报区县：</span>
                <span class="info-value">{{ detailData.event?.district || '-' }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">巡查里程：</span>
                <span class="info-value">{{ detailData.event?.inspectionMileage ? detailData.event.inspectionMileage + '公里' : '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">是否恢复重建：</span>
                <span class="info-value">{{ detailData.event?.needsRecovery ? '是' : '否' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">恢复重建预估费用：</span>
                <span class="info-value">{{ detailData.event?.estimatedRecoveryCost ? detailData.event.estimatedRecoveryCost + '万元' : '-' }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">联系人：</span>
                <span class="info-value">{{ detailData.event?.contactPerson || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">联系电话：</span>
                <span class="info-value">{{ detailData.event?.contactPhone || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">填报单位：</span>
                <span class="info-value">{{ detailData.event?.reporterUnit || '-' }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 填报信息卡片 -->
        <el-card class="info-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span class="card-title">填报信息</span>
            </div>
          </template>

          <div v-if="hasReportData">
            <div v-for="(report, index) in allReports" :key="index" class="report-section">
              <div class="report-header">
                <span class="report-title">{{ report?.title }}</span>
                <span class="report-meta">{{ report.reporterName || '-' }} {{ report.reportTime || '-' }}</span>
              </div>

              <div class="info-list">
                <div class="info-item">
                  <span class="info-label">处置情况：</span>
                  <span class="info-value">{{ formatDisposalMeasures(report.disposalMeasures) || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">塌方及损失：</span>
                  <span class="info-value">{{ getLossDescription(report) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">路产损失：</span>
                  <span class="info-value">{{ report.totalLossAmount ? report.totalLossAmount + '万元' : '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">有无车辆滞留：</span>
                  <span class="info-value">{{ getVehicleStrandedText(report) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">滞留车辆：</span>
                  <span class="info-value">{{ report.strandedVehicleCount || 0 }}辆</span>
                </div>
                <div class="info-item">
                  <span class="info-label">预计恢复时间：</span>
                  <span class="info-value">{{ report.expectRecoverTime || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">实际恢复时间：</span>
                  <span class="info-value">{{ report.actualRecoverTime || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">现场描述：</span>
                  <span class="info-value">{{ report.siteDescription || '-' }}</span>
                </div>

                <!-- 附件 -->
                <div v-if="report.fileList && report.fileList.length > 0" class="info-item attachment-item">
                  <span class="info-label">附件：</span>
                  <div class="attachment-list">
                    <el-link v-for="(file, fileIndex) in report.fileList" :key="fileIndex" :underline="false" @click="previewFile(file)" class="attachment-link">
                      <el-icon><Picture v-if="file.fileType === 1" /><VideoCamera v-else /></el-icon>
                      <span class="file-name">{{ file.fileName }}</span>
                    </el-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无填报信息" :image-size="100" />
        </el-card>

        <!-- 底部按钮 -->
        <!-- <div class="footer-buttons">
          <el-button type="primary" size="large" @click="handleContinueReport" class="footer-btn"> 续报 </el-button>
        </div> -->
      </div>
      <div class="right-panel" v-if="isEdit">
        <ContinueReport ref="continueReport" @refresh="getDisasterDetail" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Picture, VideoCamera } from '@element-plus/icons-vue'
import ContinueReport from './ContinueReport.vue'
import { request } from '@shared/utils/request'
import mockData from '../DisasterReport/waterMockJson.json'

const router = useRouter()
const route = useRoute()

// 详情数据
const detailData = ref({
  event: null,
  report: [],
  fileList: [],
  lossList: [],
  occurLocation: '',
  occurTime: '',
  roadConditionType: '',
  routeNo: ''
})

// 事件状态
const eventStatus = ref(0)

// 是否为编辑
const isEdit = computed(() => {
  return route.query.mode === 'edit'
})

const continueReport = ref(null)

// 所有填报记录（首报 + 续报）
const allReports = computed(() => {
  const reports =
    detailData.value.report?.map((item, index) => {
      item.title = index === 0 ? '首报' : '续报' + index
      return item
    }) || []
  return reports.reverse()
})

// 是否有填报数据
const hasReportData = computed(() => {
  return allReports.value.length > 0
})

// 获取事件状态文本
const getEventStatusText = () => {
  return eventStatus.value === 1 ? '已解除' : '未解除'
}

// 获取事件状态类型
const getEventStatusType = () => {
  return eventStatus.value === 1 ? 'success' : 'danger'
}

// 格式化处置措施
const formatDisposalMeasures = (measures) => {
  if (!measures) return ''
  const measureMap = {
    halfClose: '半幅封闭',
    fullClose: '全副封闭',
    bypass: '便道通行',
    normal: '正常通行'
  }
  return measures
    .split(',')
    .map((m) => measureMap[m.trim()] || m.trim())
    .join('、')
}

// 获取损失描述
const getLossDescription = (report) => {
  const lossList = report?.lossList
  if (!lossList || lossList.length === 0) return '-'

  const totalVolume = lossList.reduce((sum, loss) => {
    const volume = (loss.length || 0) * (loss.width || 0) * (loss.height || 0)
    return sum + volume
  }, 0)

  const totalAmount = lossList.reduce((sum, loss) => sum + (loss.totalAmount || 0), 0)

  return `${totalVolume}方，共损失${totalAmount}万元`
}

// 获取车辆滞留文本
const getVehicleStrandedText = (report) => {
  const count = report?.strandedVehicleCount || 0
  return count > 0 ? `有车滞留，共${count}辆` : '无车滞留'
}

// 获取灾毁详情
const getDisasterDetail = async () => {
  const id = route.query.id
  if (!id) {
    ElMessage.warning('缺少灾毁ID')
    return
  }

  try {
    const result = await request({
      url: `/snow-ops-platform/water-damage/getById`,
      method: 'get',
      params: { id }
    })

    if (result?.data) {
      const data = result.data
      detailData.value = {
        event: data.event || null,
        report: data.report || [],
        fileList: data.fileList || [],
        lossList: data.lossList || [],
        occurLocation: data.occurLocation || '',
        occurTime: data.occurTime || '',
        roadConditionType: data.roadConditionType || '',
        routeNo: data.routeNo || ''
      }
      eventStatus.value = data.eventStatus || 0

      if (isEdit.value) {
        const newFormData = {
          ...data,
          lossList: null,
          report: mockData.report,
          fileList: null
        }
        continueReport.value?.initFormData(newFormData)
      }
    } else {
      ElMessage.warning(result.message || '获取详情失败')
    }
  } catch (error) {
    console.error('获取灾毁详情失败:', error)
    ElMessage.error('获取详情失败，请稍后重试')
  }
}

// 点击返回
const handleClickBack = () => {
  router.push('/disasterManagement')
}

// 续报
const handleContinueReport = () => {
  router.push({
    path: '/disasterReport',
    query: {
      id: route.query.id,
      eventId: detailData.value.event?.id,
      isContinue: 'true'
    }
  })
}

// 预览附件
const previewFile = (file) => {
  if (file.fileUrl) {
    window.open(file.fileUrl, '_blank')
  }
}

onMounted(() => {
  getDisasterDetail()
})
</script>

<style scoped lang="scss">
.web-detail-container {
  padding: 20px;
  background: #f5f7fa;
  height: 100%;
  overflow: auto;
  padding-bottom: 100px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .page-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #303133;
    }
  }
}

.info-card {
  margin-bottom: 20px;
  border-radius: 8px;

  :deep(.el-card__header) {
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
    background: #fafafa;
  }

  .card-header {
    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
}

.info-row {
  margin-bottom: 16px;

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

.info-item {
  display: flex;
  align-items: flex-start;
  line-height: 1.5;

  .info-label {
    width: 120px;
    flex-shrink: 0;
    color: #909399;
    font-size: 14px;
  }

  .info-value {
    flex: 1;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
}

.report-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ebeef5;

  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #dcdfe6;

  .report-title {
    font-size: 16px;
    font-weight: 600;
    color: #409eff;
  }

  .report-meta {
    font-size: 13px;
    color: #909399;
  }
}

.attachment-wrapper {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #ebeef5;

  .attachment-item {
    .attachment-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;

      .attachment-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: #f5f7fa;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
          background: #ecf5ff;
          color: #409eff;
        }

        .file-name {
          font-size: 13px;
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.footer-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 16px 24px;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  z-index: 100;

  .footer-btn {
    width: 200px;
    height: 44px;
    font-size: 16px;
    border-radius: 22px;
  }
}
.content-container {
  display: flex;
  .left-panel {
    flex: 1;
    margin-right: 10px;
  }
  .right-panel {
    width: 400px;
  }
}
</style>
