<template>
  <el-dialog v-model="dialogVisible" title="详情" width="800px" destroy-on-close @close="handleClose">
    <div v-loading="loading" class="detail-body">
      <template v-if="detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="演出名称">
            {{ detail.name || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            {{ detail.performanceTypeLabel ?? "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="频次">
            {{ detail.frequencyLabel ?? "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="在线状态">
            {{ detail.onlineStatusLabel ?? "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="审核状态">
            {{ detail.auditStatusLabel ?? "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="提交时间">
            {{ detail.submitTime ?? "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间" :span="2">
            {{ detail.auditTime ?? "--" }}
          </el-descriptions-item>
          <el-descriptions-item v-if="detail.auditStatus === 2" label="拒绝原因" :span="2">
            <div class="reject-reason-text">
              {{ detail.auditReason || "--" }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <el-empty v-else-if="!loading" description="暂无数据" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { getPerformanceDetail } from "@/api/modules/performance";
import { AUDIT_STATUS_LABEL, PERFORMANCE_TYPE_LABEL, FREQUENCY_LABEL, type PerformanceRow } from "@/api/modules/performance";

const props = defineProps<{
  modelValue: boolean;
  performanceId: string | number | null;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
}>();

const dialogVisible = ref(props.modelValue);
const loading = ref(false);
const detail = ref<(PerformanceRow & { auditTime?: string }) | null>(null);

watch(
  () => props.modelValue,
  v => {
    dialogVisible.value = v;
    if (v && props.performanceId) fetchDetail();
    else detail.value = null;
  },
  { immediate: true }
);

watch(dialogVisible, v => emit("update:modelValue", v));

async function fetchDetail() {
  if (!props.performanceId) return;
  loading.value = true;
  detail.value = null;
  try {
    const res: any = await getPerformanceDetail(props.performanceId);
    const raw = res?.data ?? res;
    if (!raw) return;
    const d = raw;
    detail.value = {
      id: d.id,
      name: d.performanceName ?? d.name ?? "",
      performanceType: d.performanceType ?? 0,
      performanceTypeLabel: PERFORMANCE_TYPE_LABEL[Number(d.performanceType)] ?? "--",
      frequency: d.performanceFrequency ?? "0",
      frequencyLabel: FREQUENCY_LABEL[String(d.performanceFrequency)] ?? "单次",
      shelfStatus: d.onlineStatus ?? d.shelfStatus ?? 0,
      onlineStatusLabel: (d.onlineStatus ?? d.shelfStatus) === 1 ? "上线" : "--",
      auditStatus: d.reviewStatus ?? d.auditStatus ?? 0,
      auditStatusLabel: AUDIT_STATUS_LABEL[d.reviewStatus ?? d.auditStatus] ?? "--",
      submitTime: d.createdTime ?? d.submitTime ?? d.createTime ?? "--",
      auditReason: d.rejectReason ?? d.auditReason ?? "",
      auditTime: d.auditTime ?? d.reviewTime ?? "--"
    };
  } finally {
    loading.value = false;
  }
}

function handleClose() {
  emit("update:modelValue", false);
}
</script>

<style scoped lang="scss">
.detail-body {
  min-height: 120px;
}
.reject-reason-text {
  word-break: break-word;
  white-space: pre-wrap;
}
</style>
