<template>
    <view class="mt-28 p-28 rounded-xl bg-white">
        <voluntary-result-title title="测算结果">
            <template #right>
                <view class="w-fit text-23 text-primary border border-solid border-primary rounded-4 px-10 py-4">
                    {{ target.majorName }}
                </view>
            </template>
        </voluntary-result-title>
        <view v-if="target.majorGroup" class="text-23 text-fore-title mt-20">
            专业组：
            <text class="text-primary">{{ target.majorGroup }}</text>
        </view>
        <view class="mt-28 bg-primary-100 p-28 rounded-lg text-24 leading-38 text-fore-title
        flex justify-between items-center gap-20">
            <view class="flex-1">
                根据
                <text class="text-primary">{{ skill.year }}</text>
                年该校录取情况，预估考取本专业需要职业技能分:
            </view>
            <view class="flex flex-col items-center">
                <view>
                    <text class="text-42 text-primary-dark font-bold">{{ skill.skillScore }}</text>
                    分
                </view>
            </view>
        </view>
        <view class="text-23 text-fore-title mt-28">
            录取规则：
            <view class="mt-10 bg-back-light p-28 rounded-lg text-24 leading-38 text-primary">
                {{mergedRules}}
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import VoluntaryResultTitle from "@/pagesOther/pages/voluntary/result/components/plus/voluntary-result-title.vue";
import {VOLUNTARY_RESULT, VOLUNTARY_RULES, VOLUNTARY_TARGET} from "@/types/injectionSymbols";
import {SelectedUniversityMajor, VoluntaryResult, VoluntaryResultSkill} from "@/types/voluntary";

const target = inject(VOLUNTARY_TARGET) || ref({} as SelectedUniversityMajor)
const result = inject(VOLUNTARY_RESULT) || ref({} as VoluntaryResult)
const rules = inject(VOLUNTARY_RULES) || ref([])
const skill = computed(() => result?.value.skill || {} as VoluntaryResultSkill)
const mergedRules = computed(() => rules.value.map(r => r.content).join(' + '))

</script>

<style scoped>

</style>