<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="">
            {{detailTit}}
        </div>
        <div class="w-full lg:w-[500px] p-4 h-full">
            <img v-if="index != 9" class="w-full mt-5" :src="detailImg" alt="">
            <div class="p-5">
                <img class="w-full mt-2.5" :src="cardTips" alt="">
            </div>
            
            <img v-if="index == 9" class="w-full mt-10" :src="bankContent" alt="">
            <el-collapse v-show="index != 9" class="mt-5" :accordion="true">
                <el-collapse-item>
                    <template #title>
                        <div  style="font-size: 18px;font-weight: 600;;padding: 5px 20px;border-radius: 100px;">
                            How to redeem</div>
                    </template>
                    <div class="p-4">
                        <img class="w-full" :src="cardContent" alt="">
                    </div>
                </el-collapse-item>
                <el-collapse-item>
                    <template #title>
                        <div  style="font-size: 18px;font-weight: 600;padding: 5px 20px;border-radius: 100px;">
                            Terms & conditions</div>
                    </template>
                    <div class="p-5">
                        <span style="font-size: 18px;color: #6e6e6e;">{{content2}}</span>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script setup lang="js">
import { onMounted, 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 cardTips from '@/assets/cardTip.jpg'
import one from '@/assets/visaDetail.jpg'
import two from '@/assets/1.png'
import three from '@/assets/2.png'
import four from '@/assets/3.png'
import five from '@/assets/4.png'
import six from '@/assets/5.png'
import seven from '@/assets/6.png'
import eight from '@/assets/7.png'
import cardContent from '@/assets/cardContent.jpg'
import bankContent from '@/assets/bankContent.jpg'

const route = useRoute()
const router = useRouter()
const index = route.query.index || '0'

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

const detailTit = ref('')
const detailImg = ref(one)
const content2 = ref("Survey Junkie is not affiliated with Visa, Inc., or any of their affiliates. Visa&trade and their affiliates do not endorse or sponsor Survey Junkie's services, products, or activities.")


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
    }

}

