<script setup lang="ts">
import { DIALOG_WIDTH } from "../../../constants/ui";

const visible = defineModel<boolean>({ required: true });
const historyModuleCode = defineModel<string>("historyModuleCode", { required: true });

defineProps<{
  historyRows: any[];
  diffRows: Array<{ field: string; previous: string; current: string }>;
  statusFormatter: (row: any, column: any, value: unknown) => string;
}>();

defineEmits<{
  moduleChange: [];
  comparePrevious: [index: number];
}>();
</script>

<template>
  <el-dialog v-model="visible" title="资料历史" :width="DIALOG_WIDTH.lg">
    <el-form :inline="true">
      <el-form-item label="模块">
        <el-select v-model="historyModuleCode" @change="$emit('moduleChange')">
          <el-option label="会议基本信息" value="BASIC_INFO" />
          <el-option label="核销材料" value="WRITE_OFF_DOCS" />
          <el-option label="专家简介/串场" value="EXPERT_PROFILE" />
          <el-option label="专家列表" value="EXPERT_LIST" />
          <el-option label="会议发票" value="MEETING_INVOICE" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="historyRows">
      <el-table-column prop="versionNo" label="版本" width="90" />
      <el-table-column prop="actionType" label="动作" width="100" :formatter="statusFormatter" />
      <el-table-column prop="remark" label="备注" width="180" />
      <el-table-column prop="createdAt" label="时间" width="180" />
      <el-table-column label="操作" width="120">
        <template #default="{ $index }">
          <el-button size="small" @click="$emit('comparePrevious', $index)">对比上一版本</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="contentJson" label="内容快照(JSON)" />
    </el-table>
    <div v-if="diffRows.length > 0" class="mt-md">
      <div style="font-weight: 600; margin-bottom: 8px">差异明细</div>
      <el-table :data="diffRows">
        <el-table-column prop="field" label="字段" width="260" />
        <el-table-column prop="previous" label="上一版本" />
        <el-table-column prop="current" label="当前版本" />
      </el-table>
    </div>
  </el-dialog>
</template>
