<template>
  <el-dialog v-model="dialogShow" title="举报详情" width="70%" class="refund-detail-dialog" @close="handleClose">
    <div v-if="detailData.imageList.length > 0" class="image-gallery">
      <div class="block-title">举报凭证</div>
      <div class="image-grid">
        <div v-for="(url, index) in detailData.imageList" :key="index" class="image-item">
          <el-image
            :src="url"
            :preview-src-list="detailData.imageList"
            fit="cover"
            class="gallery-image"
            :hide-on-click-modal="false"
            :preview-teleported="true"
          />
        </div>
      </div>
    </div>

    <el-descriptions border :column="1" label-width="140px" 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="用户昵称">
        {{ detailData.nickname || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="用户电话">
        {{ detailData.reportedUserName || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="律师姓名">
        {{ detailData.reportedUserName || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="律师电话">
        {{ detailData.reportedUserName || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="举报类型">
        {{ violationDisplay }}
      </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.createdTime || "--" }}
      </el-descriptions-item>
      <el-descriptions-item v-if="detailData.processingTime" label="审核时间">
        {{ detailData.processingTime || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="处理说明">
        {{ detailData.reportResult || "--" }}
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <span class="dialog-footer">
        <el-button @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 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">
.block-title {
  margin-bottom: 8px;
  font-weight: 600;
  color: #303133;
}
.image-gallery {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  .image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .image-item {
      width: 80px;
      height: 80px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        transform: scale(1.05);
      }
      .gallery-image {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 4px;
        :deep(.el-image__inner) {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        :deep(.el-image__error) {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          color: #909399;
          background-color: #f0f2f5;
        }
      }
    }
  }
}
</style>
