<template>
  <div class="topNav forPc">
    <router-link to="/">
      <img class="logo" src="@/assets/v1/nav_logo.png">
    </router-link>
  </div>
  <div class="forWei">
    <div class="weitop">
      <img src="@/assets/v1/nav_logo.png" style="height: 40px;margin: 10px">
    </div>
  </div>

  <LoginDialog ref="pcloginDialog" @submitForm="reFlash" />
  <SearchPop ref="searchDialog" />
</template>

<script setup>
import { 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'

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const isLogin = ref(false)
const activeIndex = ref('/')
const drawer = ref(false)

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'
  } else if (route.fullPath.indexOf('examPoints') > -1) {
    activeIndex.value = '/vip/index/examPoints'
  } else if (route.fullPath.indexOf('teamVip') > -1) {
    activeIndex.value = '/vip/index/teamVip'
  } else if (route.fullPath === '/vip/index/CQ') {
    activeIndex.value = '/vip/index/CQ'
  }
  // console.log(activeIndex.value)
})
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 reFlash = () => {
  // 刷新
  location.reload()
}
watch(() => useUserStore().reLogin, (val) => {
  if (val) {
    goLogin()
  }
})

watch(() => useUserStore().toRouter, (val) => {
  if (val) {
    router.push({ name: val })
  }
})

function searchNews() {
  proxy.$refs['searchDialog'].open()
}

function goIndex() {
  window.open('https://www.taekwondo.org.cn')
  // window.location.href = 'https://www.taekwondo.org.cn/'
}
</script>

<style scoped lang="scss">


.searchBtn {
  &:hover {
    background: rgba(202, 23, 29, 0.1);
    border-color: #CA171D
  }

  &:focus {
    background: rgba(202, 23, 29, 0.1);
    border-color: #CA171D
  }

  &:active {
    background: rgba(202, 23, 29, 0.1)
  }
}

.loginBtn {
  &:active {
    color: #fff;
    background:var(--el-color-primary);
    border-color: var(--el-color-primary)
  }

  &:hover {
    border-color: var(--el-color-primary);
    background: rgba(202, 23, 29, 0.1);
    color: var(--el-color-primary);
  }

  &:focus {
    background: rgba(202, 23, 29, 0.1)
  }
}

.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 {
  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 {
      background: rgba(202, 23, 29, 0.1);
      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: #F5F7F9;
    }

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

.menuBox {
  height: 60px;
  background: #AD181F;
}

@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: #AD181F;}
}
</style>