<template>
  <div class="topNav">
    <router-link to="/">
      <img class="logo">
    </router-link>

    <div class="flex-right">
      <div class="ml20" >
        <el-button v-if="!isLogin" style="border-radius: 20px;" class="loginBtn">
          <span @click="goLogin">{{ language==0?'登录':'LOGIN' }}</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">-->
<!--    </a>-->
  </div>

  <el-drawer
    v-model="drawer" size="100%"
    :style="{'--el-drawer-padding-primary':0}" direction="ltr"
    :with-header="false" title="菜单"
  >
    <div class="weiHead">
      <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>

    <el-menu class="weiMenu"
        v-if="language==0"
        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/0">大赛报名</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-menu>
    <el-menu class="weiMenu"
        v-if="language==1"
        router :default-active="activeIndex" mode="vertical" :ellipsis="false"
        popper-effect="dark" @select="handleSelect"
    >
      <el-menu-item index="/">HOME</el-menu-item>
      <el-menu-item index="/news">NEWS</el-menu-item>
      <el-menu-item index="/notice">NOTICEBOARD</el-menu-item>
      <el-menu-item index="/match/list/0">SIGN UP</el-menu-item>
      <el-menu-item index="/saiC">COMPETITIONS</el-menu-item>
      <el-menu-item index="/meta">MEDIA</el-menu-item>
      <el-menu-item index="/guide">GUIDELINE</el-menu-item>
    </el-menu>
  </el-drawer>
  <LoginDialog ref="pcloginDialog" @submitForm="reFlash" />
  <SearchPop v-if="language==0" ref="searchDialog" />
  <SearchPop_en v-if="language==1" ref="searchDialog" />
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
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/index";
import {UserFilled } from '@element-plus/icons-vue'
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)

onMounted(() => {
  console.log(window.location.href)
  if (useUserStore().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('mate') > -1) {
    activeIndex.value = '/mate'
  } else if (route.fullPath.indexOf('guide') > -1) {
    activeIndex.value = '/guide'
  } else if (route.fullPath.indexOf('saiC') > -1) {
    activeIndex.value = '/saiC'
  }
  // console.log(activeIndex.value)
})
function changeLanguage(n) {
  proxy.$modal.loading()
  language.value = n
}
function showDrawer() {
  drawer.value = true
}
function closeDrawer() {
  drawer.value = false
}
function handleSelect(key, keyPath) {
  // console.log(key)
  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
    location.reload()
  })
}

const goLogin = (flag) => {
  let param = null
  if (_.isBoolean(flag)) {
    param = {
      notShowClose: flag
    }
  }
  proxy.$refs['pcloginDialog'].open(param)
}

const reFlash = () => {
  // 刷新
  location.reload()
}
watch(() => useUserStore().reLogin, (val) => {
  if (val) {
    goLogin()
  }
})

function searchNews() {
  proxy.$refs['searchDialog'].open()
}
function getCode() {
  proxy.$refs['codeRef'].getCode()
}
</script>

<style scoped lang="scss">
.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 .el-sub-menu__title{font-size: 18px;}
.weiMenu.el-menu{
  border: none;
  :deep(.el-menu-item.is-active){color: var(--el-color-primary);}
}
.weiHead{display: flex;justify-content: end;padding: 15px;align-items: center;
  .languageBtn{font-size: 20px;margin-right: 20px;line-height: 30px;white-space: nowrap;}
}
.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: 1400px) {
  .search {
    display: none;
  }
}
@media (max-width: 1340px) {
  .home-menu .el-menu--horizontal > .el-menu-item{margin: 0; }
}
@media (max-width: 1000px) {
  .box {
    width: 100%
  }
}

@media (max-width: 800px) {

  .ropenbtn{display: block}

  .forPc {
    display: none;
  }
}

</style>