<template>
    <view class="page-content">
        <large-header v-bind="analysisTitleBinding" :scroll-top="scrollTop"/>
        <pretty-card style="margin-top: -60px"/>
        <view class="mx-20 mx-card bg-white p-20">
            <uv-text v-bind="formGroupBinding" text="专业方向"/>
            <ai-form ref="categoryForm" :model="form" :rules="rules">
                <template #prefix>
                    <ai-form-item prop="majorCategory">
                        <major-category-picker v-model="form.majorCategory"/>
                    </ai-form-item>
                </template>
            </ai-form>
        </view>
        <view class="m-20 fx-col gap-20">
            <college-major-picker v-for="m in form.universities" ref="picker" :num="m.num"/>
        </view>
        <view class="m-20 fx-row gap-20">
            <uv-button text="我的志愿表" v-bind="plainBtnBinding" @click="handleMyVoluntary"/>
            <uv-button text="生成分析" v-bind="gradientBtnBinding" @click="handleNext"/>
        </view>
        <uv-gap height="10"/>
    </view>
</template>

<script>
import {ref} from 'vue';
import _ from 'lodash';
import LargeHeader from "@/pagesOther/pages/ie/components/large-header.vue";
import PrettyCard from "@/pagesOther/pages/ie/components/card/pretty-card.vue";
import CollegeMajorPicker from "@/pagesOther/pages/ie/entry-analysis/components/college-major-picker.vue";
import AIFormCommonStyle from "@/pagesOther/pages/ie/components/AIFormCommonStyle";
import AiFormItem from "@/pagesOther/pages/ie/components/ai-form/ai-form-item.vue";
import AiForm from "@/pagesOther/pages/ie/components/ai-form/ai-form.vue";
import MajorCategoryPicker from "@/pagesOther/pages/ie/components/ai-form/items/major-category-picker.vue";
import {useProvidePageScroll} from "@/hooks/usePageScrollInjection";
import {useProvideAnalysisDataService} from "@/pagesOther/pages/ie/entry-analysis/components/useAnalysisDataInjection";
import {useProvideMajorTreeService} from "@/pagesOther/pages/ie/hooks/useMajorTreeInjection";
import {useTransfer} from "@/hooks/useTransfer";

export default {
    components: {MajorCategoryPicker, AiForm, AiFormItem, CollegeMajorPicker, PrettyCard, LargeHeader},
    mixins: [AIFormCommonStyle],
    setup() {
        const collegeLimit = 2
        const scrollTop = useProvidePageScroll()
        useProvideMajorTreeService()
        const form = ref({
            majorCategory: '',
            universities: _.times(collegeLimit, i => ({num: i, university: {}, majors: []}))
        })
        const rules = {majorCategory: [{required: true, message: '请选择专业种类'}]}
        useProvideAnalysisDataService(form)
        const {transferTo} = useTransfer()
        const categoryForm = ref(null)
        const picker = ref(null)

        const handleMyVoluntary = () => {
            transferTo('/pagesOther/pages/ie/entry-ai-list/entry-ai-list', {tab: 1})
        }

        const handleNext = async () => {
            await categoryForm.value.validate()

            for (const item of picker.value) {
                await item.validate()
            }

            const toSimple = (model) => {
                const copy = {
                    ...model,
                    code: model.university.code,
                    majorCodes: model.majors.map(m => m.code),
                    majorEnrollCodes: model.majors.map(m => m.enrollCode)
                }
                delete copy.university
                delete copy.majors
                return copy
            }

            const nextData = {
                ...form.value,
                universities: form.value.universities.map(toSimple)
            }
            const nextPath = '/pagesOther/pages/ie/entry-analysis/analysis-result'
            transferTo(nextPath, nextData)
        }

        return {
            scrollTop,
            collegeLimit,
            form,
            rules,
            categoryForm,
            picker,
            handleMyVoluntary,
            handleNext
        }
    }
}
</script>

<style>

</style>