const initFun = () =>{
    if(index == 1){
        detailTit.value = "VISA Reward/Gift Card"
        detailImg.value = one
        content2.value = "Survey Junkie is not affiliated with Visa, Inc., or any of their affiliates. Visa&trade and their affiliates do not endorse or sponsor Survey Junkie's services, products, or activities."
    }
    else if(index == 2){
        detailTit.value = "Amazon.com eGift Card"
        detailImg.value = two
        content2.value = "Amazon.com is not a sponsor of this promotion. Except as required by law, Amazon.com Gift Cards ('GCs') cannot be transferred for value or redeemed for cash. GCs may be used only for purchases of eligible goods on Amazon.com or certain of its affiliated websites. For complete terms and conditions, see www.amazon.com/gc-legal. GCs are issued by ACI Gift Cards, Inc., a Washington corporation. ©,®,™ Amazon.com Inc. and/or its affiliates. No expiration date or service fees."
    }
    else if(index == 3){
        detailTit.value = "Walmart eGift Card"
        detailImg.value = three
        content2.value = "Survey Junkie is not affiliated with Wal-Mart Stores, Inc., Wal-Mart Stores Arkansas, LLC, or Walmart.com or any of their affiliates. Wal-Mart Stores, Inc., Wal-Mart Stores Arkansas, LLC, Walmart.com and their affiliates do not endorse or sponsor Survey Junkie's services, products, or activities. See www.walmart.com/giftcardtermsandconditions for complete gift card terms and conditions."

    }
    else if(index == 4){
        detailTit.value = "iTunes eGift Card"
        detailImg.value = four
        content2.value = "Valid only on iTunes Store for U.S. Requires iTunes account and prior acceptance of license and usage terms. To open an account you must be 13+ and in the U.S. Compatible software, hardware, and Internet access required. Not redeemable for cash, no refunds or exchanges (except as required by law). Code may not be used to purchase any other merchandise, allowances or iTunes gifting. Data collection and use subject to Apple Customer Privacy Policy, see www.apple.com/privacy, unless stated otherwise. Risk of loss and title for code passes to purchaser on transfer. Codes are issued and managed by Apple Value Services, LLC (“Issuer”). Neither Apple nor Issuer is responsible for any loss or damage resulting from lost or stolen codes or use without permission. Apple and its licensees, affiliates, and licensors make no warranties, express or implied, with respect to code or the iTunes Store and disclaim any warranty to the fullest extent available. These limitations may not apply to you. Void where prohibited. Not for resale. Subject to full terms and conditions, see www.apple.com/legal/itunes/us/gifts.html. Content and pricing subject to availability at the time of actual download. Content purchased from the iTunes Store is for personal lawful use only. Don’t steal music. © 2014 Apple Inc. All rights reserved."

    }
    else if(index == 5){
        detailTit.value = "Target eGift Card"
        detailImg.value = five
        content2.value = "The Bullseye Design, Target and Target GiftCards are registered trademarks of Target Brands, Inc. Terms and conditions are applied to gift cards. Target is not a participating partner in or sponsor of this offer. Target GiftCards® and Target Mobile GiftCards can be redeemed for merchandise or services (excluding American Express® and Visa® gift cards and prepaid cards) at Target stores in the U.S. or Target.com. Target eGiftCards can be redeemed for merchandise at Target.com only. Target GiftCards®, Target Mobile GiftCards and Target eGiftCards cannot be redeemed for cash or credit except where required by law. No value until purchased. For balance information, visit Target.com/GiftCards or call 1-800-544-2943. To replace the remaining value on a lost, stolen or damaged card with the original purchase receipt, call 1-800-544-2943. The Starbucks word mark and the Starbucks Logo are trademarks of Starbucks Corporation. Starbucks is also the owner of the Copyrights in the Starbucks Logo and the Starbucks Card designs. All rights reserved. Starbucks is not a participating partner or sponsor in this offer. Reload your Card and check your balance at participating Starbucks stores, www.starbucks.com/card or 1-800-782-7282. Your Starbucks Card may only be used for making purchases at participating Starbucks stores. It cannot be redeemed for cash unless required by law. You may protect the balance on your Card if lost, stolen or destroyed by registering it at starbucks.com/card. Starbucks will replace remaining registered card balances at the time you notify us of the loss. Refunds can only be provided for unused Cards with the original receipt. A complete set of terms and conditions is available on our website. This card does not expire, nor does Starbucks charge fees for any reason. Use of this Card constitutes acceptance of these terms and conditions. The Starbucks word mark and the Starbucks Logo are trademarks of Starbucks Corporation. Starbucks is also the owner of the Copyrights in the Starbucks Logo and the Starbucks Card designs. All rights reserved. Starbucks is not a participating partner or sponsor in this offer."

    }
    else if(index == 6){
        detailTit.value = "Starbucks eGift Card"
        detailImg.value = six
        content2.value = "The Starbucks word mark and the Starbucks Logo are trademarks of Starbucks Corporation. Starbucks is also the owner of the Copyrights in the Starbucks Logo and the Starbucks Card designs. All rights reserved. Starbucks is not a participating partner or sponsor in this offer. Reload your Card and check your balance at participating Starbucks stores, www.starbucks.com/card or 1-800-782-7282. Your Starbucks Card may only be used for making purchases at participating Starbucks stores. It cannot be redeemed for cash unless required by law. You may protect the balance on your Card if lost, stolen or destroyed by registering it at starbucks.com/card. Starbucks will replace remaining registered card balances at the time you notify us of the loss. Refunds can only be provided for unused Cards with the original receipt. A complete set of terms and conditions is available on our website. This card does not expire, nor does Starbucks charge fees for any reason. Use of this Card constitutes acceptance of these terms and conditions. The Starbucks word mark and the Starbucks Logo are trademarks of Starbucks Corporation. Starbucks is also the owner of the Copyrights in the Starbucks Logo and the Starbucks Card designs. All rights reserved. Starbucks is not a participating partner or sponsor in this offer."

    }
    else if(index == 7){
        detailTit.value = "Sephora eGift Card"
        detailImg.value = seven
        content2.value = "Sephora is not a sponsor of the rewards or otherwise affiliated with Survey Junkie. The logos and other identifying marks attached are trademarks of and owned by each represented company and/or its affiliates. Please visit each company's website for additional terms and conditions. Use of this Gift Card constitutes acceptance of the following terms. Gift Cards are redeemable for merchandise sold in U.S. Sephora stores, on Sephora.com for U.S. orders only, through the Sephora catalog or at Sephora inside JCPenney stores. Gift Cards are not redeemable for cash (except as required by law). This Gift Card does not expire and is valid until redeemed. The value of this Gift Card will not be replaced if the card is lost, stolen, altered or destroyed. Treat this card as cash. If your purchase exceeds the unused balance of the Gift Card, you must pay the excess at the time of purchase. For Sephora store locations, to order, or for card balance, please visit Sephora.com or call 1.877.SEPHORA. Issued by Sephora USA, Inc."

    }
    else if(index == 8){
        detailTit.value = "Groupon eGift Card"
        detailImg.value = eight
        content2.value = "Groupon is not a sponsor of the rewards or otherwise affiliated with Survey Junkie. The logos and other identifying marks attached are trademarks of and owned by each represented company and/or its affiliates. Please visit each company's website for additional terms and conditions."
    }
    else{
        detailTit.value = "Connect your bank"
    }
}

onMounted(()=>{
    initFun()
})

</script>

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