<template>
  <div class="topNav">
    <router-link class="pd20" to="/">
      LOGO
    </router-link>

    <div class="home-menu  forPc">
      <el-menu
        router :default-active="activeIndex" :mode="mode" :ellipsis="true"
        popper-effect="dark" @select="handleSelect"
      >
        <el-menu-item index="/">DataV边框/装饰</el-menu-item>
        <el-menu-item index="/news">{{ language==0?'news':'NEWS' }}</el-menu-item>
        <el-menu-item index="/guide">粒子</el-menu-item>
        <el-menu-item index="/match/list">swiper</el-menu-item>
        <el-menu-item index="/saiC">ts</el-menu-item>
        <el-menu-item index="/meta">svg动画/canvas</el-menu-item>
        <el-menu-item index="/notice">scss</el-menu-item>
      </el-menu>
    </div>

    <div class="flex-right">
      <div class="languageBtn">
        <span :class="language==0?'active':''" @click="changeLanguage(0)">{{ language==0?'中文':'CN' }}</span>
        |
        <span :class="language==1?'active':''" @click="changeLanguage(1)">EN</span>
      </div>
      <div class="ml20 forPc" >
        <el-button v-if="!isLogin" @click="goLogin" style="border-radius: 20px;" class="loginBtn">
          <span>{{ language==0?'登录':'LOGIN' }}</span>
          <!--          ｜ &nbsp;<span @click="goRegister">注册</span>-->
        </el-button>

        <el-dropdown v-if="isLogin" class="mr20">

          <el-avatar :icon="UserFilled">
            {{user.userName.substring(0,4)}}
          </el-avatar>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/center/myInfo')">{{ language==0?'个人中心':'Personal' }}</el-dropdown-item>
              <el-dropdown-item @click="logout()">{{language==0?'退出':'Exit'}}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <a class="ropenbtn" @click="showDrawer">
      <img src="@/assets/v1/menu.png">
    </a>
  </div>

  <el-drawer
    v-model="drawer" size="100%"
    :style="{'--el-drawer-padding-primary':0}" direction="ltr"
    :with-header="false" title="菜单"
  >
    <div class="weiHead">
      <el-button size="large" v-if="!isLogin" @click="goLogin" round style="color: #fff" class="btn-lineG">
        <span>{{ language==0?'登录':'LOGIN' }}</span>
        <!--          ｜ &nbsp;<span @click="goRegister">注册</span>-->
      </el-button>
      <el-button type="primary" round plain size="large" v-if="isLogin" @click="logout()">{{language==0?'退出':'Exit'}}</el-button>

      <div style="display: flex">
        <div class="languageBtn">
          <span v-if="language==0" :class="language==0?'active':''" @click="changeLanguage(0)">中文</span>
          <span v-else :class="language==0?'active':''" @click="changeLanguage(0)">CN</span>
          |
          <span :class="language==1?'active':''" @click="changeLanguage(1)">EN</span>
        </div>

        <el-icon color="#453DEA" size="30" @click="closeDrawer"><close/></el-icon>

      </div>
    </div>

    <el-menu class="weiMenu"
        router :default-active="activeIndex" mode="vertical" :ellipsis="false"
        popper-effect="dark" @select="handleSelect"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/news">新闻资讯</el-menu-item>
      <el-menu-item index="/notice">通知公告</el-menu-item>
      <el-menu-item index="/match/list">大赛报名</el-menu-item>
      <el-menu-item index="/saiC">赛程安排</el-menu-item>
      <el-menu-item index="/meta">媒体中心</el-menu-item>
      <el-menu-item index="/guide">参赛指南</el-menu-item>
      <el-sub-menu index="/about">
        <template #title>关于我们</template>
        <el-menu-item index="/about/wuDao">舞蹈节</el-menu-item>
        <el-menu-item index="/about/culture">地方文化</el-menu-item>
      </el-sub-menu>
      <el-menu-item v-if="isLogin" index="/center/myInfo">个人中心</el-menu-item>
    </el-menu>
  </el-drawer>
  <LoginDialog ref="pcloginDialog" @submitForm="reFlash" />
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import { Search,UserFilled } from '@element-plus/icons-vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import _ from 'lodash'
import LoginDialog from '@/viewsPc/login'
import Captcha from './captcha'
import CaptchaSms from './captchaSms'
import cache from '@/plugins/cache'
import {useStorage} from "@vueuse/core";

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const isLogin = ref(false)
const activeIndex = ref('/')
const registerVisible = ref(false)
const loginForm = ref({})
const drawer = ref(false)
const mode = ref('horizontal')
const language = useStorage('language', 0)
const user = useUserStore().user

