<script lang="ts" setup>
import { safeAreaInsets } from '@/utils/systemInfo'
import MxRadio from "@/pages-sub/components/radio/index.vue"
import MxUpload from "@/pages-sub/components/upload/index.vue"
import MxInput from "@/pages-sub/components/input/index.vue"
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';
import { saveSpecialtyInfo } from '@/service';
import { tabbarStore } from '@/tabbar/store';

// #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 userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const handleSubmit = () => {
    saveSpecialtyInfo({
        data: {
            type: userInfo.value.talentExtend.type,
            specialtyDirection: userInfo.value.talentExtend.specialtyDirection,
            ageLimit: userInfo.value.talentExtend.ageLimit,
            advantages: userInfo.value.talentExtend.advantages,
            awards: userInfo.value.talentExtend.awards,
            fitnessResult: userInfo.value.talentExtend.fitnessResult,
        }
    }).then(resp => {
        if (resp.code === 200) {
            tabbarStore.setCurIdx(0)
            uni.reLaunch({ url: `/pages-sub/ai-service/index?talentTypeId=2` })
        }
    })
}

const activeType = ref("")
const visible = ref(false)
const defaultImgs = ref([])
const defaultFitnessResult = ref([])

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

const yearClassification = [{ label: '1年以下', value: "1" }, { label: '1-3年', value: "2" }, { label: '3-5年', value: "3" }, { label: '5-7年', value: "4" }]

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

const getTitle = (type: string) => {
    const title = { "year": '请选择训练年限', }
    return title[type];
}

const handleAwardUploadChange = (value) => {
    userInfo.value.talentExtend.awards = value.map(item => item.url).join(",")
    defaultImgs.value = value
}

const handleFitnessUploadChange = (value) => {
    userInfo.value.talentExtend.fitnessResult = value.map(item => item.url).join(",")
    defaultFitnessResult.value = value
}


const navigateToAdvantages = () => {
    uni.navigateTo({ url: "/pages-sub/talented/create/editAdvantages" })
}

onLoad(() => {

    if (userInfo.value.talentExtend.awards) {
        defaultImgs.value = userInfo.value.talentExtend.awards.split(',').map(item => ({ url: item }))
    }
    if (userInfo.value.talentExtend.fitnessResult) {
        defaultFitnessResult.value = userInfo.value.talentExtend.fitnessResult.split(',').map(item => ({ url: item }))
    }
})
</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': `${safeAreaInsets?.top}px` }">
            <template #title>
                <view class="flex justify-center">艺术特长生</view>
            </template>
        </sar-navbar>

        <view class="flex items-center mx-[30rpx]">
            <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/cpgx/cp_yuce02.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"
                    @click="handleOpenPopup('year')">
                    <view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">学习年限</view>
                    <view class="flex-1 flex items-center">
                        <MxInput v-model:value="userInfo.talentExtend.ageLimit" 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="navigateToAdvantages">
                        <MxInput v-model:value="userInfo.talentExtend.advantages" placeholder="请填写个人优势"
                            root-class="text-left" :readonly="true" />
                        <view class="w-[32rpx] h-[32rpx] flex items-center ml-auto">
                            <image src="https://lwzk.ycymedu.com/img/cpgx/cp_bianji.png"
                                mode="scaleToFill" class="w-[32rpx] h-[32rpx]" />
                        </view>
                    </view>
                </view>

                <view class="flex items-center text-[30rpx] mx-[40rpx] pt-[34rpx] mb-[20rpx]">
                    <view class="text-[#404142] text-left mr-[14rpx]">考级证书</view>
                    <view class="w-[32rpx] h-[32rpx] flex items-center">
                        <image src="https://lwzk.ycymedu.com/img/cpgx/cp_jieshi.png"
                            mode="scaleToFill" class="w-[32rpx] h-[32rpx]" />
                    </view>
                </view>

                <view class="mx-[30rpx]">
                    <MxUpload :multiple="true" :outerFileList="defaultImgs" @change="handleAwardUploadChange" />
                </view>

                <view class="flex items-center text-[30rpx] mx-[40rpx] pt-[34rpx] mb-[20rpx]">
                    <view class="text-[#404142] text-left mr-[14rpx]">作品上传</view>
                    <view class="w-[32rpx] h-[32rpx] flex items-center">
                        <image src="https://lwzk.ycymedu.com/img/cpgx/cp_jieshi.png"
                            mode="scaleToFill" class="w-[32rpx] h-[32rpx]" />
                    </view>
                </view>

                <view class="mx-[30rpx]">
                    <MxUpload :multiple="true" :outerFileList="defaultFitnessResult"
                        @change="handleFitnessUploadChange" />
                </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 flex items-center justify-center">
                        <view class="w-[56rpx] h-[56rpx] flex items-center mr-[10rpx]">
                            <image src="https://lwzk.ycymedu.com/img/cpgx/cp_aijiedu.png"
                                mode="scaleToFill" class="w-[56rpx] h-[56rpx]" />
                        </view>
                        <view>智能AI解读</view>
                    </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.talentExtend.ageLimit" v-if="activeType == 'year'"
                    :options="yearClassification" label-key="label" value-key="label"
                    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>
