<template>
    <BaseReport 
        v-if="isDone" 
        :order-id="orderId" 
        :order-no="orderNo" 
        :feature="feature"
        :reportData="reportData" 
        :reportParams="reportParams" 
        :reportName="reportName" 
        :reportDateTime="reportDateTime"
        :isEmpty="isEmpty" 
        :isDone="isDone" 
        :is-example="true"
    />
    <div v-else class="loading-container">
        <div class="loading-spinner"></div>
        <p>加载中，请稍候...</p>
    </div>
</template>

<script setup>

const route = useRoute();
const feature = ref(""); // 保留但可以设置任意值，不影响功能
const reportData = ref([]);
const reportParams = ref({
    name: "张三",
    id_card: "3203**199102***152",
    mobile: "158****2970"
});
const reportName = ref("个人风险报告");
const reportDateTime = ref(new Date().toLocaleString('zh-CN'));
const isEmpty = ref(false);
const isDone = ref(false);
const orderId = ref("");
const orderNo = ref("");

onMounted(async () => {
    await loadExampleData();
});

const loadExampleData = async () => {
    try {
        // 从 public 目录加载示例数据
        const response = await fetch('/example.json');
        const data = await response.json();
        
        if (Array.isArray(data) && data.length > 0) {
            // 直接使用任意产品类型（不影响显示）
            feature.value = 'preloanbackgroundcheck';
            
            // 排序数据
            reportData.value = data.sort((a, b) => {
                return (a.feature?.sort || 0) - (b.feature?.sort || 0);
            });
            
            isEmpty.value = false;
            isDone.value = true;
        } else {
            isEmpty.value = true;
            isDone.value = true;
        }
    } catch (error) {
        console.error('加载示例数据失败:', error);
        isEmpty.value = true;
        isDone.value = true;
    }
};
</script>

<style lang="scss" scoped>
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;

    .loading-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
    }

    p {
        color: #666;
        font-size: 16px;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
