<template>
  <el-dialog v-model="dialogShow" title="举报详情" width="760px" @close="handleClose">
    <el-descriptions :column="2" border class="detail-descriptions">
      <el-descriptions-item label="律师姓名">
        {{ detailData.reportedUserName || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="订单编号">
        {{ detailData.orderNumber || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="举报类型">
        {{ violationDisplay }}
      </el-descriptions-item>
      <el-descriptions-item label="举报人姓名">
        {{ detailData.nickname || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="举报时间">
        {{ detailData.createdTime || "--" }}
      </el-descriptions-item>
      <el-descriptions-item v-if="detailData.processingTime" label="处理时间">
        {{ detailData.processingTime || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="当前状态">
        <el-tag v-if="currentStatus" :type="currentStatus.tagType">
          {{ currentStatus.label }}
        </el-tag>
        <span v-else> -- </span>
      </el-descriptions-item>
      <el-descriptions-item label="处理说明">
        {{ detailData.reportResult || "--" }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="evidence-block" v-if="evidenceList.length">
      <div class="block-title">举报凭证</div>
      <div class="image-grid">
        <el-image
          v-for="(img, index) in evidenceList"
          :key="`${detailData.id}-${index}`"
          :src="img"
          :preview-src-list="evidenceList"
          fit="cover"
        />
      </div>
    </div>

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

<script setup lang="ts">
import { computed, ref } from "vue";

const dialogShow = ref(false);
const detailData = ref<Record<string, any>>({});

const statusMeta = [
  { value: 0, label: "未处理", tagType: "info" },
  { value: 1, label: "违规", tagType: "danger" },
  { value: 2, label: "未违规", tagType: "success" }
] as const;

const violationTypeMeta = [
  { value: 1, label: "服务态度差" },
  { value: 2, label: "专业能力差" },
  { value: 3, label: "响应时间超过24小时" },
  { value: 4, label: "其他原因" }
] as const;

const getStatusMeta = (status?: number) => statusMeta.find(item => item.value == status);
const getViolationMeta = (type?: number | string) => {
  const value = typeof type === "string" ? Number(type) : type;
  return violationTypeMeta.find(item => item.value === value);
};

const parseEvidenceImages = (value: string | string[] | null | undefined) => {
  if (!value) return [];
  if (Array.isArray(value)) return value.filter(Boolean);
  return value
    .split(",")
    .map(url => url.trim())
    .filter(Boolean);
};

const evidenceList = computed(() => parseEvidenceImages(detailData.value.reportEvidenceImg));
const currentStatus = computed(() => getStatusMeta(detailData.value.processingStatus));
const violationDisplay = computed(() => {
  if (detailData.value.violationReason == 4) return detailData.value.otherReasonContent || "其他原因";
  return getViolationMeta(detailData.value.violationReason)?.label || "--";
});

const open = (data: any) => {
  detailData.value = { ...data };
  dialogShow.value = true;
};

const handleClose = () => {
  dialogShow.value = false;
};

defineExpose({
  open,
  close: handleClose
});
</script>

<style scoped lang="scss">
.detail-descriptions {
  margin-bottom: 16px;
}
.block-title {
  margin-bottom: 8px;
  font-weight: 600;
  color: #303133;
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.image-grid :deep(.el-image) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}
</style>
