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

const visible = defineModel<boolean>({ required: true });

defineProps<{
  currentMeetingDetail: any | null;
  meetingChangeLogs: any[];
  toYuan: (cent?: number) => string;
  toZhStatus: (value: unknown) => string;
  toZhAuditNode: (value: unknown) => string;
  canInvoiceConfig: boolean;
  canChangeLogRead: boolean;
}>();

defineEmits<{
  "open-invoice-config": [];
}>();
</script>

<template>
  <el-drawer v-model="visible" title="会议详情" :size="DRAWER_SIZE.xl" destroy-on-close>
    <div class="mb-md" v-if="canInvoiceConfig && currentMeetingDetail">
      <el-button type="primary" plain @click="$emit('open-invoice-config')">发票模块动态配置</el-button>
    </div>
    <el-descriptions :column="1" border v-if="currentMeetingDetail">
      <!-- <el-descriptions-item label="会议ID">{{ currentMeetingDetail.id || "-" }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="项目ID">{{ currentMeetingDetail.projectId || "-" }}</el-descriptions-item> -->
      <el-descriptions-item label="项目名称">{{ currentMeetingDetail.projectName || "-" }}</el-descriptions-item>
      <el-descriptions-item label="会议主题">{{ currentMeetingDetail.topic || "-" }}</el-descriptions-item>
      <el-descriptions-item label="会议类别">{{ currentMeetingDetail.meetingCategory || "-" }}</el-descriptions-item>
      <el-descriptions-item label="会议形式">{{ currentMeetingDetail.meetingForm || "-" }}</el-descriptions-item>
      <el-descriptions-item label="会议地点">{{ currentMeetingDetail.location || "-" }}</el-descriptions-item>
      <el-descriptions-item label="会议时间">{{ currentMeetingDetail.startTime || "-" }} ~ {{ currentMeetingDetail.endTime || "-" }}</el-descriptions-item>
      <el-descriptions-item label="预算(元)">{{ toYuan(currentMeetingDetail.budgetCent) }}</el-descriptions-item>
      <el-descriptions-item label="劳务占比">{{ currentMeetingDetail.laborRatio ?? 0 }}</el-descriptions-item>
      <el-descriptions-item label="餐费占比">{{ currentMeetingDetail.cateringRatio ?? 0 }}</el-descriptions-item>
      <el-descriptions-item label="会议状态">{{ toZhStatus(currentMeetingDetail.status) }}</el-descriptions-item>
      <el-descriptions-item label="审核状态">{{ toZhStatus(currentMeetingDetail.auditStatus) }}</el-descriptions-item>
      <!-- <el-descriptions-item label="当前审核节点">{{ toZhAuditNode(currentMeetingDetail.currentAuditNode) }}</el-descriptions-item>
      <el-descriptions-item label="当前审核人">
        {{ currentMeetingDetail.currentAuditorUserName || currentMeetingDetail.currentAuditorName || "-" }}
      </el-descriptions-item> -->
    </el-descriptions>
    <el-divider v-if="canChangeLogRead">变更记录</el-divider>
    <el-table v-if="canChangeLogRead" :data="meetingChangeLogs" empty-text="暂无数据">
      <el-table-column prop="fieldName" label="字段/动作" width="180" />
      <el-table-column prop="changeType" label="动作编码" width="200" />
      <el-table-column prop="beforeValue" label="变更前" />
      <el-table-column prop="afterValue" label="变更后" />
      <el-table-column prop="relatedUserName" label="关联人员" width="140" />
      <el-table-column prop="operatorUserName" label="操作人" width="140" />
      <el-table-column prop="remark" label="备注" width="160" />
      <el-table-column prop="createdAt" label="时间" width="180" />
    </el-table>
  </el-drawer>
</template>
