<template>
    <el-dialog :model-value="modelValue" class="admin-order-detail-dialog" width="900px" :close-on-click-modal="true"
        top="5vh" @update:model-value="(v) => $emit('update:modelValue', v)" @open="onOpen" @closed="cleanupPreview">
        <div class="body-wrap" v-loading="loading">
            <div class="body-header">
                <div class="body-title">{{ $t('modal.detail') }}</div>
                <img src="@/assets/image/close-btn.svg" alt="" class="close-btn" @click="closeDialog" />
            </div>


            <div v-if="detail.id" class="detail-container">
                <!-- 第一行：4个 -->
                <div class="detail-row row-4">
                    <div class="detail-item">
                        <div class="label">工单号</div>
                        <div class="value">{{ detail.orderNo }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="label">当前状态</div>
                        <div class="value">{{ detail.status }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="label">优先级</div>
                        <div class="value">{{ detail.priority }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="label">服务类型</div>
                        <div class="value">{{ detail.serviceType }}</div>
                    </div>
                </div>
                <!-- 第二行：1个 -->
                <div class="detail-row row-1">
                    <div class="detail-item">
                        <div class="label">问题名称</div>
                        <div class="value">{{ detail.title }}</div>
                    </div>
                </div>
                <!-- 第三行：1个 -->
                <div class="detail-row row-1">
                    <div class="detail-item">
                        <div class="label">问题描述</div>
                        <div class="value" style="max-height: 300px; overflow: auto;">
                            <div class="html-content" v-html="detail.description || '—'"></div>
                        </div>
                    </div>
                </div>
                <!-- 第四行：1个 -->
                <div class="detail-row row-1">
                    <div class="detail-item">
                        <div class="label">附件</div>
                        <div class="value">
                            <el-empty style="padding:0;" v-if="!detail.attachments?.length"
                                :description="$t('orderDetail.noAttachment')" :image-size="80" />
                            <div v-else class="files">
                                <el-button v-for="(f, i) in detail.attachments" :key="i" link type="primary"
                                    class="file-item" @click="viewReport(f.filePath, f.fileName)">
                                    <el-icon>
                                        <Document />
                                    </el-icon>{{ f.fileName }}
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第五行：4个 -->
                <div class="detail-row row-4">
                    <div class="detail-item">
                        <div class="label">提出医院</div>
                        <div class="value">{{ detail.hospitalName || '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="label">提出科室</div>
                        <div class="value">{{ detail.department || '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="label">提出人员</div>
                        <div class="value">{{ detail.submitter || '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="label">提交时间</div>
                        <div class="value">{{ detail.createdAt?.split('T').join(' ') || '-' }}</div>
                    </div>
                </div>
            </div>


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

        </div>

        <div class="body-footer">
            <el-button type="primary" plain style="margin-left:auto" @click="closeDialog">
                取消
            </el-button>
            <el-button v-if="detail.status !== '已完成'" type="primary" @click="editVisible = true">
                {{ $t('btn.edit') }}
            </el-button>
        </div>

        <!-- 编辑工单弹窗（复用公共 OrderFormDialog，mode='edit'） -->
        <OrderFormDialog v-model="editVisible" mode="edit" :hospitals="hospitals" :order-data="detail"
            :submitting="editSubmitting" @submit="onEditSubmit" />
        <!-- 福建弹窗 -->
        <FilePreviewDialog :visible="previewVisible" :blob-url="previewUrl" :blob="previewBlob" :file-name="previewName"
            :file-type="previewType" @update:visible="(v) => (previewVisible = v)" @close="cleanupPreview"
            @download="onPreviewDownload" />
    </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import { Document } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import {
    getAdminOrderDetail,
    getAdminHospitals,
    getUploadFile,
    updateAdminOrder,
} from "@/service/modular/admin";
import FilePreviewDialog from "@/components/FilePreviewDialog.vue";
import OrderFormDialog from "./OrderFormDialog.vue";

const { t: $t } = useI18n();

const props = defineProps({
    modelValue: { type: Boolean, default: false },
    orderId: { type: [String, Number], default: "" },
});
const emit = defineEmits(["update:modelValue", "updated"]);

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 () => {
    if (!props.orderId) return;
    loading.value = true;
    try {
        detail.value = await getAdminOrderDetail(props.orderId);
    } finally {
        loading.value = false;
    }
};

const onOpen = () => {
    loadDetail();
};

watch(
    () => props.orderId,
    () => {
        if (props.modelValue) loadDetail();
    },
);

const closeDialog = () => emit("update:modelValue", false);

const previewVisible = ref(false);
const previewUrl = ref("");
const previewBlob = ref(null);
const previewName = ref("");
const previewType = ref(""); // 'pdf' | 'image' | ''

const cleanupPreview = () => {
    if (previewUrl.value) {
        URL.revokeObjectURL(previewUrl.value);
        previewUrl.value = "";
    }
    previewBlob.value = null;
    previewName.value = "";
    previewType.value = "";
};

// 根据文件名/扩展名+blob 的 mime 判断文件类型
const getFileType = (fileName, blob) => {
    const name = String(fileName || "");
    const ext = name.split(".").pop()?.toLowerCase() || "";
    const mime = blob?.type || "";
    if (ext === "pdf" || mime === "application/pdf") return "pdf";
    if (
        ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext) ||
        (mime && mime.startsWith("image/"))
    ) {
        return "image";
    }
    return "other";
};

// 浏览器直接下载 blob（指定文件名）
const downloadBlob = (blob, fileName) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName || "download";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(url), 0);
};

// FilePreviewDialog 下载按钮回调
const onPreviewDownload = ({ blob, fileName }) => {
    if (!blob) return;
    downloadBlob(blob, fileName);
};

const viewReport = async (attachmentPath, originalName) => {
    if (!attachmentPath) return;
    const path = String(attachmentPath);
    const downloadName = originalName || path;
    try {
        const blob = await getUploadFile(path);
        const type = getFileType(downloadName, blob);
        // PDF / 图片走预览弹窗（PDF 走 vue-pdf-embed），其他格式直接下载
        if (type === "pdf" || type === "image") {
            cleanupPreview();
            previewBlob.value = blob;
            previewUrl.value = URL.createObjectURL(blob);
            previewName.value = downloadName;
            previewType.value = type;
            previewVisible.value = true;
        } else {
            downloadBlob(blob, downloadName);
        }
    } catch (e) {
        ElMessage.error(e?.message || $t('msg.failed'));
    }
};

// ============== 编辑工单 ==============
const hospitals = ref([]);
const loadHospitals = async () => {
    try {
        const res = await getAdminHospitals({ page: 1, pageSize: 1000 });
        hospitals.value = res?.list || [];
    } catch (_) {
        hospitals.value = [];
    }
};

const editVisible = ref(false);
const editSubmitting = ref(false);

const onEditSubmit = async ({ formData }) => {
    editSubmitting.value = true;
    try {
        await updateAdminOrder(props.orderId, formData);
        ElMessage.success($t("msg.editSuccess"));
        editVisible.value = false;
        loadDetail();
        emit("updated");
    } finally {
        editSubmitting.value = false;
    }
};

// 首次打开时加载医院列表
watch(
    () => props.modelValue,
    (v) => {
        if (v && hospitals.value.length === 0) {
            loadHospitals();
        }
    },
);
</script>

<style lang="scss">
.admin-order-detail-dialog {
    max-width: 90vw;
    min-width: 70vw;

    .body-wrap {
        padding: 24px;

        .body-header {
            margin-bottom: 16px;
        }

        .detail-container {
            .detail-row+.detail-row {
                margin-top: 15px;
            }

            .detail-row {
                display: grid;
                gap: 15px;

                &.row-1 {
                    grid-template-columns: 1fr;
                }

                &.row-4 {
                    grid-template-columns: repeat(4, 1fr);
                }

                .detail-item {
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    .label {
                        font-weight: 400;
                        font-size: 14px;
                        color: #1D2129;
                        width: 4em;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        flex-shrink: 0;
                        flex-grow: 0;
                    }

                    .value {
                        flex-shrink: 1;
                        flex-grow: 1;
                        font-weight: 400;
                        font-size: 14px;
                        color: #666666;
                        padding: 10px;
                        background: #F8F8F8;
                        border-radius: 8px 8px 8px 8px;
                        border: 1px solid #E0E0E0;

                        .html-content {

                            background: #fafafa;
                            padding: 12px;
                            border-radius: 4px;
                            min-height: 60px;
                            line-height: 1.6;
                            max-width: 100%;

                            img {
                                max-width: 100% !important;
                            }
                        }
                    }
                }
            }
        }
    }
}





.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;

    .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;
    }
}



.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;
}

.preview-iframe {
    width: 100%;
    height: 80vh;
    border: 0;
}

.preview-image {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    margin: 0 auto;
    object-fit: contain;
}
</style>