<template>
    <view class="p-28 bg-white rounded-xl">
        <voluntary-result-title title="专业报录比">
            <template #right>
                <ie-picker v-model="year" :list="years" icon="arrow-down" width="" color="text-primary"
                           icon-color="primary"/>
            </template>
        </voluntary-result-title>
        <view class="pt-28 px-100 flex justify-between items-center">
            <view class="flex flex-col items-center gap-18">
                <view class="px-25 py-10 bg-primary text-white font-bold text-28 rounded">报考人数</view>
                <view class="text-60 text-fore-title">{{currentHistory.application||'-'}}</view>
            </view>
            <view class="flex flex-col items-center gap-18">
                <view class="h-48"></view>
                <view class="text-60 text-fore-title">:</view>
            </view>
            <view class="flex flex-col items-center gap-18">
                <view class="px-25 py-10 bg-primary text-white font-bold text-28 rounded">计划人数</view>
                <view class="text-60 text-fore-title">{{currentHistory.admission||'-'}}</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} from "@/types/voluntary";

const result = inject(VOLUNTARY_RESULT) || ref({} as VoluntaryResult)
const historyList = computed(() => result?.value.histories || [])
const years = computed(() => historyList.value.map(h => ({label: h.year + '年', value: h.year})))
const year = ref<string | number>('')
const currentHistory = computed(() => historyList.value.find(h => h.year == year.value) || {})

watch(historyList, (list) => {
    if (list.length) {
        year.value = list[0].year
    }
}, {immediate: true})
</script>

<style scoped>

</style>