<template>
  <el-dialog
    :visible.sync="innerVisible"
    :title="dialogTitle"
    width="900px"
    append-to-body
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-table
      v-loading="loading"
      :data="reportList"
      border
      stripe
      size="small"
      style="width: 100%"
    >
      <el-table-column type="index" width="60" label="序号" />
      <el-table-column prop="reportSequence" label="上报序号" width="100" align="center">
        <template slot-scope="scope">
          <el-tag size="mini" type="info">第{{ scope.row.reportSequence }}次</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reportType" label="上报类型" width="100" align="center">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.reportType === 'initial' ? 'success' : 'warning'"
            size="mini"
          >
            {{ scope.row.reportType === 'initial' ? '首次上报' : '续报' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="templateName" label="使用模板" width="150" show-overflow-tooltip />
      <el-table-column prop="status" label="上报状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row.status)" size="mini">
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上报时间" width="160" />
      <el-table-column prop="createBy" label="操作人" width="120" />
      <el-table-column prop="retryCount" label="重试次数" width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.retryCount && scope.row.retryCount > 0">
            {{ scope.row.retryCount }}次
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-view"
            @click="viewDetail(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-empty
      v-if="!loading && reportList.length === 0"
      description="暂无上报记录"
      :image-size="100"
    />

    <!-- Report Detail Dialog -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      title="上报记录详情"
      width="700px"
      append-to-body
    >
      <el-descriptions :column="2" border size="small" v-if="currentReport">
        <el-descriptions-item label="上报序号">
          第{{ currentReport.reportSequence }}次
        </el-descriptions-item>
        <el-descriptions-item label="上报类型">
          <el-tag
            :type="currentReport.reportType === 'initial' ? 'success' : 'warning'"
            size="mini"
          >
            {{ currentReport.reportType === 'initial' ? '首次上报' : '续报' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="使用模板">
          {{ currentReport.templateName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="上报状态">
          <el-tag :type="getStatusTagType(currentReport.status)" size="mini">
            {{ getStatusLabel(currentReport.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="上报时间">
          {{ currentReport.createTime || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人">
          {{ currentReport.createBy || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="重试次数" v-if="currentReport.retryCount && currentReport.retryCount > 0">
          {{ currentReport.retryCount }}次
        </el-descriptions-item>
        <el-descriptions-item label="最后重试时间" v-if="currentReport.lastRetryTime">
          {{ currentReport.lastRetryTime }}
        </el-descriptions-item>
        <el-descriptions-item label="错误信息" :span="2" v-if="currentReport.errorMessage">
          <el-alert
            :title="currentReport.errorMessage"
            type="error"
            :closable="false"
            show-icon
          />
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2" v-if="currentReport.remark">
          {{ currentReport.remark }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- Fields Data -->
      <el-card v-if="currentReport && currentReport.fields" shadow="never" style="margin-top: 16px">
        <div slot="header">
          <span>上报字段数据</span>
        </div>
        <pre style="max-height: 300px; overflow: auto; font-size: 12px;">{{ formatFields(currentReport.fields) }}</pre>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listProvinceReportsByEvent } from '@/api/emergency/provinceReport'

export default {
  name: 'ProvinceReportHistoryDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    eventInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      innerVisible: false,
      loading: false,
      reportList: [],
      detailDialogVisible: false,
      currentReport: null
    }
  },
  computed: {
    dialogTitle() {
      if (this.eventInfo && this.eventInfo.eventTitle) {
        return '上报记录 - ' + this.eventInfo.eventTitle
      }
      return '上报记录'
    }
  },
  watch: {
    visible(val) {
      this.innerVisible = val
      if (val) {
        this.fetchReportHistory()
      }
    }
  },
  methods: {
    async fetchReportHistory() {
      if (!this.eventInfo || !this.eventInfo.id) {
        this.$message.warning('事件信息不完整')
        return
      }

      this.loading = true
      try {
        const response = await listProvinceReportsByEvent(this.eventInfo.id)
        if (response.code === 200) {
          this.reportList = response.data || []
        } else {
          this.$message.error(response.msg || '加载上报记录失败')
          this.reportList = []
        }
      } catch (error) {
        console.error('加载上报记录失败:', error)
        this.$message.error('加载上报记录失败')
        this.reportList = []
      } finally {
        this.loading = false
      }
    },
    getStatusLabel(status) {
      const statusMap = {
        pending: '待上报',
        submitting: '上报中',
        success: '已上报',
        failed: '上报失败',
        retry: '重试中'
      }
      return statusMap[status] || status || '未知'
    },
    getStatusTagType(status) {
      const tagMap = {
        success: 'success',
        failed: 'danger',
        submitting: 'warning',
        retry: 'warning',
        pending: 'info'
      }
      return tagMap[status] || 'info'
    },
    viewDetail(report) {
      this.currentReport = report
      this.detailDialogVisible = true
    },
    formatFields(fields) {
      if (!fields) return '无数据'
      return JSON.stringify(fields, null, 2)
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.innerVisible = false
      this.reportList = []
      this.currentReport = null
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>

