<template>
    <view class="p-28 bg-white rounded-xl">
        <voluntary-result-title title="概率分析"/>
        <view class="h-220">
            <ie-echart :option="option"/>
        </view>
        <voluntary-result-card tag="评估">
            <view class="flex-1 text-23 leading-38 text-fore-title">
                根据历年数据对比分析，预估目前成绩报考该院校/专业，录取风险属于
                <text :class="rateClass">{{ result.enrollRateText }}</text>
            </view>
        </voluntary-result-card>
    </view>
</template>

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

const option = ref({})
const result = inject(VOLUNTARY_RESULT) || ref({} as VoluntaryResult)

const rateClass = computed(() => {
    switch (result.value.enumPickType) {
        case 'Danger':
            return 'text-danger'
        case 'Normal':
            return 'text-primary'
        case 'Safety':
            return 'text-success'
    }
    return ''
})

const drawRing = (rate: number | null) => {
    const baseGauge = {
        type: 'gauge',
        center: ['50%', '75%'],
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        radius: '150%',
        itemStyle: {
            show: false,
        },
        progress: {
            show: false,
        },
        pointer: {
            show: false,
        },
        anchor: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false,
        },
        detail: {
            show: false,
        },
        title: {
            show: false
        }
    }
    option.value = {
        grid: {
            left: 0,
            right: 0
        },
        series: [
            {
                ...baseGauge,
                radius: '145%',
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        color: [[1, '#e2e2e2']],
                        width: 10
                    }
                }
            },
            {
                ...baseGauge,
                radius: '115%',
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        color: [[1, '#F8F8F8']],
                        width: 2
                    }
                }
            },
            {
                ...baseGauge,
                radius: '150%',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#31A0FC'
                        }, {
                            offset: 1, color: '#70C8FD'
                        }]
                    }
                },
                progress: {
                    show: true,
                    roundCap: true,
                    width: 16
                },
                detail: {
                    show: true,
                    formatter: (v: any) => {
                        return isNaN(v) ? '--' : (v + '%');
                    },
                    color: '#1A1A1A',
                    fontFamily: 'KaTeX_SansSerif',
                    fontWeight: '700',
                    fontSize: 20,
                    offsetCenter: [0, '-28%']
                },
                title: {
                    show: true,
                    color: '#666666',
                    fontSize: 12,
                    offsetCenter: [0, 0],
                },
                data: [
                    {
                        value: rate,
                        name: rate === null ? '无概率' : '录取概率'
                    }
                ]
            },
            {
                ...baseGauge,
                radius: '150%',
                z: 3,
                pointer: {
                    showAbove: true,
                    icon: 'circle',
                    width: 14,
                    offsetCenter: [0, '-60.5%'],
                    itemStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        color: [[1, 'transparent']],
                        width: 10
                    }
                },
                data: [
                    {
                        value: rate
                    }
                ]
            },
            {
                ...baseGauge,
                radius: '150%',
                z: 3,
                pointer: {
                    showAbove: true,
                    icon: 'circle',
                    width: 8,
                    offsetCenter: [0, '-60.5%'],
                    itemStyle: {
                        color: '#31A0FC'
                    }
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        color: [[1, 'transparent']],
                        width: 10
                    }
                },
                data: [
                    {
                        value: rate
                    }
                ]
            }
        ]
    }
}


onMounted(async () => {
    setTimeout(() => drawRing(result.value.enrollRate), 200)
})
</script>

<style scoped>

</style>