<script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'
import MxRadio from "@/pages-sub/components/radio/index.vue"
import MxInput from "@/pages-sub/components/input/index.vue"
import { getGradeList, getAreaList, saveUserAreaScore } from "@/service"

import { useUserStore } from "@/store"
import { storeToRefs } from "pinia";

// #ifdef MP-WEIXIN
definePage({
    style: {
        navigationStyle: 'custom',
    },
    excludeLoginPath: true,
})
// #endif

// #ifndef MP-WEIXIN
definePage({
    style: {
        navigationStyle: 'custom',
        transparentTitle: 'always',
        navigationBarTitleText: ''
    },
    excludeLoginPath: true,
})
// #endif

const handleBack = () => {
    const pages = getCurrentPages()
    if(pages.length <=1){
        uni.switchTab({url:'/pages/index/index'})
        return
    }
    uni.navigateBack()
}

const formData = ref({
    genderLabel: '',
})

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore)

const handleSubmit = () => {

    let params = {
        areaName: userInfo.value.userExtend.area,
        totalScore: userInfo.value.userExtend.expectedScore,
        id: userInfo.value.userExtend.id
    }
    saveUserAreaScore({ data: params }).then((resp) => {
        if (resp.code === 200) {
            uni.navigateTo({ url: '/pages-sub/wishlist/create/secondBatch' })
        }
    })
}

const activeType = ref("")
const visible = ref(false)

const onOverlayClick = () => {
    visible.value = false
}

const genderClassification = [{ label: '男', value: 1 }, { label: '女', value: 2 }]
const gradeClassification = ref([])
const areaList = ref([])

const handleOpenPopup = (type: string) => {
    visible.value = true
    activeType.value = type
}

const getTitle = (type: string) => {
    const title = { "gender": '请选择性别', "grade": '请选择年级', "examinationArea": '请选择中考所在地' }
    return title[type];
}

const navigateToSchool = () => {
    uni.navigateTo({ url: `/pages-sub/wishlist/school?area=${userInfo.value.userExtend.area}` })
}

onShow(() => {
    getGradeList().then(resp => {
        if (resp.code === 200) {
            gradeClassification.value = resp.result
        }
    })

    getAreaList().then(resp => {
        if (resp.code === 200) {
            areaList.value = resp.result
        }
    })

    formData.value.genderLabel = genderClassification.filter(item => item.value == userInfo.value.sex)[0]?.label
})
</script>

<template>
    <view class="flex flex-col custom-background h-screen">
        <sar-navbar show-back @back="handleBack" :fixed="true" fixation-style="top:unset;"
            :root-style="{ '--sar-navbar-bg': `transparent`, '--sar-navbar-item-color': 'black', 'padding-top': `${systemInfo?.statusBarHeight}px` }">
            <template #title>
                <view class="flex justify-center">志愿填报</view>
            </template>
        </sar-navbar>

        <view class="flex items-center mx-[30rpx] mb-[20rpx]">

            <view class="flex flex-col ml-[10rpx]">
                <view class="text-[44rpx] font-500 mb-[14rpx]">一键生成志愿表</view>
                <view class="text-[#B0B3B8] text-[30rpx]">生成我的专属志愿表</view>
            </view>
            <view class="w-[160rpx] h-[160rpx] ml-auto">
                <image src="https://lwzk.ycymedu.com/img/tianbao/tb_zk03.png" mode="scaleToFill"
                    class="w-[160rpx] h-[160rpx]" />
            </view>
        </view>


        <form @submit="handleSubmit" class="flex-1 pb-safe">
            <view class="flex flex-col h-full">

                <view
                    class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] px-[30rpx] bg-[#F7F8FA] mb-[20rpx]">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">总分</view>
                    <view class="flex-1 flex items-center">
                        <MxInput type="number" v-model:value="userInfo.userExtend.expectedScore" placeholder="请填写"
                            root-class="text-right" class="w-full" inputDirection="text-right"/>

                    </view>
                </view>
                <view
                    class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] px-[30rpx] bg-[#F7F8FA]">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">中考所在区</view>
                    <view class="flex-1 flex items-center" @click="handleOpenPopup('examinationArea')">
                        <MxInput v-model:value="userInfo.userExtend.area" placeholder="请选择您的中考所在区"
                            root-class="text-right" class="w-full" inputDirection="text-right" :readonly="true" />

                        <view class="w-[18rpx] h-[36rpx] flex items-center ml-[10rpx]">
                            <image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png"
                                mode="scaleToFill" class="w-[18rpx] h-[36rpx]" />
                        </view>
                    </view>
                </view>


                <view class="mx-[40rpx] mt-[68rpx] bg-[#FEF6F6] rounded-[16rpx]">
                    <view class="h-[52rpx] w-[178rpx] flex items-center m-[-8rpx] ml-[20rpx]">
                        <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/tb_shuoming.png" mode="scaleToFill"
                            class="h-[52rpx] w-[178rpx]" />
                    </view>

                    <view class="flex flex-col text-[#E03C33] m-[20rpx]">
                        <view class="text-[24rpx] mt-[4rpx]">
                            <view>根据济南2026年中考招生政策，进入模拟志愿填报阶段的考生，默认历史、生物、地理、道法等水平考试等级均已达到普通高中基础填报要求（C级及以上），本产品仅用于统招平行志愿的模拟。</view>
                        </view>
                    </view>

                </view>

                <view class="px-[30rpx] py-[16rpx] border-t-solid border-t-[#ededed] border-t-1 mt-auto">
                    <button form-type="submit" class="rounded-[16rpx] bg-[#1580FF] text-[#fff] submit-btn">开始推荐</button>
                </view>
            </view>
        </form>

        <sar-popup :visible="visible" effect="slide-bottom" @overlay-click="onOverlayClick">
            <view class="bg-white rounded-[24rpx_24rpx_0_0] px-[30rpx] pb-safe pt-[30rpx] min-h-[492rpx]">
                <view class="text-[34rpx] font-500 flex items-center justify-between mb-[30rpx]">
                    <view>{{ getTitle(activeType) }}</view>
                    <view class="w-[36rpx] h-[36rpx] flex items-center" @click="onOverlayClick">
                        <image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png"
                            mode="scaleToFill" class="w-[36rpx] h-[36rpx]" />
                    </view>
                </view>


                <MxRadio v-model:value="userInfo.userExtend.area" v-if="activeType == 'examinationArea'"
                    :options="areaList" label-key="label" value-key="value"
                    custom-root-cols-class="grid grid-cols-3 items-center gap-[20rpx]"
                    custom-root-class="pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
                    active-item-class="bg-white text-[#1580FF] border-[#1580FF] border-[2rpx] border-solid" @change="visible = false"/>

            </view>
        </sar-popup>
    </view>
</template>

<style lang="scss" scoped>
.custom-background {
    background:  linear-gradient( 177deg, #E4EDFF 0%, #F0F5FF 180rpx, #FEFEFF 360rpx);
    background-position: 50% 50%;
    background-origin: padding-box;
    background-clip: border-box;
    background-size: auto auto;
}

.submit-btn[disabled] {
    background-color: #a1cbff;
    color: #fff;
}
</style>
