<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 { getAreaList, getGradeList, getStudentTalentedDetail, saveUserInfo } from '@/service'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import { checkEmptyValues } from '@/utils'

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

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

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

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

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

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

const handleSubmit = () => {
    if (!userInfo.value.nickName || !userInfo.value.sex || checkEmptyValues(userInfo.value.userExtend, ["gradeId"]) || checkEmptyValues(userInfo.value.talentExtend, ["weight", "height"])) {
        uni.showToast({ title: "完善所需信息", icon: "error" })
        return
    }
    let params = {
        nickName: userInfo.value.nickName,
        gradeId: userInfo.value.userExtend.gradeId,
        gradeName: userInfo.value.userExtend.gradeName,
        areaName: userInfo.value.userExtend.area,
        schoolName: userInfo.value.userExtend.schoolName,
        sex: userInfo.value.sex,
    }
    saveUserInfo({ data: params }).then((resp) => {
        if (resp.code === 200) {
            uni.navigateTo({ url: '/pages-sub/talented/create/sportsSecond' })
        }
    })
}

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

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



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(() => {

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

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

    getStudentTalentedDetail({ query: { Type: 1 } }).then((resp) => {
        if (resp.code === 200) {
            if (resp.result) {
                userInfo.value.talentExtend = resp.result
            } else {
                userStore.initUserTalent()
                console.log(userInfo.value.talentExtend);
                
            }
        }
        userInfo.value.talentExtend.type = 1
    })

    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="w-[112rpx] h-[104rpx] flex items-center">
                <image src="https://lwzk.ycymedu.com/img/tianbao/tb_01.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/cpgx/cp_ty01.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">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">学生姓名</view>
                    <view class="flex-1">
                        <input type="text" v-model="userInfo.nickName" placeholder="请输入姓名" confirm-type="done"
                            placeholder-style="color:#C5C8D1;font-size:30rpx;text-align:left;" class="text-left">
                    </view>
                </view>

                <view
                    class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">性别</view>
                    <view class="flex-1 flex items-center" @click="handleOpenPopup('gender')">
                        <MxInput v-model:value="formData.genderLabel" placeholder="请选择您的性别" root-class="text-left"
                            :readonly="true" />

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

                <view
                    class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">年级</view>
                    <view class="flex-1 flex items-center" @click="handleOpenPopup('grade')">
                        <MxInput v-model:value="userInfo.userExtend.gradeName" placeholder="请选择您的年级"
                            root-class="text-left" :readonly="true" />

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

                <view
                    class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
                    <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-left" :readonly="true" />

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

                <view
                    class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">就读学校</view>
                    <view class="flex-1 flex items-center" @click="navigateToSchool">
                        <view class="w-full">
                            <MxInput v-model:value="userInfo.userExtend.schoolName" placeholder="请选择您的就读学校"
                                root-class="text-left flex-1" :readonly="true" />
                        </view>
                        <view class="w-[18rpx] h-[36rpx] flex items-center ml-auto">
                            <image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png"
                                mode="scaleToFill" class="w-[18rpx] h-[36rpx]" />
                        </view>
                    </view>
                </view>

                <view
                    class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">身高(cm)</view>
                    <view class="flex-1 flex items-center">
                        <input type="number" inputmode="numeric" v-model="userInfo.talentExtend.height"
                            placeholder="请填写身高" confirm-type="done"
                            placeholder-style="color:#C5C8D1;font-size:30rpx;text-align:left;" class="text-left">
                    </view>
                </view>

                <view
                    class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">体重(kg)</view>
                    <view class="flex-1 flex items-center">
                        <input type="number" inputmode="numeric" v-model="userInfo.talentExtend.weight"
                            placeholder="请填写体重" confirm-type="done"
                            placeholder-style="color:#C5C8D1;font-size:30rpx;text-align:left;" class="text-left">

                    </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.sex" v-model:label="formData.genderLabel" v-if="activeType == 'gender'"
                    :options="genderClassification" label-key="label" value-key="value"
                    custom-root-cols-class="grid grid-cols-2 items-center gap-[16rpx]"
                    custom-root-class="pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
                    active-item-class="bg-white text-[#1580FF] border-1 border-solid border-[#1580FF]!"  @change="visible = false" />

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

                <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-[16rpx]"
                    custom-root-class="pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
                    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(180deg, #D7E4FF 0%, #fff 556rpx);
    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>
