<template>
    <el-header>
        <div class="logo" @click="goHome">
            <img src="@/assets/images/logo.svg" />
            猕猴桃
        </div>
        <div class="tab">
            <ul>
                <li :class="{ active: actIndex == 0 }" @click="handelClick(0)">公众号</li>
                <!-- <li :class="{ active: actIndex == 1 }" @click="handelClick(1)">视频号</li>
                <li @click="toWebsite">AI私域</li>
                <li :class="{ active: actIndex == 1 }" @click="handelClick(2)">API</li> -->
                <li :class="{ active: actIndex == 3 }" @click="handelClick(3)">AI爆文生成</li>
            </ul>
        </div>
        <Setting></Setting>
    </el-header>
</template>
<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { GET_TOKEN } from '@/utils/token';
import Setting from '@/layout/setting/index.vue'
import emitter from '@/eventBus'
const router = useRouter()
const route = useRoute()

const path = computed(() => {
    return route.path
})
watch(path, (val) => {
    if(val == '/dash'){
        actIndex.value = 0
    } else if(val == '/aiArticle'){
        actIndex.value = 3
    } else {
        actIndex.value = null
    }
})
const goHome = () => {
    router.push('/')
}
const toWebsite = () => {
    open('https://7vbot.1024tool.vip/')
}

const actIndex = ref(null)
const handelClick = (index) => {
    console.log(index)
    if(index == 0){
        if (GET_TOKEN()) {
            actIndex.value = 0
            router.push('/dash')
        } else {
            emitter.emit('userLogin', 1)
        }
        
    } else if(index == 1) {
        ElNotification({
        type: 'warning',
        message: ' 视频号开发中，敬请期待!',
        })
    } else if(index == 2){
        open('https://apifox.com/apidoc/shared-a0bce534-8fcf-4b6e-a297-5b670c19a2b4/241940441e0')
    } else if(index == 3){
        
        if (GET_TOKEN()) {
            actIndex.value = 3
            router.push('/aiArticle')
        } else {
            emitter.emit('userLogin', 3)
        }
    }
}
</script>

<style lang="scss" scoped>
.el-header {
    position: fixed;
    width: 100%;
    height: 70px;
    left: 0;
    top: 0;
    line-height: 70px;
    padding: 0 100px;
    overflow: hidden;
    box-shadow: var(--el-box-shadow-light);
    // background-color: #fff;
    z-index: 9;
    background-image: radial-gradient(transparent 1px,var(--bg-color) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(8px);
    .logo {
        float: left;
        cursor: pointer;

        img {
            height: 36px;
            vertical-align: middle
        }
    }

    
}
.tab{
    position: absolute;
    left: 50%;
    // margin-left: -100px;
    transform: translateX(-50%);
    li{
        float: left;
        padding: 0 20px;
        // width: 100px;
        text-align: center;
        line-height: 70px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        &:hover{
            color: var(--el-color-primary-light-3);
        }
    }
    .active{
        color: var(--el-color-primary);
    }
}


</style>
