<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 { getMyScore, getTalentAreaList, saveMyScore } from '@/service'

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

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

const handleBack = () => {
    uni.navigateBack({ delta: 1 })
}

const formData = ref({
    chinese: "",
    math: '',
    english: '',
    physics: '',
    chemistry: '',
    sports: '',
})

const cToE = {
    'chinese': '语文',
    "math": '数学',
    'english': '英语',
    physics: '物理',
    chemistry: '化学',
    sports: '体育'
}

const degreeFormData = ref({
    geography: '',
    politics: '',
    biology: '',
    history: '',
})

const ctoEWithDegree = {
    geography: '地理',
    politics: '政治',
    biology: '生物',
    history: '历史'
}


const handleSubmit = () => {    
    saveMyScore({data:{
       ...formData.value,
       ...degreeFormData.value
    }}).then(resp => {
        if(resp.code === 200){
            uni.navigateTo({ url: "/pages-sub/wishlist/create/third" })
        }
    })
}

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

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

const gradeClassification = ref([])


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


const handleNumberChange = (event, key) => {
    const value = +event.detail.value
    if (['chinese', 'math', 'english'].includes(key) && value > 150) {
        formData.value[key] = '150'
    } else if (['physics', 'chemistry'].includes(key) && value > 100) {
        formData.value[key] = '100'
    } else if (key === 'sports' && value > 60) {
        formData.value[key] = '60'
    }
}

onLoad(() => {

    getTalentAreaList({ query: { typeId: '738657273081925' } }).then((resp) => {
        gradeClassification.value = resp.result
    })

    getMyScore().then(resp => {
        if (resp.code === 200 && resp.result) {
            formData.value.chinese = resp.result.chinese
            formData.value.math = resp.result.math
            formData.value.english = resp.result.english
            formData.value.chemistry = resp.result.chemistry
            formData.value.sports = resp.result.sports
            formData.value.physics = resp.result.physics
            degreeFormData.value.biology = resp.result.biology
            degreeFormData.value.history = resp.result.history
            degreeFormData.value.geography = resp.result.geography
            degreeFormData.value.politics = resp.result.politics
        }
    })

})
</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="w-[112rpx] h-[104rpx] flex items-center">
                <image src="https://lwzk.ycymedu.com/img/tianbao/tb_02.png" mode="scaleToFill"
                    class="w-[112rpx] h-[104rpx]" />
            </view>
            <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_zk02.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] border-b-1 border-b-[#eaeaea] border-b-solid"
                    v-for="(val, key) of cToE" :key="key">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">{{ val }}</view>
                    <view class="flex-1">
                        <input type="number" inputmode="decimal" v-model="formData[key]"
                            :placeholder="['chinese', 'math', 'english'].includes(key) ? '满分150分，请输入您的分数' : ['physics', 'chemistry'].includes(key) ? '满分100分，计算90%分数' : '满分60分'"
                            confirm-type="done" placeholder-style="color:#C5C8D1;font-size:30rpx;text-align:left;"
                            class="text-left" @blur="(event) => handleNumberChange(event, key)">
                    </view>
                </view>

                <view class="text-[34rpx] mt-[40rpx] ml-[40rpx] font-700">等级考成绩</view>
                <view class="grid grid-cols-2 gap-[0_50rpx] mx-[40rpx]">
                    <view
                        class="flex items-center text-[30rpx] justify-between  py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid"
                        v-for="(val, key) of ctoEWithDegree" :key="key">
                        <view class="text-[#404142] text-left mr-[34rpx] ">{{ val }}</view>
                        <view class="flex-1 flex items-center" @click="handleOpenPopup(key)">
                            <MxInput v-model:value="degreeFormData[key]" placeholder="请选择" root-class="text-left w-[92rpx]!"
                                :readonly="true" />

                            <view class="w-[18rpx] h-[36rpx] flex items-center ml-auto mr-[30rpx]">
                                <image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png"
                                    mode="scaleToFill" class="w-[18rpx] h-[36rpx]" />
                            </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]">
                <view class="text-[34rpx] font-500 flex items-center justify-between mb-[30rpx]">
                    <view>请选择{{ ctoEWithDegree[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="degreeFormData[activeType]" :options="gradeClassification" label-key="label"
                    value-key="label" custom-root-cols-class="grid grid-cols-3 items-center gap-[20rpx]"
                    custom-root-class="pb-[20rpx]"
                    custom-item-class="py-[12rpx] text-center border-1 border-solid border-[#F3F4F8]"
                    active-item-class="bg-white text-[#1580FF] border-1 border-solid border-[#1580FF]!" @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>
