<template>
    <div style="position: relative;background-color: #fff;">
        <img class="w-full" :src="isMobile ? how1Ph : how1PC" alt="">
        <div v-if="isMobile == false" class="w-full absolute top-2 lg:top-6 flex flex-row justify-between items-center">
            <img :src="headerLogo" class=" w-[120px] lg:w-[200px] ml-4 lg:ml-14" alt="">
            <div class="hidden lg:flex flex-row justify-between items-center text-white mr-14 w-[35%]">
                <el-dropdown trigger="click">
                    <div class="text-white flex flex-row items-center text-[16px]">
                        How it work
                        <ChevronDownIcon class="w-6 h-6 text-white ml-1.5"></ChevronDownIcon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu style="padding: 10px;">
                            <el-dropdown-item>
                                <template #default>
                                    <div @click="tapHowToWrk(1)" class=" flex flex-row items-center justify-start">
                                        <BoltIcon class="w-5 h-5 text-black ml-1.5"></BoltIcon>
                                        <span class=" leading-8 ml-1.5 text-[18px]">Take surveys</span>
                                    </div>
                                </template>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="tapHowToWrk(2)" class=" flex flex-row items-center justify-start">
                                    <ChartBarIcon class="w-5 h-5 text-black ml-1.5"></ChartBarIcon>
                                    <span class=" leading-8 ml-1.5 text-[18px]">Surf to Earn</span>
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="tapHowToWrk(3)" class=" flex flex-row items-center justify-start">
                                    <CurrencyDollarIcon class="w-5 h-5 text-black ml-1.5"></CurrencyDollarIcon>
                                    <span class=" leading-8 ml-1.5 text-[18px]">Redeem rewards</span>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <div @click="eranMoney">Eran money</div>
                <div>|</div>
                <div @click="help" class="flex flex-row">
                    <QuestionMarkCircleIcon class="w-6 h-6 text-white mr-1.5"></QuestionMarkCircleIcon>
                    <span>Help</span>
                </div>
                <div @click="login" class="flex flex-row">
                    <UserCircleIcon class="w-6 h-6 text-white mr-1.5"></UserCircleIcon>
                    <span>Login</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 小屏抽屉 -->
    <div @click="drawerShow" class="lg:hidden  absolute top-4 right-4 z-50 w-6 h-6">
        <!-- <Bars4Icon class=" w-4 h-4 text-white"></Bars4Icon> -->
    </div>

    <img class="w-full" :src="isMobile ? how2Ph : how2PC" alt="">
    <img class="w-full" :src="isMobile ? how3Ph : how3PC" alt="">
    <img class="w-full" :src="isMobile ? how4Ph : how4PC" alt="">
    <img class="w-full" :src="isMobile ? how5Ph : how5PC" alt="">
    <img class="w-full" :src="isMobile ? how6Ph : how6PC" alt="">
    <img class="w-full" :src="isMobile ? how7Ph : how7PC" alt="">
    <img v-show="isMobile" class="w-full" :src="how8Ph" alt="">

    <BottomInfo/>
    <LoginDialog :visiableSub="visiableFu" @update:visiableSub="closeDialog"/>

    <!-- 手机侧边栏 -->
    <el-drawer v-model="drawer" size="55%" :with-header="false">
        <div @click="help" class=" flex flex-row items-center mb-1.5">
            <ExclamationCircleIcon class=" w-5 h-5 text-black"></ExclamationCircleIcon>
            <span class=" font-bold text-[18px] ml-1.5">help</span>
        </div>
        <div @click="login" class=" flex flex-row items-center mb-2.5">
            <UserCircleIcon class=" w-5 h-5 text-black"></UserCircleIcon>
            <span class=" font-bold text-[18px] ml-1.5">Login</span>
        </div>
        
        <div class=" flex flex-row items-center mb-2 mt-5">
            <div class=" font-bold">How it works</div>
            <ChevronDownIcon class=" w-5 h-5 text-black"></ChevronDownIcon>
        </div>
        <!-- <div class=" font-bold mt-3">How it works</div> -->
        <div @click="tapHowToWrk(1)" class=" flex flex-row items-center mb-2.5 mt-1.5">
            <BoltIcon class=" w-5 h-5 text-black"></BoltIcon>
            <span class="text-[16px] ml-1 font-light">Take surveys</span>
        </div>
        <!-- <div class=" ml-2 mt-2">Take surveys</div> -->
        <div @click="tapHowToWrk(2)" class=" flex flex-row items-center mb-2.5 mt-1.5">
            <ChartBarIcon class=" w-5 h-5 text-black"></ChartBarIcon>
            <span class="text-[16px] ml-1 font-light">Surf to Earn</span>
        </div>
        <!-- <div class=" ml-2 mt-1.5">Surf to Earn</div> -->
        <div @click="tapHowToWrk(3)" class=" flex flex-row items-center mb-2.5 mt-1.5">
            <CurrencyDollarIcon class=" w-5 h-5 text-black"></CurrencyDollarIcon>
            <span class="text-[16px] ml-1 font-light">Redeem rewards</span>
        </div>
        <!-- <div class=" ml-2 mt-1.5">Redeem rewards</div> -->
        <div class=" font-bold mt-5">Earn money</div>
    </el-drawer>

