<template>
    <view class="tabs-swiper-content">
        <ie-image src="/volunteer/vhs/vhs_voluntary_banner.png" is-oss custom-class="w-[100vw] h-450 mt-[-44px]"/>
        <view class="mx-30 -mt-60 bg-white rounded-lg relative z-20">
            <view class="flex flex-col items-center py-50">
                <view class="flex items-center gap-5 mb-10" @click="$refs.popup.open()">
                    <uv-icon name="question-circle" color="primary"/>
                    <view class="text-sm text-primary">填报须知</view>
                </view>
                （一）输入考试成绩
            </view>
            <score-form ref="scoreForm" :model="model"/>
        </view>
        <view class="px-30 my-40 flex justify-between items-center gap-30">
            <view class="flex-2">
                <uv-button type="primary" plain shape="circle" :icon="iconList"
                           :custom-style="{height: '44px'}" @click="goVoluntaryList">
                    <view class="text-primary keep-all">我的志愿表</view>
                </uv-button>
            </view>
            <view class="flex-3">
                <uv-button type="primary" shape="circle" text="下一步"
                           color="linear-gradient(to right, var(--primary-color), var(--primary-color-500))"
                           :custom-style="{height: '44px', border: 'none'}" @click="handleForward"/>
            </view>
        </view>
        <ie-popup ref="popup" mode="center">
            <view class="w-[80vw] px-30 pb-30">
                <view class="h-90 flex justify-center items-center text-30 font-bold text-fore-title">
                    填报须知
                </view>
                <view class="mb-30 text-fore-content text-xs flex flex-col gap-30">
                    <view v-for="line in noticeTips" class="indent-50">{{ line }}</view>
                </view>
                <uv-button type="primary" text="我知道了" shape="circle" @click="$refs.popup.close()"/>
            </view>
        </ie-popup>
    </view>
</template>

<script setup>

import config from "@/config";
import ScoreForm from "@/pagesOther/pages/vhs/index/components/score-form.vue";
import {useTransferPage} from "@/hooks/useTransferPage";
import {useInjectVoluntaryStep} from "@/pagesOther/pages/vhs/hooks/useVoluntaryStepInjection";
import {useInjectVoluntaryForm} from "@/pagesOther/pages/vhs/hooks/useVoluntaryFormInjection";
import {useInjectVoluntaryData} from "@/pagesOther/hooks/useVoluntaryDataInjection";
import {useInjectVoluntaryAssistant} from "@/pagesOther/pages/vhs/hooks/useVoluntaryAssistantInjection";
import {routes} from "@/common/routes";

const iconList = config.ossUrl + '/volunteer/vhs/vhs_voluntary_list_icon.png'
const noticeTips = [
    '本系统提供高考志愿填报智能模拟功能，不等同于实际的网上填报志愿，正式填报请登录省考试院指定填报网站。',
    '各地的高考政策不同，模拟志愿填报会根据当前注册用户所属地自动匹配。',
    '本系统数据均来自省考试院公布的当年招生计划和历年录取数据，推荐结果仅供您模拟参考使用。正式填报时请务必参阅省考试院发布的相关招生计划书籍，如遇到数据错漏请以考试院公布信息为准。',
]

const {transferTo} = useTransferPage()
const {currentStep} = useInjectVoluntaryStep()
const {model} = useInjectVoluntaryForm()
const {validate} = useInjectVoluntaryData()
const {handleForward, onBeforeForward} = useInjectVoluntaryAssistant()
const scoreForm = ref(null)

const goVoluntaryList = () => {
    transferTo(routes.VHSList)
}

onBeforeForward(async () => {
    if (currentStep.value == 0) await scoreForm.value.validate()
})
</script>

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