<template>
  <div class="topNav forPc">
    <router-link to="/">
      <img class="logo" src="@/assets/v1/nav_logo.png">
    </router-link>

    <div class="home-menu">
      <el-menu
        v-if="language==0"
        router :default-active="activeIndex" mode="horizontal" :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-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>
      <el-menu
        v-if="language==1"
        router :default-active="activeIndex" mode="horizontal" :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-sub-menu index="/about">
          <template #title>ABOUT US</template>
          <el-menu-item index="/about/wuDao">舞蹈节</el-menu-item>
          <el-menu-item index="/about/culture">地方文化</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

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

        <el-button v-else style="border-radius: 20px;" class="loginBtn"><span @click="router.push('/center/myInfo')">个人中心</span>
          &nbsp; ｜ &nbsp;<span @click="logout()">退出</span></el-button>
      </div>
    </div>
  </div>

  <div class="forWei ">
    <div class="weitop">
      <img src="@/assets/v1/nav_logo.png" style="height: 40px;margin: 10px">
      <a class="ropenbtn" @click="showDrawer">
        <img src="@/assets/v1/menu.png">
      </a>
    </div>
  </div>
  <el-drawer
    v-model="drawer"
    :style="{'--el-drawer-padding-primary':0}" direction="ltr" :with-header="false" title="菜单"
  >
    <el-menu
      :style="{'--el-menu-hover-bg-color':'#faeeed'}"
      class="weiMenu"
      router :default-active="activeIndex" mode="vertical" :ellipsis="false"
      popper-effect="dark" @select="handleSelect"
    >
      <el-menu-item index="/">首页</el-menu-item>
    </el-menu>
  </el-drawer>
  <LoginDialog ref="pcloginDialog" @submitForm="reFlash" />
  <el-dialog
    v-model="registerVisible"
    title="用户注册"
    width="30%"
  >
    <el-form
      ref="loginRef"
      :model="loginForm"
    >
      <el-form-item prop="telNo" style="height: 40px">
        <el-input
          v-model="loginForm.telNo"
          type="text"
          auto-complete="off"
          placeholder="请输入手机号"
        >
          <template #prefix><svg-icon icon-class="phone" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="captcha" style="height: 40px">
        <captcha ref="codeRef" v-model="loginForm.captcha" v-model:uuid="loginForm.uuid" style="height: 40px" @keyup.enter="handleLogin" />
      </el-form-item>
      <el-form-item prop="code" style="height: 40px">
        <captcha-sms v-model="loginForm.code" style="height: 40px" :verify="checkCaptchaSms" @keyup.enter="handleLogin" @error="getCode" />
      </el-form-item>
      <el-form-item style="width: 100%;height: 40px">
        <el-button
          :loading="loading"
          size="large"
          type="primary"
          style="width: 100%;border: 0;"
        >
          <span>注册</span>
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <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 { Search } from '@element-plus/icons-vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import _ from 'lodash'
import LoginDialog from '@/viewsPc/login'
import SearchPop from './indexSearch'
import SearchPop_en from './indexSearch_en'
import Captcha from './captcha'
import CaptchaSms from './captchaSms'
import cache from '@/plugins/cache'
import locale from 'element-plus/lib/locale/lang/zh-cn'
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 language = ref(cache.local.get('language') || 0)
onMounted(() => {
  if (useUserStore().perId) {
    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('teen') > -1) {
    activeIndex.value = '/teen'
  } else if (route.fullPath.indexOf('fitness') > -1) {
    activeIndex.value = '/fitness'
  } else if (route.fullPath.indexOf('dope') > -1) {
    activeIndex.value = '/dope'
  }
  // console.log(activeIndex.value)
})
function changeLanguage(n) {
  // language.value = n
  cache.local.set('language', n)
  location.reload()
}
function showDrawer() {
  drawer.value = true
}
function handleSelect(key, keyPath) {
  // console.log(key)
  activeIndex.value = key
  drawer.value = false
}

const logout = () => {
  proxy.$modal.confirm('确定退出？').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 goRegister = () => {
  registerVisible.value = true
}
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;
  }


}

.quickNav {
  a {
    padding: 0 25px;
    line-height: 1;
    border-right: 1px solid #DCDCDC;
    font-size: 14px;
    color: #9D630F;

    &:last-child {
      border-right: none;
    }
    &:hover{font-weight: bold;text-decoration: underline;}
  }
}

.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);
}

@media (max-width: 1000px) {
  .box {
    width: 100%
  }
  .flex-right {
    .quickNav a {
      padding: 0 4px;
      border: none;
    }
  }
}

@media (max-width: 750px) {
  .search {
    display: none
  }
}

@media (max-width: 500px) {
  .forPc {
    display: none;
  }
}
.weitop{display: flex;justify-content: space-between;
  .ropenbtn{padding: 10px}
}
:deep(.el-input){height: 100%}
:deep(.el-form-item){height: 40px;}
.weiMenu.el-menu{
  border: none;
  :deep(.el-menu-item.is-active){color: var(--el-color-primary);}
}
</style>