<template>
  <el-dialog v-model="dialogShow" title="申诉详情" width="70%" class="appeal-detail-dialog" @close="handleClose">
    <el-descriptions border :column="1" label-width="140px" class="detail-descriptions">
      <el-descriptions-item label="订单编号">
        {{ detailData.orderNumber }}
      </el-descriptions-item>
      <el-descriptions-item label="用户名称">
        {{ detailData.userName }}
      </el-descriptions-item>
      <el-descriptions-item label="用户电话">
        {{ detailData.userPhone }}
      </el-descriptions-item>
      <el-descriptions-item label="用户评价">
        {{ detailData.reviewContent }}
      </el-descriptions-item>
      <el-descriptions-item label="评价图片">
        <div class="image-grid">
          <el-image
            v-for="(img, index) in detailData.reviewImgList"
            :key="`${detailData.id}-${index}`"
            :src="img"
            :preview-src-list="detailData.reviewImgList"
            fit="cover"
          />
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="律师姓名">
        {{ detailData.lawyerName }}
      </el-descriptions-item>
      <el-descriptions-item label="律师电话">
        {{ detailData.lawyerPhone }}
      </el-descriptions-item>
      <el-descriptions-item label="申诉理由">
        {{ detailData.appealReason }}
      </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="申诉图片">
        <div class="image-grid">
          <el-image
            v-for="(img, index) in detailData.imgList"
            :key="`${img}-${index}`"
            :src="img"
            :preview-src-list="detailData.imgList"
            fit="cover"
          />
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="申诉时间">
        {{ detailData.appealTime }}
      </el-descriptions-item>
      <el-descriptions-item v-if="detailData.appealReviewTime" label="审核时间">
        {{ detailData.appealReviewTime }}
      </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: "success" },
  { value: 2, label: "已驳回", tagType: "danger" }
] as const;

const resolveNumber = (value?: number | string | null) => {
  if (value === null || value === undefined || value === "") return undefined;
  return typeof value === "string" ? Number(value) : value;
};
const getStatusMeta = (status?: number) => statusMeta.find(item => item.value === status);

const statusValue = computed(() =>
  resolveNumber(detailData.value.status ?? detailData.value.processingStatus ?? detailData.value.appealStatus)
);
const currentStatus = computed(() => getStatusMeta(statusValue.value));

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-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}
.image-grid :deep(.el-image) {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 8px;
}
</style>
