<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="">
                Name
        </div>
        <div style="height: 100vh;" class="w-full lg:w-[400px] p-4 h-full">
            <div style="font-size: 16px;" class="mt-25 mb-1">First Name</div>
            <el-input class="input" v-model="firstName"></el-input>
            <div style="font-size: 16px;" class="mt-5 mb-1">Last Name</div>
            <el-input class="input" v-model="lastName"></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 @click="cancelAction" style="height: 46px;width: 100px;font-size: 18px;">Cancel</el-button>
                <el-button v-loading="loading" @click="saveAction" style="height: 46px;width: 100px;font-size: 18px;" type="primary">Save</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';

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

const firstName = ref(route.query.first ?? '')
const lastName = ref(route.query.last ?? '')
const loading = ref(false)


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

const saveAction = async() => {
    loading.value = true
    const myToken = getToken()
    const dict = {
        first_name:firstName.value,
        next_name:lastName.value,
        answer_list:route.query.answer,
        zipcode:route.query.zipcode,
        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>