<template>
    <view class="p-28 bg-white rounded-xl">
        <voluntary-result-title title="职业技能分析"/>
        <view class="mt-20 flex flex-col gap-20">
            <view class="flex items-center justify-between gap-20">
                <view class="flex-1 px-12 py-16 rounded-lg bg-sky-100 text-28 text-fore-title">
                    {{ skill.year }}录取分：{{ skill.enrollScore }}
                </view>
                <view class="flex-1 px-12 py-16 rounded-lg bg-sky-100 text-28 text-fore-title flex items-center">
                    文化素质分
                    <uv-icon name="question-circle" color="primary" custom-class="mx-3" @click="handleCultureTip"/>
                    ：{{ skill.cultureScore }}
                </view>
            </view>
            <view class="bg-back-light p-28 rounded-lg text-24 leading-38 text-fore-title flex justify-between gap-28">
                <view class="flex-1">
                    根据
                    <text class="text-primary">{{ skill.year }}</text>
                    年该校录取情况，预估考取本专业需要职业技能分:
                </view>
                <view class="flex flex-col items-center">
                    <view>
                        <text class="text-36 text-primary">{{ skill.skillScore }}</text>
                        分
                    </view>
                    <view v-if="passedOption" class="flex items-center gap-5">
                        <uv-icon :name="passedOption.icon" :color="passedOption.color" size="14"/>
                        <text :class="passedOption.textColor">{{ passedOption.text }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

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

const result = inject(VOLUNTARY_RESULT) || ref({} as VoluntaryResult)
const skill = computed(() => result?.value.skill || {} as VoluntaryResultSkill)
const passedOption = computed(() => {
    return skill.value.diff < 0 ? {
        icon: 'close-circle-fill',
        color: 'error',
        text: '未达成',
        textColor: 'text-danger'
    } : skill.value.diff > 0 ? {
        icon: 'checkmark-circle-fill',
        color: 'success',
        text: '已达成',
        textColor: 'text-success'
    } : skill.value.diff === 0 ? {
        icon: 'error-circle-fill',
        color: 'warning',
        text: '持平',
        textColor: 'text-warning'
    } : null
})

const handleCultureTip = () => {
    uni.$ie.showModal({
        title: '提示',
        content: skill.value.cultureRule,
        showCancel: false,
        confirmText: '知道了'
    })
}
</script>

<style scoped>

</style>