<script setup>
import { computed, onMounted } from 'vue';
import { useRiskNotifier } from '@/composables/useRiskNotifier';

const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    },
    apiId: {
        type: String,
        default: '',
    },
    index: {
        type: Number,
        default: 0,
    },
    notifyRiskStatus: {
        type: Function,
        default: () => { },
    },
});

// 导入图片图标
import rkpmIcon from '@/assets/images/report/rkpm.png';
import zymcIcon from '@/assets/images/report/zymc.png';
import xxxsIcon from '@/assets/images/report/xxxs.png';
import xxlxIcon from '@/assets/images/report/xxlx.png';
import bysjIcon from '@/assets/images/report/bysj.png';
import xlIcon from '@/assets/images/report/xl.png';


// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
    // 学历信息不算风险，始终返回100分（最安全）
    return 100;
});

// 使用 composable 通知父组件风险评分
useRiskNotifier(props, riskScore);

// 暴露给父组件
defineExpose({
    riskScore
});
onMounted(() => {
    console.log("data", props.data);
});
// 格式化日期，从YYYYMM格式转换为YYYY年MM月格式
const formatDate = (dateStr) => {
    if (!dateStr || dateStr.length !== 6) return "未知";

    const year = dateStr.substring(0, 4);
    const month = dateStr.substring(4, 6);

    return `${year}年${month}月`;
};

// 获取学历等级的描述
const getEducationLevelDesc = (level) => {
    const descriptions = {
        "专科": "专科学历是高等教育的重要组成部分，培养具有专业知识和技能的应用型人才。",
        "本科": "本科学历是高等教育的基础学位，培养具有系统专业知识和基本技能的高级人才。",
        "硕士": "硕士学位是较高层次的学位，培养具有较深厚理论基础和专业技能的高级专门人才。",
        "博士": "博士学位是最高学位，培养能够独立从事科学研究工作、具有创新能力的高级专门人才。",
    };
    return descriptions[level] || "";
};

// 根据学校属性获取徽章配置
const getSchoolBadges = () => {
    const badges = [];

    if (props.data.isProject985 === "是") {
        badges.push({
            text: "985院校",
            class: "bg-amber-500 text-white",
            icon: "🏆"
        });
    }

    if (props.data.isProject211 === "是") {
        badges.push({
            text: "211院校",
            class: "bg-blue-500 text-white",
            icon: "⭐"
        });
    }

    if (props.data.isDoubleFirstClass === "是") {
        badges.push({
            text: "双一流",
            class: "bg-green-500 text-white",
            icon: "✨"
        });
    }

    return badges;
};

// 获取学校类型徽章样式
const getSchoolTypeBadgeClass = (type) => {
    const typeClasses = {
        "综合": "bg-blue-50 text-blue-700 border-blue-300",
        "理工": "bg-purple-50 text-purple-700 border-purple-300",
        "农业": "bg-green-50 text-green-700 border-green-300",
        "医学": "bg-red-50 text-red-700 border-red-300",
        "师范": "bg-yellow-50 text-yellow-700 border-yellow-300",
        "财经": "bg-cyan-50 text-cyan-700 border-cyan-300",
        "艺术": "bg-pink-50 text-pink-700 border-pink-300",
    };
    return typeClasses[type] || "bg-gray-50 text-gray-700 border-gray-300";
};

// 获取软科排名样式
const getRankingClass = () => {
    if (!props.data.Ranking) return "bg-gray-50 text-gray-700";

    // 解析排名范围 (例如: "151-155")
    const match = props.data.Ranking.match(/(\d+)-(\d+)/);
    if (match) {
        const minRank = parseInt(match[1]);
        if (minRank <= 50) return "bg-green-50 text-green-700 border-green-300";
        if (minRank <= 100) return "bg-blue-50 text-blue-700 border-blue-300";
        if (minRank <= 200) return "bg-yellow-50 text-yellow-700 border-yellow-300";
    }
    return "bg-gray-50 text-gray-700 border-gray-300";
};

// 判断是否有数据
const hasData = computed(() => {
    return props.data && Object.keys(props.data).length > 0;
});

// 获取徽章列表
const schoolBadges = computed(() => getSchoolBadges());
</script>