</template>

<script setup>
import how1PC from '@/assets/register/howInsights/how1PC.jpg'
import how2PC from '@/assets/register/howInsights/how2PC.jpg'
import how3PC from '@/assets/register/howInsights/how3PC.jpg'
import how4PC from '@/assets/register/howInsights/how4PC.jpg'
import how5PC from '@/assets/register/howInsights/how5PC.jpg'
import how6PC from '@/assets/register/howInsights/how6PC.jpg'
import how7PC from '@/assets/register/howInsights/how7PC.jpg'

import how1Ph from '@/assets/register/howInsights/how1Ph.jpg'
import how2Ph from '@/assets/register/howInsights/how2Ph.jpg'
import how3Ph from '@/assets/register/howInsights/how3Ph.jpg'
import how4Ph from '@/assets/register/howInsights/how4Ph.jpg'
import how5Ph from '@/assets/register/howInsights/how5Ph.jpg'
import how6Ph from '@/assets/register/howInsights/how6Ph.jpg'
import how7Ph from '@/assets/register/howInsights/how7Ph.jpg'
import how8Ph from '@/assets/register/howInsights/how8Ph.jpg'

import headerLogo from '@/assets/register/header-logo-new.png'
import { ChevronDownIcon, } from '@heroicons/vue/24/solid'
import {BoltIcon,ChartBarIcon,CurrencyDollarIcon,Bars4Icon,
    ExclamationCircleIcon,UserCircleIcon,QuestionMarkCircleIcon} from '@heroicons/vue/24/outline'
import BottomInfo from '../components/BottomInfo.vue'
import { useRouter } from 'vue-router'
import LoginDialog from '../components/LoginDialog.vue'
import { ref,onMounted,onBeforeUnmount,computed } from 'vue'

const router = useRouter()
const visiableFu = ref(false)
const drawer = ref(false)
const width = ref(window.innerWidth)



const tapHowToWrk = (index) => {
    if(index == 1){
        drawer.value = false
        router.push({path:"/register"})
    }
    if(index == 2){
        router.push({path:"/surfEarn"})
    }
    if(index == 3){
        drawer.value = false
        // router.push({path:"/redeemRewards"})
    }
}

const eranMoney = () => {
    // router.push({path:"/surfEarn"})
} 
const help = () => {
    router.push({path:"/helpCenter"})
}
const login = () => {
    visiableFu.value = true
}

const closeDialog = () => {
    visiableFu.value = false
}

const drawerShow = () => {
    drawer.value = true
}

const handSize = () => {
    drawer.value = false
    width.value = window.innerWidth
}

const WaysToParticipate = () => {}

const HowToShare = () => {}

onMounted(() => {
  window.addEventListener("resize", handSize)
})
onBeforeUnmount(() => {
  window.removeEventListener("resize", handSize)
})

// 用 computed 判断是否为手机
const isMobile = computed(() => width.value < 768) // 小于768px认为是手机


</script>

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