<template>
    <view class="p-28 bg-white rounded-xl">
        <voluntary-result-title title="招录数据"/>
        <uv-gap height="15"/>
        <ie-table :table-columns="columns" :data="list" :table-config="tableConf" :header-style="headerStyle"
                  :cell-style="cellStyle">
            <template #diff="{item}">
                <text :class="getDiffOpt(item).clazz">{{ getDiffOpt(item).text }}</text>
            </template>
        </ie-table>
        <uv-gap height="15"/>
        <voluntary-result-card custom-class="flex-col">
            <template #title>
                <view class="flex gap-6 items-end">
                    <voluntary-result-tag tag="录取规则" />
                    <view class="text-primary text-24">（{{recentHistory.year}}年）</view>
                </view>
            </template>
            <view class="flex-1 text-23 leading-38 text-fore-title">{{recentHistory.ruleContent}}</view>
        </voluntary-result-card>
    </view>
</template>

<script setup lang="ts" name="VoluntaryResultHistory">
import _ from "lodash";
import VoluntaryResultTitle from "@/pagesOther/pages/voluntary/result/components/plus/voluntary-result-title.vue";
import {VOLUNTARY_RESULT} from "@/types/injectionSymbols";
import {VoluntaryResult, VoluntaryResultHistory} from "@/types/voluntary";
import VoluntaryResultCard from "@/pagesOther/pages/voluntary/result/components/plus/voluntary-result-card.vue";
import VoluntaryResultTag from "@/pagesOther/pages/voluntary/result/components/plus/voluntary-result-tag.vue";

const result = inject(VOLUNTARY_RESULT) || ref({} as VoluntaryResult)
const columns = [{
    label: '年份',
    prop: 'year'
}, {
    label: '计划',
    prop: 'plan'
}, {
    label: '最低分',
    prop: 'score'
}, {
    label: '线差',
    prop: 'diff',
    slot: 'diff'
}]
const tableConf = {
    defaultValue: '-'
}
const headerStyle = {
    fontSize: '28rpx',
    color: 'var(--fore-title)',
    paddingTop: '15rpx',
    paddingBottom: '15rpx',
    backgroundColor: '#B2E7FF'
}
const cellStyle = {
    fontSize: '26rpx',
    color: 'var(--fore-title)',
    paddingTop: '15rpx',
    paddingBottom: '15rpx'
}

const list = computed(() => result?.value.histories || [])
const recentHistory = computed(() => _.first(list.value) || {} as VoluntaryResultHistory)

const getDiffOpt = (item: VoluntaryResultHistory) => {
    if (item.diff === null || item.diff === undefined) return {text: '-'}
    if (item.diff < 0) return {clazz: 'text-primary', text: '低' + Math.abs(item.diff) + '分'}
    if (item.diff > 0) return {clazz: 'text-primary', text: '高' + Math.abs(item.diff) + '分'}
    if (item.diff === 0) return {clazz: 'text-primary', text: '持平'}
}
</script>

<style scoped>

</style>