<template>
    <view class="page-content relative">
        <large-header mode="light" :full-height="80" :title="title" :scroll-top="scrollTop"/>
        <pretty-card/>
        <view class="mx-20 mx-card bg-white overflow-hidden">
            <result-header/>
            <uv-gap height="5" bg-color="var(--border-color)"/>
            <result-tabs :scrollTop="scrollTop"/>
        </view>
        <uv-loading-page :loading="loading"/>
    </view>
</template>

<script>
import PrettyCard from "@/pages/ie/components/card/pretty-card.vue";
import ResultHeader from "./components/result-header.vue";
import ResultTabs from "./components/result-tabs.vue";
import LargeHeader from "@/pages/ie/components/large-header.vue";
import {findTreeNode} from "@/utils/tree-helper";
import {postSingleResult} from "@/api/webApi/ie-voluntary";
import {useTransfer} from "@/hooks/useTransfer";
import {useCacheStore} from "@/hooks/useCacheStore";
import {cacheActions} from "@/hooks/defineCacheActions";
import {universityDetail} from "@/api/webApi/collegemajor";
import {useProvidePageScroll} from "@/hooks/usePageScrollInjection";

export default {
    components: {LargeHeader, PrettyCard, ResultHeader, ResultTabs},
    data() {
        return {
            loading: false,
            title: '院校录取概率结果',
            detail: {},
            majorTree: [],
            result: {}
        };
    },
    setup() {
        const {prevData} = useTransfer()
        const {dispatchCache} = useCacheStore()
        const scrollTop = useProvidePageScroll()

        return {
            prevData,
            scrollTop,
            dispatchCache
        }
    },
    computed: {
        major() {
            return findTreeNode(this.majorTree, m => m.code == this.prevData.majorCode) || {}
        }
    },
    provide() {
        return {
            getPrevData: () => this.prevData,
            getDetail: () => this.detail,
            getMajorTree: () => this.majorTree,
            getMajor: () => this.major,
            getResult: () => this.result
        }
    },
    async mounted() {
        // wait for transfer mixin work completed.
        this.loading = true
        try {
            await this.loadReport();
            await this.loadData();
        } finally {
            this.loading = false
        }
    },
    methods: {
        async loadReport() {
            const res = await postSingleResult(this.prevData)
            this.result = res.data
        },
        async loadData() {
            this.majorTree = await this.dispatchCache(cacheActions.getMajorTree)

            const payload = {code: this.prevData.universityCode}
            const res = await this.dispatchCache(universityDetail, payload)
            this.detail = res.data
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
