<template>
    <div class="w-full h-full flex flex-col items-center justify-center sm:h-full">
        <div class="w-full shadow-[0_8px_16px_-8px_rgba(0,0,0,0.25)] h-[50px] flex justify-center items-center font-bold">
                <img @click="cancelAction" class=" absolute left-5 h-[50px]" :src="backImg" alt="">
                Enter zip code
        </div>
        <div style="height: 100vh;" class="w-full lg:w-[400px] p-4 h-full">

            <img style="width: 100%;margin-bottom: 100px;" :src="info2Img" alt="">

            <div style="font-size: 16px;" class="mt-25 mb-1">Zip code</div>
            <el-input class="input" v-model="zipCode"></el-input>


            <div style="background-color: #f3f3f3;height: 1px;margin-top: 200px;margin-bottom: 20px;"></div>
            <div class="flex mb-0.5  items-center justify-between">
                <el-button v-loading="loading" @click="saveAction" style="height: 46px;width: 100%;font-size: 18px;" type="primary">Submit</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="js">
import { ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import backImg from '@/assets/back.jpg'
import {registerAnswerApi} from '@/http/register.js'
import {getToken} from '@/utils/local.js'
import { ElMessage } from 'element-plus';
import info2Img from '@/assets/register/info2.jpg'

const route = useRoute()
const router = useRouter()

const zipCode = ref(route.query.zipcode ?? '')
const loading = ref(false)


const cancelAction = () => {
    router.back()
}

const saveAction = async() => {
    if(zipCode.value == ''){
        return
    }
    loading.value = true
    const myToken = getToken()
    const dict = {
        first_name:route.query.first_name,
        next_name:route.query.next_name,
        answer_list:route.query.answer,
        zipcode:zipCode.value,
        sex:route.query.sex,
        birthday:route.query.birthday
    }
    try{
        const res = await registerAnswerApi(myToken,dict)
        loading.value = false
        if(res.code == 1){
            ElMessage.success('success')
            router.back()
        }
    }catch(err){
        loading.value = false
    }
    
}

</script>

<style scoped>
.input{
    height: 46px;
}
</style>