<template>
    <section class="top-bg pt-2 relative">
        <GrailedHeader>
            <template #left>
                <div class="text-black text-2xl font-bold">{{ t('home.cp_name') }}</div>
            </template>
            <template #right>
                <label id="text">switch language：</label>
                <select id="checkout" name="checkout"
                    class="block w-full rounded-md border-0 py-1.5 text-gray-900   shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:max-w-xs sm:text-sm sm:leading-6" 
                        style="width: 30%;height:120%"  @change="checkout($event.target.value)"  value="">
                    <option value="1">English</option>
                    <option value="2">German</option>
                    <option value="3">Danish</option>
                    <option value="4">Portuguese</option>
                    <option value="5">Arabic</option>
                </select>
                
                <div class="flex flex-row items-center gap-1 top-balance-bg p-3 rounded-3xl justify-center">
                    <SvgIcon name="dollar" class="w-6 h-6" />
                    <div class="ml-1 mt-1 font-semibold w-20 text-left">{{ balance }}</div>
                </div>
            </template>
        </GrailedHeader>
        <!-- notice -->
        <Notice />
        <!-- carousel -->
        <Carousel  @updateCarouseList="updateCarouseList" />
        <!-- recharge & withdrawal -->
        <div class="grid grid-cols-2 gap-3 mx-4">
            <div @click="toNext(1)" ><img src="@/assets/imgs/recharge.png" alt=""></div>
            <div @click="toNext(2)"><img src="@/assets/imgs/withdraw.png" alt=""></div>
        </div>

    </section>
    <section class="bg-[#f7f8fa]">
        <div>
            <TaskCarouse />
        </div>
        <div class="flex items-center justify-center mt-4">
            <van-button class="btn w-[92%] h-14 flex items-center justify-center" @click="handleClick">
                <span class="text-base font-semibold text-white">{{ t('home.continue') }}</span>
            </van-button>
        </div>

        <!-- Nuestros compañeros -->
        <div class="mt-4">
            <Partners ref="partnersRef" />
        </div>
        <div class="mt-4 mx-4">
            <Introduce :invitation-code="invitationCode"/>
        </div>
        <div class="h-20"></div>
    </section>
</template>

<script setup lang="ts">
import GrailedHeader from '@/components/GrailedHeader.vue';
import Carousel from './components/Carousel.vue';
import Notice from './components/Notice.vue';
import Introduce from './components/Introduce.vue';
import TaskCarouse from './components/TaskCarouse.vue';
import { useRouter, useRoute } from 'vue-router';
import { getBalanceAccount } from '@/api/balance';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { createApp } from 'vue';
import SvgIcon from '@/components/SvgIcon.vue';
import Partners from './components/Partners.vue';
import { useI18n } from 'vue-i18n';
import { setLang } from '../../i18n';
import { i18n } from '../../i18n';
import { createPinia } from 'pinia';
import App from '../../App.vue';
const { t } = useI18n()
const partnersRef = ref()
const router = useRouter()
const handleClick = () => {
    router.push('/start')
}
const balance = ref(0)
const invitationCode = ref('')

const balanceAccount = async () => {
    const res = await getBalanceAccount()
    balance.value = res.balance
    invitationCode.value = res.invitationCode
}

const toNext = (scenario: any) => {
    router.push({ name: 'channelSelect', params: { scenario: scenario } })
}
const updateCarouseList = (list: any) => {
    const newList = list.filter((item: any) => item.type !== 1)
    partnersRef.value.setList(newList)
}


const getBalance = async () => {
    const res = await getBalanceAccount()
    balance.value = res.balance
}


setInterval (() => {
    getBalance()
}, 4000);