onMounted(() => {
  console.log(window.location.href)
  if (user) {
    isLogin.value = true
  }
  if (route.fullPath.indexOf('news') > -1) {
    activeIndex.value = '/news'
  } else if (route.fullPath.indexOf('notice') > -1) {
    activeIndex.value = '/notice'
  } else if (route.fullPath.indexOf('about') > -1) {
    activeIndex.value = '/about'
  } else if (route.fullPath.indexOf('meta') > -1) {
    activeIndex.value = '/meta'
  } else if (route.fullPath.indexOf('guide') > -1) {
    activeIndex.value = '/guide'
  } else if (route.fullPath.indexOf('saiC') > -1) {
    activeIndex.value = '/saiC'
  } else if (route.fullPath.indexOf('match') > -1) {
    activeIndex.value = '/match/list'
  }
  console.log(activeIndex.value)
})
function changeLanguage(n) {
  if(language.value == n){
    return
  }
  proxy.$modal.loading()
  language.value = n
}
function showDrawer() {
  drawer.value = true
}
function closeDrawer() {
  drawer.value = false
}
function handleSelect(key, keyPath) {
  activeIndex.value = key
  drawer.value = false
}

const logout = () => {
  proxy.$modal.confirm(language.value==0?'确定退出？':'Are you sure to exit?').then(function() {
    return useUserStore().logOut()
  }).then(() => {
    isLogin.value = true
    router.push('/')
    location.reload()
  })
}

const goLogin = (query) => {
  let param = {}
  proxy.$refs['pcloginDialog'].open(query)
}

const reFlash = () => {
  // 刷新
  location.reload()
}
watch(() => useUserStore().reLogin, (val) => {
  if (val.show) {
    console.log(val)
    goLogin(val.query)
  }
})
watch(() => useUserStore().visitor, (val) => {
  if (val) {
    console.log(val)
    proxy.$refs['visitorDialog'].open()
  }
})

</script>

<style scoped lang="scss">
.home-menu{width: 60vw;
  :deep(.el-menu--horizontal.el-menu){border: none;}
}
.loginBtn {color: #fff;margin-right: 15px;border: none;
  background: linear-gradient(-90deg, #8623FC, #453DEA);box-shadow:0 0 10px #fff;
  &:active {
    color: #fff;
    background:linear-gradient(0deg, #8623FC, #453DEA);
    border:none;
  }

  &:hover {
    box-shadow:0 0 10px var(--el-color-primary);border: none;
    color:#fff;
  }

}


.topNav {
  box-shadow: 0px 0px 13px rgba(113,113,113);
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;

  .logo {
    height: 60px;
    margin-left: 40px;
  }

  .flex-right {
    display: flex;
    align-items: center;
  }

  .search {
    position: relative;

    .el-button.is-circle:hover {
      color:var(--el-color-primary);
      border-color: var(--el-color-primary);
    }
    .el-button.is-circle:active {
      background: var(--el-color-primary);
      color: #fff;
      border-color: var(--el-color-primary);
    }
    .el-button.is-circle:focus {
      border-color: var(--el-color-primary)
    }
    :deep(.el-input .el-input__wrapper) {
      box-shadow: none;
      border-radius: 18px;
      background: #F4F4F4;
    }

    .el-icon {
      position: absolute;
      right: 5px;
    }
  }
}

.menuBox {
  height: 60px;
  background: var(--el-color-primary);
}


  .ropenbtn{padding: 10px;display: none;
    img{    width: 44px;}
  }

:deep(.el-input){height: 100%}
:deep(.el-form-item){height: 40px;}
//.home-menu .el-menu--horizontal > .el-menu-item{margin: 0 5px; font-size: 18px;}
.home-menu .el-sub-menu{font-size: 16px;}
.weiMenu.el-menu{
  border: none;
  :deep(.el-menu-item.is-active){color: var(--el-color-primary);}
}
.weiHead{display: flex;justify-content: space-between;padding: 15px;align-items: center;
  width: 100%;
  .languageBtn{font-size: 20px;line-height: 30px;white-space: nowrap;margin-right: 20px;}
}
.weiMenu{
  .el-menu-item{font-size: 20px}
  :deep(.el-sub-menu__title){font-size: 20px}
  :deep(.el-sub-menu .el-sub-menu__icon-arrow){font-size: 20px}
}
@media (max-width: 1675px) {
  .search {
    display: none;
  }
}
@media (max-width: 1620px) {
  .home-menu .el-menu--horizontal > .el-menu-item{margin: 0 2px; }
}
@media (max-width: 1450px) {
  .home-menu .el-menu--horizontal > .el-menu-item{font-size: 15px}
}
@media (max-width: 1340px) {

  .home-menu .el-menu--horizontal > .el-menu-item{margin: 0; }
}
@media (max-width: 1250px) {
  .home-menu .el-menu--horizontal > .el-menu-item{font-size: 14px}
  .topNav .logo{height: 50px;margin-left: 20px}
}
@media (max-width: 1000px) {
  .box {
    width: 100%
  }
  .forPc {
    display: none;
  }
  .ropenbtn{display: block}
  .loginBtn {
    display: none;
  }
}
</style>