<template>
  <div class="new_header">
    <div class="top_header commmon">
      <div class="top_header_content">
        <div class="top_header_content_left">
          <!--        平江县产业发展综合服务平台-->
          <img src="/src/assets/image/home/26.png"/>
        </div>
        <div class="top_header_content_right" v-if="!isLogin">
          <span class="text"> 欢迎您访问平江县产业发展综合服务平台</span>
          <span class="login" @click="handleLogin">登录</span>
          <span class="register" @click="handleRegister">注册</span>
        </div>
        <div class="top_header_content_right" v-else>
          <span v-if="userInfo" class="welCome">欢迎您，{{ userInfo.userName }}</span>
          <span class="loginOut" @click="handleLoginOut">退出登录</span>
        </div>
      </div>
    </div>
    <div class="flex_nav">
      <div class="menu_box commmon">
        <div class="menu">
          <div class="menu_content">
            <div :class="['menu_item', {
            'menu_active': menuActive === item.id
          }]" v-for="item in menuList" :key="item.id" @click="handleMenu(item)">
              <img :src="getImgUrl(item.id + 1)"/>
              <span>{{ item.name }}</span>
              <el-icon class="menu_arrow" v-if="item.childrenShow">
                <ArrowDown/>
              </el-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="search commmon">
        <div class="search_right_bottom">
          <input class="search_input" placeholder="热门搜索   园区新闻   园区动态"/>
          <div class="search_btn">搜索</div>
        </div>
      </div>
    </div>
    <div class="menu_box menu_child" v-if="menuChildShow">
      <div class="menu">
        <div class="menu_content">
          <div class="menu_item" v-for="item in menuChildList" :key="item.name" @click="handlePage(item)">
            <img :src="getImgUrl(item.icon)"/>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {inject, ref} from 'vue';
import {getToken, removeToken} from "@/utils/auth";
import {useRoute, useRouter} from 'vue-router';
import {useStore} from '@/stores/index';
import {menuStore} from '@/stores/menu';
import {ElMessage} from "element-plus";
import {storeToRefs} from "pinia";
import {useFile} from "@/hooks/file"
import {useGo} from "@/hooks/usePage"
import type {menuChild, menuParams} from "./data";
import {menuList} from "./data"

const store = useStore();

const router = useRouter();
const route = useRoute();
const mStore = menuStore()
const go = useGo()
const $http: any = inject("$http");
const isLogin = getToken() ? ref(true) : ref(false);
const {menuActive} = storeToRefs(mStore);
const {getImgUrl} = useFile()
let userInfo=ref<any>({
  userName:''
})
if(localStorage.getItem('userInfo')){
  let localInfo=localStorage.getItem('userInfo')||''
  userInfo=JSON.parse(localInfo)
}

function ishttp(url: any) {
  return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
}

// 当前选中的菜单选项
let menuChildList = ref<menuChild[]>([]);
let menuChildShow = ref<boolean>(false)

function handlePage(param: menuChild) {
  mStore.setMenuActive(-1)
  menuChildShow.value = false;
  go(param.path)
}

function handleMenu(item: menuParams) {
  if (!item.path && !item?.childrenShow) {
    ElMessage.error('功能正在开发中！')
    return
  }

  const isCur = item.childrenShow && menuActive.value === item.id
  mStore.setMenuActive(isCur ? -1 : item.id)

  if (item.childrenShow && item.children && !isCur) {
    menuChildShow.value = true
    menuChildList.value = item.children
    return;
  }
  menuChildShow.value = false

  if (ishttp(item.path)) {
    window.open(item.path, "_blank");
  } else if (item.path) {
    go({name: item.path})
  }
}

function handleLogin() {
  router.push({
    name: 'login',
  });
}

function handleRegister() {
  router.push({
    name: 'login',
  });
}

function handleLoginOut() {
  $http.delete('/auth/logout').then((res: any) => {
    if (res.code === 200) {
      removeToken();
      store.removeUserInfo();
      ElMessage({
        message: '退出登录成功',
        type: "success",
      });
      isLogin.value = false;
    }
  })
}
</script>

<style scoped lang="less">
.new_header {
  position: relative;
  width: 100%;
  height: 200px;
  border-bottom: 1px solid #e8eff6;
  background-image: url("@/assets/image/home/header.png");
}

.commmon {
  width: 100%;
  display: flex;
  justify-content: center;
}

.top_header {
  width: 100%;
  //background-color: #f2f6fa;
  display: flex;

  .top_header_content {
    width: 100%;
    padding: 0 39px 0 52px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;

    .top_header_content_left {
      //font-size: 30px;
      //font-family: AliHYAiHei-Regular, AliHYAiHei;
      //font-weight: 400;
      //color: @baseColor;
      display: flex;
      margin-top: 30px;

      img {
        width: 470px;
      }
    }

    .top_header_content_right {
      display: flex;
      justify-content: space-between;
      padding-top: 27px;
      cursor: pointer;
      .welCome{
        margin-right:20px;
      }

      .text {
        color: #666F83;
      }

      .login {
        color: @baseColor;
        margin: 0 10px 0 30px;
      }

      .register {
        color: @baseColor;
        margin-left: 10px;
      }

      .loginOut {
        text-align: right;
      }
    }
  }
}

.search {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .search_right_bottom {
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 16px;

    .search_input {
      width: 290px;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid #E2E4EA;
      color: #888;
      padding-left: 5px;
      outline: medium;

      &::placeholder {
        color: #C5CAD5;
      }
    }

    .search_btn {
      width: 70px;
      height: 100%;
      background-color: @baseColor;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}


.menu_box {
  position: relative;
  width: 66%;
}

.menu {
  width: 100%;
  height: 60px;
  line-height: 60px;

  .menu_content {
    width: 100%;
    display: flex;
    //justify-content: space-between;
    align-items: flex-start;
    font-size: 15px;
    color: #707070;

    .menu_item {
      display: flex;
      align-items: center;
      flex-direction: column;
      cursor: pointer;
      box-sizing: border-box;
      width: 130px;
      height: 106px;
      padding-top: 30px;
      user-select: none;

      span {
        font-size: 14px;
        font-weight: bold;
        line-height: 16px;
        margin-top: 8px;
      }

      img {
        width: 34px;
        height: 32px;
      }

      .menu_arrow {
        transform: rotateZ(0deg);
        transition: transform .2s;
      }
    }

    .menu_item:hover, .menu_active {
      color: @baseColor;
      background-color: rgba(32, 110, 210, .15);
    }

    .menu_active {
      .menu_arrow {
        transform: rotateZ(-180deg);
      }
    }
  }
}

.flex_nav {
  display: flex;
  justify-content: space-between;
  padding: 25px 39px 0 12px;
}

.menu_child {
  position: absolute;
  bottom: 0;
  z-index: 99;
  width: 100%;
  height: 135px;
  transform: translateY(100%);
  background-color: #eaf8fd;

  .menu {
    box-sizing: border-box;
    padding: 0 39px 0 12px;

    .menu_content {
      justify-content: flex-start;
      .menu_item{
        height: 135px;
      }
    }
  }
}
</style>
