<template>
  <el-dialog v-model="dialogShow" title="申诉审核" width="70%" class="appeal-review-dialog" @close="handleClose">
    <el-descriptions border :column="1" label-width="140px" class="review-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 type="primary" @click="handleApprove"> 同意 </el-button>
        <el-button type="danger" @click="handleReject"> 驳回 </el-button>
        <el-button @click="handleClose"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

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

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 APPROVE_STATUS = 1;
const REJECT_STATUS = 2;

const currentStatus = computed(() => {
  const rawStatus = detailData.value?.status;
  return statusMeta.find(item => item.value == rawStatus);
});

const emit = defineEmits<{
  submit: [{ status: number; reviewReasons: string }];
  close: [];
}>();

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

const handleApprove = async () => {
  try {
    await ElMessageBox.confirm("确认同意该申诉吗？", "确认操作", {
      confirmButtonText: "确认同意",
      cancelButtonText: "取消",
      type: "success"
    });
    emit("submit", { status: APPROVE_STATUS, reviewReasons: "" });
  } catch (error) {}
};

const handleReject = async () => {
  try {
    const { value } = await ElMessageBox.prompt("请输入驳回原因", "驳回确认", {
      inputPlaceholder: "请输入驳回原因",
      confirmButtonText: "确认驳回",
      cancelButtonText: "取消",
      inputValidator: val => {
        if (!val || !val.trim()) return "请输入驳回原因";
        return true;
      }
    });
    emit("submit", { status: REJECT_STATUS, reviewReasons: value.trim() });
  } catch (error) {}
};

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

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

<style scoped lang="scss">
.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>
