<template>
    <div class="lg:ml-[33%] w-full lg:w-1/3 items-center  mt-5 mb-5">
        <h1 style="font-size: 22px;font-weight: 600;">Review your profile information</h1>
        <p  style="color: gray;" class="mt-5">Keeping your profile info up to date is the best way for us to match you to relevant surveys.</p>

        <div class=" flex flex-row justify-between items-center mt-6" v-for="(value,index) in subtitleListNew" :key="index">
            <div>
                <span class=" text-gray-500">{{ value }}</span>
                <p style="font-size: 18px;" class="mt-1.5">{{answerList[index]}}</p>
            </div>
            <div @click="EditQuestion(index)" class=" text-blue-500 font-bold underline">Edit</div>
        </div>
    </div>


</template>

<script setup lang="js">
import { ref,onMounted } from 'vue';
import {registerAnwerDetailApi,getPersonInfo,registerAnswerApi} from '@/http/register.js';
import {getToken} from '@/utils/local.js'
import { useRouter } from 'vue-router';


const router = useRouter()
const subtitleListNew = ref([])
const answerList = ref([])
const list =  ref([])

const titleList = [
    'Review your profile information',
    'Keeping your profile info up to date is the best way for us to match you to relevant surveys.',
]

const subtitleList = [
    //{
    "Do you own any of the following pets? Select all that apply.",//:
    // ['Bird','Cat','Dog','Fish','Horse','Amphibians(frogs,toads,etc)','Small animals or rodents (hamsters, mice, rabbits, ferrets, etc.)','Reptiles (turtles, snakes, lizards, etc.)',
    //     'Insects / Arachnids','Livestock (goat, pig, chicken, cattle)','Other','Dont Own Pets'
    // ]},
    "How much of your household grocery shopping do you do yourself?",
    "What's your living situation?",
    "What's your marital status?",
    "What's your race?",
    "Do you speak Spanish?",
    "Are you of Hispanic, Latino or Spanish origin?",
    "How many children do you have?",
    "What's the highest level of education you have received?",
    "What's your household income level?",
    "Are you a registered voter? If yes, what's your political affiliation?",
    "What's your employment status?",
    "In which industry or profession do you work? Select the best option.",
    "What is your job title, level or responsibility?",
    "Approximately how many employees work at your organization (all locations)?",
    "What is your religious affiliation?"
]


function EditQuestion(index){
    const item = list.value[index]
    // console.log('现在的item是：',item.id,item)
    const id  = item.id
    const title = item.title
    const questions = item.answerlist
    const questionStr =  JSON.stringify(questions)
    router.push({path:"/editQuestion",query:{
        id:id,
        title:title,
        questionStr:questionStr
    }})
}

function extractSelectedItems(list = []) {
  return (list || [])
    .map(q => {
      const idx = Number(q.solution || 0);         
      const arr = Array.isArray(q.answerlist) ? q.answerlist : [];
      return arr[idx] ?? null;                 
    });                              
}
const getList = async() => {
    const myToken = getToken()
    const res =  await registerAnwerDetailApi(myToken)
    if(res.code == 1){
        const listnew = res.data.list
        list.value = listnew
        subtitleListNew.value = (listnew || []).map(item => item.title);
        answerList.value = extractSelectedItems(listnew)
        // console.log('答案列表是：',answerList.value,subtitleListNew.value)
    }
}

onMounted(()=>{
    getList()
})

</script>

<style lang="scss" scoped>
</style>