function checkout(e :string) {
    localStorage.setItem("lang",e)

    if(e=== "1"){
        import.meta.env.VITE_DEFAULT_LANG = 'en-us';
    }
    if(e === "2"){
        import.meta.env.VITE_DEFAULT_LANG = 'dn-de';
    }
    if(e === "3"){
        import.meta.env.VITE_DEFAULT_LANG = 'da-dk';
    }
    if(e === "4"){
        import.meta.env.VITE_DEFAULT_LANG = 'pt-pt';
    }
    if(e === "5"){
        import.meta.env.VITE_DEFAULT_LANG = 'st-st';
    }
    
    setLang(import.meta.env.VITE_DEFAULT_LANG);

    const app = createApp(App);
    app.use(i18n)
    app.use(createPinia())
    app.use(router)
    app.mount('#app')
}

// onMounted(async () => {
    
//     await balanceAccount()
// })

// 初始化方法
const initialize = () => {
  // 执行初始化逻辑
    var selected = document.getElementById("checkout");
    var text = document.getElementById("text");
    var value = import.meta.env.VITE_DEFAULT_LANG;



    let lang =localStorage.getItem("lang")

    // 获取所有的option元素
    const optionElements = document.getElementById('checkout').querySelectorAll('option');
    if(lang == 'en-us' || lang==undefined){
        selected.value = '1';
        text.textContent = 'switch language';
        // 修改option元素的值
        optionElements.forEach((option, index) => {
        if (index === 0) {
            option.textContent = 'English';
        } else if (index === 1) {
            option.textContent = 'German';
        } else if (index === 2) {
            option.textContent = 'Danish';
        } else if (index === 3) {
            option.textContent = 'Portuguese';
        } else if (index === 4) {
            option.textContent = 'Arabic';
        }
        });
    }
    if(lang == 'dn-de'){
        selected.value = '2';
        text.textContent = 'Sprache wechseln';
        // 修改option元素的值
        optionElements.forEach((option, index) => {
        if (index === 0) {
            option.textContent = 'English';
        } else if (index === 1) {
            option.textContent = 'Deutsch';
        } else if (index === 2) {
            option.textContent = 'Dänisch';
        } else if (index === 3) {
            option.textContent = 'Portugiesisch';
        } else if (index === 4) {
            option.textContent = 'Arabisch';
        }
        });
    }
    if(lang == 'da-dk'){
        selected.value = '3';
        text.textContent = 'skift sprog';
        // 修改option元素的值
        optionElements.forEach((option, index) => {
        if (index === 0) {
            option.textContent = 'Engelsk';
        } else if (index === 1) {
            option.textContent = 'Tysk';
        } else if (index === 2) {
            option.textContent = 'Dansk';
        } else if (index === 3) {
            option.textContent = 'Portugisisk';
        } else if (index === 4) {
            option.textContent = 'Arabisk';
        }
        });
    }
    if(lang == 'pt-pt'){
        selected.value = '4';
        text.textContent = 'mudar de idioma';
        // // 修改option元素的值
        optionElements.forEach((option, index) => {
        if (index === 0) {
            option.textContent = 'Inglês';
        } else if (index === 1) {
            option.textContent = 'Alemão';
        } else if (index === 2) {
            option.textContent = 'Dinamarquês';
        } else if (index === 3) {
            option.textContent = 'Português';
        } else if (index === 4) {
            option.textContent = 'Árabe';
        }
        });
    }
    if(lang == 'st-st'){
        selected.value = '5';
        text.textContent = 'تبديل اللغة';
        // // 修改option元素的值
        optionElements.forEach((option, index) => {
        if (index === 0) {
            option.textContent = 'إنجليزي';
        } else if (index === 1) {
            option.textContent = 'ألماني';
        } else if (index === 2) {
            option.textContent = 'الدانماركية';
        } else if (index === 3) {
            option.textContent = 'البرتغالية';
        } else if (index === 4) {
            option.textContent = 'بالعربية';
        }
        });
    }
};

onMounted(() => {
  initialize();
});

</script>


<style scoped >
.top-bg {
    background-image: url("@/assets/imgs/home_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.top-balance-bg {
    background: rgba(255, 101, 52, 0.08);
    ;
}

.btn {
    background: linear-gradient(90deg, #F70 0%, #FF4900 100%);
    display: flex;
    --van-button-radius: 12px;
    --van-button-default-height: 56px;
}

.task-item-bg {
    background-color: white;
}
</style>