<template>
  <div class="order-detail" v-loading="loading">
    <el-page-header :icon="ArrowLeft" :content="$t('common.back')" @back="goBack" class="page-header">
      <template #content>
        <span class="page-title">{{ $t('modal.detail') }}</span>
      </template>
    </el-page-header>

    <el-card shadow="never" v-if="detail.id" class="detail-card">
      <template #header>
        <div class="card-header">
          <span class="title">{{ detail.title }}</span>
          <el-tag :type="priorityType(detail.priority)" size="small">{{ detail.priority }}</el-tag>
          <el-tag :type="statusType(detail.status)" size="small">{{ detail.status }}</el-tag>
        </div>
      </template>

      <el-descriptions :column="3" border>
        <el-descriptions-item :label="$t('table.id')">{{ detail.orderNo }}</el-descriptions-item>
        <el-descriptions-item :label="$t('table.type')">{{ detail.serviceType }}</el-descriptions-item>
        <el-descriptions-item :label="$t('table.time')">{{ detail.createdAt }}</el-descriptions-item>
        <el-descriptions-item :label="$t('table.submitter')">{{ detail.submitter }}</el-descriptions-item>
        <el-descriptions-item :label="$t('label.dept')">{{ detail.department }}</el-descriptions-item>
        <el-descriptions-item :label="$t('label.colorTag')">{{ detail.colorTag }}</el-descriptions-item>
      </el-descriptions>

      <div class="section">
        <div class="section-title">{{ $t('label.description') }}</div>
        <div class="html-content" v-html="detail.description || '—'" />
      </div>

      <div class="section">
        <div class="section-title">{{ $t('label.attachment') }} ({{ (detail.attachments || []).length }})</div>
        <el-empty v-if="!detail.attachments?.length" :description="$t('orderDetail.noAttachment')" :image-size="80" />
        <div v-else class="files">
          <el-link
            v-for="(f, i) in detail.attachments"
            :key="i"
            :href="getAttachmentUrl(f.fileName)"
            target="_blank"
            type="primary"
            class="file-item"
          >
            <el-icon><Document /></el-icon>{{ f.fileName }}
          </el-link>
        </div>
      </div>

      <div class="section">
        <div class="section-title">{{ $t('orderDetail.statusChange') }}</div>
        <el-timeline>
          <el-timeline-item
            v-for="(log, i) in detail.logs || []"
            :key="i"
            :timestamp="log.createdAt"
            placement="top"
          >
            <div class="log-title">{{ log.action }} · {{ log.operator }}</div>
            <div class="log-remark">{{ log.remark }}</div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ArrowLeft, Document } from "@element-plus/icons-vue";
import { getHospitalOrderDetail } from "@/service/modular/hospital";
import { getAttachmentUrl } from "@/service/modular/upload";

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const detail = ref({});

const priorityType = (p) => (p === "高" ? "danger" : p === "中" ? "warning" : "info");
const statusType = (s) =>
  ({ 待处理: "warning", 处理中: "primary", 已完成: "success", 已取消: "info" })[s] || "info";

const loadDetail = async () => {
  loading.value = true;
  try {
    detail.value = await getHospitalOrderDetail(route.params.id);
  } finally {
    loading.value = false;
  }
};

const goBack = () => router.back();

onMounted(loadDetail);
</script>

<style scoped lang="scss">
.page-header {
  margin-bottom: 12px;
  .page-title {
    font-size: 16px;
    font-weight: 600;
  }
}
.detail-card {
  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    .title {
      font-size: 16px;
      font-weight: 600;
      margin-right: 8px;
    }
  }
  .section {
    margin-top: 20px;
    .section-title {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 10px;
    }
  }
  .html-content {
    background: #fafafa;
    padding: 12px;
    border-radius: 4px;
    min-height: 60px;
    line-height: 1.6;
  }
  .files {
    display: flex;
    flex-direction: column;
    gap: 8px;
    .file-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
  }
  .log-title {
    font-weight: 600;
  }
  .log-remark {
    color: #606266;
    margin-top: 4px;
  }
}
</style>
