<template>
    <div class="w-full flex flex-col items-center justify-center sm:h-full">
        <div class="font-bold text-3xl mt-10">Step {{ currentIndex }} of 5</div>
        <div v-show="currentIndex == 1" class="w-full h-full lg:w-[400px] items-center p-4">
            <div class="w-full text-center text-2xl font-bold mt-2.5">Your voice can change the products of tomorrow. Set up your account to share opinions and get paid!
            </div>
            <el-button style="height: 46px;" @click="startNow" class="w-full mt-8 text-3xl h-16" type="primary">Start now -></el-button>
            <img class="w-full mt-50" :src="comment" alt="">
        </div>
        <div v-show="currentIndex == 2" class="w-full h-full lg:w-[400px] items-center p-4">
            <div class="w-full text-center text-2xl font-bold mt-2.5">What is your zip/postal code?
            </div>
            <div>
                <div class="mt-10">Zip Code</div>
                <el-input class="w-full h-10" v-model="zipCode"></el-input>
                <div class="mt-0.5">Please enter a valid zip code from the United States, Australia, or Canada</div>
            </div>
            <el-button @click="nextAction" style="height: 46px;" class="w-full mt-16 text-3xl" type="primary">Next -></el-button>
        </div>
        <div v-show="currentIndex == 3" class="w-full h-full lg:w-[400px] items-center p-4">
            <div class="w-full text-center text-2xl font-bold mt-2.5">What is your date of birth?
            </div>
            <img class="w-full mt-11 mb-11" :src="info1" alt="">
            <div>
                <div class="mt-10">Date of Birth</div>
                <el-date-picker
                    class="w-full"
                    v-model="birthDate"
                    type="date"
                    placeholder="Pick a day"
                    size="default"
                    value-format="YYYY-MM-DD" 
                />
                <div class="mt-2">You must be at least 18 years old to become a member.</div>
            </div>
            <el-button @click="nextAction1" style="height: 46px;" class="w-full mt-16 text-3xl" type="primary">Next -></el-button>
        </div>
        <div v-show="currentIndex == 4" class="w-full h-full lg:w-[400px] items-center p-4">
            <div class="w-full text-center text-2xl font-bold mt-2.5">What is your gender?
            </div>
            <img class="w-full mt-11 mb-11" :src="info1" alt="">
            <div>
                <div class="mt-10 mb-4">What is your gender?</div>
                <el-radio-group style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;" v-model="sex">
                    <el-radio :value="1">Male</el-radio>
                    <el-radio :value="0">Female</el-radio>
                </el-radio-group>
                <!-- <div class="mt-2">You must be at least 18 years old to become a member.</div> -->
            </div>
            <el-button @click="nextAction2" style="height: 46px;" class="w-full mt-16 text-3xl" type="primary">Next -></el-button>
        </div>
        <div v-show="currentIndex == 5" class="w-full h-full lg:w-[400px] items-center p-4">
            <div class="w-full text-center text-2xl font-bold mt-2.5">Who will receive the rewards?
            </div>
            <img class="w-full mt-11 mb-11" :src="info1" alt="">
            <div>
                <div class="mt-10 mb-0.5">First Name</div>
                <el-input style="height: 46px;" class="w-full" v-model="firstName"></el-input>
                <div class="mt-10 mb-0.5">Last Name</div>
                <el-input style="height: 46px;" class="w-full" v-model="lastName"></el-input>
                
            </div>
            <el-button @click="nextAction3" style="height: 46px;" class="w-full mt-16 text-3xl" type="primary">Log in & start earning</el-button>
        </div>


    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import comment from '@/assets/register/comment.jpg'
import info1 from '@/assets/register/info1.jpg'
import { ElMessage } from 'element-plus';
const currentIndex = ref(1)
const zipCode = ref('')
const birthDate = ref('')
const sex = ref('')
const firstName = ref('')
const lastName = ref('')

const router = useRouter()

const startNow = () => {
    currentIndex.value++
}
const nextAction = () => {
    if(zipCode.value != ''){
        currentIndex.value++
    }else{
        ElMessage({
            message:'Please input zipCode',
            type:'warning'
        })
    }
}
const nextAction1 = () => {
    if(birthDate.value != ''){
        currentIndex.value++
    }else{
        ElMessage({
            message:'Please input birthData',
            type:'warning'
        })
    }
}
const nextAction2 = () => {
    if(sex.value != ''){
        currentIndex.value++
    }else{
        ElMessage({
            message:'Please selext gender',
            type:'warning'
        })
    }
}
const nextAction3 = () => {
    if(firstName.value == ''){
        ElMessage({
            message:'Please iput firstName',
            type:'warning'
        })
    }
    else if(lastName.value == ''){
        ElMessage({
            message:'Please iput lastName',
            type:'warning'
        })
    }
    else{
       router.push({path:"/registerQuestion",query:{
            zipCode:zipCode.value,
            birthDate:birthDate.value,
            sex:sex.value,
            firstName:firstName.value,
            lastName:lastName.value
       }})
    }
}
</script>

<style></style>