<template>
    <div v-if="hasData" class="card max-w-4xl mx-auto">
        <!-- 头部区域 -->
        <div class="mb-6">
            <!-- 学历等级标题 -->
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 flex items-center justify-center">
                        <img :src="xlIcon" alt="学历图标" class="w-12 h-12" />
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">{{ data.educationLevel }}学历</h2>
                        <p class="text-sm text-gray-500">Education Information</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="space-y-4">
            <!-- 软科排名 -->
            <div v-if="data.Ranking"
                class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-200">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 flex items-center justify-center flex-shrink-0">
                        <img :src="rkpmIcon" alt="软科排名" class="w-8 h-8" />
                    </div>
                    <div class="flex-1">
                        <div class="text-sm text-gray-600 mb-1">软科排名</div>
                        <div
                            :class="['inline-block px-3 py-1 rounded-full text-sm font-medium border', getRankingClass()]">
                            第 {{ data.Ranking }} 名
                        </div>
                    </div>
                </div>
            </div>

            <!-- 学校徽章 -->
            <div v-if="schoolBadges.length > 0" class="flex gap-2 flex-wrap">
                <div v-for="(badge, index) in schoolBadges" :key="index"
                    :class="['inline-flex items-center gap-1 px-4 py-2 rounded-lg text-sm font-medium shadow-sm', badge.class]">
                    <span>{{ badge.icon }}</span>
                    <span>{{ badge.text }}</span>
                </div>
            </div>

            <!-- 详细信息卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- 专业信息 -->
                <div v-if="data.major"
                    class="bg-gray-50 rounded-lg p-4 border border-gray-200 hover:border-blue-300 transition-colors">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">
                            <img :src="zymcIcon" alt="专业名称" class="w-8 h-8" />
                        </div>
                        <div class="flex-1">
                            <div class="text-sm text-gray-600 mb-1">专业名称</div>
                            <div class="text-base font-medium text-gray-900">{{ data.major }}</div>
                        </div>
                    </div>
                </div>

                <!-- 学校类型 -->
                <div v-if="data.schoolType"
                    class="bg-gray-50 rounded-lg p-4 border border-gray-200 hover:border-blue-300 transition-colors">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">
                            <img :src="xxlxIcon" alt="学校类型" class="w-8 h-8" />
                        </div>
                        <div class="flex-1">
                            <div class="text-sm text-gray-600 mb-1">学校类型</div>
                            <div
                                :class="['inline-block px-3 py-1 rounded text-sm font-medium border', getSchoolTypeBadgeClass(data.schoolType)]">
                                {{ data.schoolType }}类院校
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 学习形式 -->
                <div v-if="data.educationType"
                    class="bg-gray-50 rounded-lg p-4 border border-gray-200 hover:border-blue-300 transition-colors">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">
                            <img :src="xxxsIcon" alt="学习形式" class="w-8 h-8" />
                        </div>
                        <div class="flex-1">
                            <div class="text-sm text-gray-600 mb-1">学习形式</div>
                            <div class="text-base font-medium text-gray-900">{{ data.educationType }}</div>
                        </div>
                    </div>
                </div>

                <!-- 毕业时间 -->
                <div v-if="data.graduationDate"
                    class="bg-gray-50 rounded-lg p-4 border border-gray-200 hover:border-blue-300 transition-colors">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">
                            <img :src="bysjIcon" alt="毕业时间" class="w-8 h-8" />
                        </div>
                        <div class="flex-1">
                            <div class="text-sm text-gray-600 mb-1">毕业时间</div>
                            <div class="text-base font-medium text-gray-900">{{ formatDate(data.graduationDate) }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 学历描述 -->
            <div v-if="data.educationLevel"
                class="mt-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-5 border border-blue-200">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0 mt-1">
                        <span class="text-white text-xl">💡</span>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <h3 class="text-lg font-semibold text-gray-900">学历说明</h3>
                            <span class="px-2 py-1 bg-blue-500 text-white text-sm rounded">信息</span>
                        </div>
                        <p class="text-gray-700 leading-relaxed">
                            {{ getEducationLevelDesc(data.educationLevel) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 无数据状态 -->
    <div v-else class="card max-w-2xl mx-auto">
        <div class="flex flex-col items-center py-12 text-center">
            <div class="w-20 h-20 flex items-center justify-center mb-4">
                <img :src="xlIcon" alt="学历图标" class="w-20 h-20 opacity-40" />
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无学历信息</h3>
            <p class="text-sm text-gray-500 max-w-md">
                系统中暂无相关的学历信息记录。这可能是因为学历信息未公开或数据正在同步中。
            </p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.card {
    padding: 1.5rem;
    box-shadow: 0px 0px 24px 0px #3F3F3F0F;
    border-radius: 12px;
    background: white;
}

/* 添加一些动画效果 */
.bg-gray-50 {
    transition: all 0.3s ease;
}

.bg-gray-50:hover {
    transform: translateY(-2px);
}
</style>
