<template>
    <div class=" lg:ml-[33%] w-full lg:w-1/3 items-center leading-[250%] mt-5">
        <span class="text-gray-500">Name</span>
        <div @click="toEditName" class="flex justify-between flex-row items-center">
            <span>{{ person.first_name }}{{person.next_name}}</span>
            <ChevronRightIcon class="w-4 h-4 text-gray-500" aria-hidden="true" />
        </div>
        <div class="text-gray-500">Email Address</div>
        <span>{{person.username}}</span>
        <div style="height: 0.5px;width: 100%;background-color: lightgray;margin-top: 30px;margin-bottom: 30px;"></div>
        <span class="text-gray-500">Zip code</span>
        <div @click="goCode" class="flex justify-between flex-row items-center">
            <span>{{person.zipcode}}</span>
            <ChevronRightIcon class="w-4 h-4 text-gray-500" aria-hidden="true" />
        </div>
        <div class="text-gray-500">Country</div>
        <span>US</span>
    </div>
</template>
<script setup lang="js">
import { ChevronRightIcon } from '@heroicons/vue/24/outline';
import {getPersonInfo} from '@/http/register.js'
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getToken } from '@/utils/local.js'

const router = useRouter()

const person = ref({})

const toEditName = () => {
    router.push({
    path:"/editName",
    query:{
        first:person.value.first_name,
        last:person.value.next_name,
        sex:person.value.sex,
        zipcode:person.value.zipcode,
        answer:person.value.answer_list,
        birthday:person.value.birthday
    }})
}

const goCode = () => {
    router.push({
    path:"/editZipcode",
    query:{
        first:person.value.first_name,
        last:person.value.next_name,
        sex:person.value.sex,
        zipcode:person.value.zipcode,
        answer:person.value.answer_list,
        birthday:person.value.birthday
    }})
}

async function personInfo() {
    const myToken = getToken()
    const res = await getPersonInfo(myToken)
    if(res.code == 1){
        person.value = res.data
    }
}

onMounted(()=>{
    personInfo()
})

</script>