<script lang="ts" setup>
const props = defineProps({
    schoolDetail: {
        type: Object,
        default: () => ({
            childdto: {
                historicalScores: [],
                busQuotas: []
            },

        })
    }
})

const scoreColumns = [
    {
        title: '年份',
        prop: 'year',
        width: '33%',
        align: "center"
    },
    {
        title: '招生计划',
        prop: 'planTotal',
        width: '33%',
        align: "center"

    },
    {
        title: '录取分数',
        prop: 'score',
        width: '33%',
        align: "center"
    },
] as const


const partialColumns = [
    {
        title: '院校名称',
        prop: 'name',
        width: '54%',
        align: "left"
    },
    {
        title: '计划数',
        prop: 'planTotal',
        width: '23%',
        align: "center"

    },
    {
        title: '录取分数',
        prop: 'score',
        width: '23%',
        align: "center"
    },
] as const

const partialData = props.schoolDetail.childdto.busQuotas || []
const scoreData = props.schoolDetail.childdto.historicalScores || []

</script>

<template>
    <view class="bg-[#f8f8f8]">
        <view class="bg-white flex flex-col px-[30rpx] py-[20rpx]">
            <view class="text-[#000] font-500 text-[30rpx] mb-[10rpx]">历届分数</view>
            <sar-table bordered>
                <sar-table-row>
                    <sar-table-cell v-for="item in scoreColumns" :key="item.prop" bold :width="item.width">
                        <view
                            :class="`${item.align === 'center' ? '' : 'pl-[20rpx]'} py-[13rpx] text-[#333] text-[24rpx] font-500 bg-[#F3F4F8]`"
                            :style="{ 'text-align': item.align }">{{ item.title }}</view>
                    </sar-table-cell>
                </sar-table-row>
                <sar-table-row v-for="record in scoreData" :key="record.id">
                    <sar-table-cell v-for="item in scoreColumns" :key="item.prop" :width="item.width">
                        <view
                            :class="`${item.align === 'center' ? '' : 'pl-[20rpx]'} text-[24rpx] text-[#333] py-[13rpx]`"
                            :style="{ 'text-align': item.align }">{{ record[item.prop] }}</view>
                    </sar-table-cell>
                </sar-table-row>
                <sar-table-row v-if="scoreData.length === 0">
                    <sar-table-cell :colspan="scoreColumns.length">
                        <view class="text-center text-[24rpx] text-[#999] py-[20rpx]">暂无数据</view>
                    </sar-table-cell>
                </sar-table-row>
            </sar-table>
        </view>

        <view class="mt-[20rpx] bg-white flex flex-col px-[30rpx] py-[20rpx]">
            <view class="text-[#000] font-500 text-[30rpx] mb-[10rpx]">指标生</view>
            <sar-table bordered>
                <sar-table-row>
                    <sar-table-cell v-for="item in partialColumns" :key="item.prop" bold :width="item.width">
                        <view
                            :class="`${item.align === 'center' ? '' : 'pl-[20rpx]'} py-[13rpx] text-[#333] text-[24rpx] font-500 bg-[#F3F4F8]`"
                            :style="{ 'text-align': item.align }">{{ item.title }}</view>
                    </sar-table-cell>
                </sar-table-row>
                <sar-table-row v-for="record in partialData" :key="record.id">
                    <sar-table-cell v-for="item in partialColumns" :key="item.prop" :width="item.width">
                        <view
                            :class="`${item.align === 'center' ? '' : 'pl-[20rpx]'} text-[24rpx] text-[#333] py-[13rpx]`"
                            :style="{ 'text-align': item.align }">{{ record[item.prop] }}</view>
                    </sar-table-cell>
                </sar-table-row>
                <sar-table-row v-if="partialData.length === 0">
                    <sar-table-cell :colspan="scoreColumns.length">
                        <view class="text-center text-[24rpx] text-[#999] py-[20rpx]">暂无数据</view>
                    </sar-table-cell>
                </sar-table-row>
            </sar-table>
        </view>
    </view>
</template>
