<template>
    <view class="page-content">
        <large-header v-bind="reportTitleBinding" :scroll-top="scrollTop"/>
        <view class="rounded-t-2xl bg-white" style="margin-top: -60px">
            <profession-analysis/>
            <view class="h-15 bg-slate-100"/>
            <hot-profession/>
            <view class="h-15 bg-slate-100"/>
            <analysis-summary/>
        </view>
    </view>
</template>

<script>
import LargeHeader from "@/pages/ie/components/large-header.vue";
import ProfessionAnalysis from "./components/profession-analysis.vue";
import HotProfession from "./components/hot-profession.vue";
import AnalysisSummary from "./components/analysis-summary.vue";
import AIFormCommonStyle from "@/pages/ie/components/AIFormCommonStyle";
import {useProvideTransfer} from "@/hooks/useTransfer";
import {useCacheStore} from "@/hooks/useCacheStore";
import {useProvidePageScroll} from "@/hooks/usePageScrollInjection";
import {useProvideMajorTreeService} from "@/pages/ie/hooks/useMajorTreeInjection";
import {universityDetail} from "@/api/webApi/collegemajor";
import {findTreeNode} from "@/utils/tree-helper";

export default {
    mixins: [AIFormCommonStyle],
    components: {LargeHeader, ProfessionAnalysis, HotProfession, AnalysisSummary},
    setup() {
        const {prevData} = useProvideTransfer()
        const scrollTop = useProvidePageScroll()
        const {dispatchCache} = useCacheStore()
        const {majorTree} = useProvideMajorTreeService()

        return {
            scrollTop,
            prevData,
            majorTree,
            dispatchCache
        }
    },
    watch: {
        'majorTree': 'fillPageData',
        'prevData': 'fillPageData'
    },
    async mounted() {
        await this.prevInit()
        await this.initData()
    },
    methods: {
        async prevInit() {

        },
        async initData() {
            //  - must have current year
            //  - maybe api need not to fill pageData.details.university
            if (!this.prevData.year) this.prevData.year = '2024'
            for (const u of this.prevData.details) {
                if (u.university?.code && (!u.university.name || !u.professions)) {
                    const payload = {code: u.university.code}
                    const res = await this.dispatchCache(universityDetail, payload)
                    this.$set(u, 'university', res.data.baseInfo)
                    this.$set(u, 'professions', res.data.professions)
                }
            }
        },
        fillPageData() {
            if (!this.majorTree.length || !this.prevData.details?.length) return
            this.prevData.details?.forEach(u => u.majorDetails?.forEach(m => {
                if (!Object.hasOwnProperty.call(m, 'majorName') && m.majorCode) {
                    this.$set(m, 'majorName', findTreeNode(this.majorTree, n => n.code == m.majorCode)?.name)
                }
            }))
        }
    }
}
</script>

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