<template>
  <div class="webHead">
    <el-row>
      <el-col :span="5">
        <img src="@/assets/logo/logo.png" class="logo" />
      </el-col>
      <el-col :span="16">
        <ul class="menu">
          <li class="menu-item1">
            <div
              class="menu-item-tit"
              :class="pagePath == '/' ? 'active' : ''"
              @click="handlePath('/')"
            >
              {{ t("headerMenu.home") }}
            </div>
          </li>
          <li class="menu-item1 solution">
            <div
              class="menu-item-tit"
              :class="pagePath.indexOf('/solution/') != -1 ? 'active' : ''"
            >
              {{ t("headerMenu.resolution") }}
            </div>
            <div class="show_box">
              <div
                v-for="item in categoryList"
                class="pointer"
                :class="
                  pagePath == `/solution/${item.id}` ? 'x_blue _active' : ''
                "
                @click="
                  handlePath(
                    `/solution/${item.id}?name=${item[solutionNameField]}`
                  )
                "
              >
                {{ item[solutionNameField] }}
              </div>
              <!--

             
              <div
                class="pointer"
                :class="pagePath == '/solution/small' ? 'x_blue _active' : ''"
                @click="handlePath('/solution/small')"
              >
                中小型企业服务
              </div>
              <div
                class="pointer"
                :class="pagePath == '/solution/large' ? 'x_blue _active' : ''"
                @click="handlePath('/solution/large')"
              >
                大型企业服务
              </div>
              <div
                class="pointer"
                :class="
                  pagePath == '/solution/government' ? 'x_blue _active' : ''
                "
                @click="handlePath('/solution/government')"
              >
                政府区域服务
              </div>
              <div
                class="pointer"
                :class="
                  pagePath == '/solution/scientific' ? 'x_blue _active' : ''
                "
                @click="handlePath('/solution/scientific')"
              >
                科研区域服务
              </div>
               -->
            </div>
          </li>
          <li class="menu-item1">
            <div
              class="menu-item-tit"
              :class="pagePath == '/innovate' ? 'active' : ''"
              @click="handlePath('/innovate')"
            >
              {{ t("headerMenu.innovation") }}
            </div>
          </li>
          <li class="menu-item1">
            <div
              class="menu-item-tit"
              :class="pagePath == '/activity' ? 'active' : ''"
              @click="handlePath('/activity')"
            >
              {{ t("headerMenu.activity") }}
            </div>
          </li>
          <li class="menu-item1">
            <div
              class="menu-item-tit"
              :class="pagePath == '/about' ? 'active' : ''"
              @click="handlePath('/about')"
            >
              {{ t("headerMenu.aboutUs") }}
            </div>
          </li>
          <li class="menu-item1 profile-menu-group" style="display: flex">
            <div
              v-if="!userStore.token"
              class="menu-item-tit"
              :class="pagePath == '/login' ? 'active' : ''"
              @click="handlePath('/login')"
            >
              {{ t("headerMenu.loginRegister") }}
            </div>
            <!-- <el-popover
              placement="bottom"
              :title="`32`"
              :width="200"
              trigger="hover"
              :content="userStore.nickName"
            > -->
            <!-- content="this is content, this is content, this is content" -->
            <!-- <template #reference> -->
            <div v-else class="avatar-wrapper">
              <img
                :src="
                  userStore.avatar
                    ? `${baseUrl}/file${userStore.avatar}`
                    : defaultAvatar
                "
                class="user-avatar"
              />
              <i class="el-icon-caret-bottom" />
            </div>
            <!-- </template> -->
            <!-- </el-popover> -->
            <div
              v-if="userStore.token"
              class="menu-item-tit"
              :class="pagePath == '/login' ? 'active' : ''"
              @click="handlePage"
            >
              {{ t("headerMenu.personalCenter") }}
            </div>
            <div
              v-if="userStore.token"
              class="menu-item-tit"
              :class="pagePath == '/login' ? 'active' : ''"
              @click="logout"
            >
              {{ t("headerMenu.logout") }}
            </div>
            <!-- <el-dropdown
              style="margin-top: 20px"
              class="avatar-container right-menu-item hover-effect"
              trigger="click"
            >
              <div class="avatar-wrapper">
                <img :src="userStore.avatar" class="user-avatar" />
                <i class="el-icon-caret-bottom" />
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                 // <router-link to="/identity/index">
                  <el-dropdown-item @click="handlePage"
                    >个人中心</el-dropdown-item
                  >
                 // </router-link>
                  <el-dropdown-item divided @click="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
          </li>
        </ul>
      </el-col>
    </el-row>
    <div class="switch-locale">
      <el-button round @click="switchLocale">
        <!--        {{ localeDict.find((item) => item.value === locale)?.label }}-->
        {{ locale === "zh" ? "ru" : "zh" }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

import useUserStore from "@/store/modules/user";
import { getCategory } from "@/api/website/solution";
import { useI18n } from "vue-i18n";
import useSettingsStore from "@/store/modules/settings";
import defaultAvatar from "@/assets/logo/avatar.png";
import modal from "@/plugins/modal";

const userStore = useUserStore();
let state = reactive({});
let pagePath = ref("");
const route = useRoute();
const router = useRouter();
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
const categoryList = ref([]);
// 当前的语言
const { locale, t } = useI18n();

const solutionNameField = computed(() => {
  return locale.value === "zh" ? "name" : `${locale.value}Name`;
});
const settingsStore = useSettingsStore();
const loadCategoryList = async () => {
  const { data } = await getCategory();
  categoryList.value = data;
};
loadCategoryList();
watch(
  () => route.path,
  (newVal, oldVal) => {
    pagePath.value = newVal;
  }
);
pagePath.value = route.path;

const switchLocale = () => {
  settingsStore.toggleLocale();
  // if (settingsStore.locale === "zh") {
  //   settingsStore.setLocale("ru");
  // } else if (settingsStore.locale === "ru") {
  //   settingsStore.setLocale("zh");
  // }
};

function handlePage() {
  // router.push("/identity/index");

  //   let routeData = "";
  //   const selectRole = localStorage.getItem("select_identity");
  //   if (selectRole > 0) {
  //     routeData = router.resolve({ path: "/admin" });
  //   } else {
  //     routeData = router.resolve({ path: "/identity/index" });
  //   }
  //   window.open(routeData.href, "_blank");
  const routeData = router.resolve({ path: "/identity/index" });
  window.open(routeData.href, "_blank");
}

const showBoxHandlePath = (path) => {
  if (path === "") {
  }
  handlePath(path);
};

function handlePath(path) {
  pagePath.value = path;
  router.push(path);
  // window.open(path, "_blank");
}

function logout() {
  modal
    .confirm(t("common.areYouSureYouWantToLogOutAndExitTheSystem"))
    .then(() => {
      useUserStore()
        .logOut()
        .then(() => {
          location.href = "/";
        });
    })
    .catch(() => {});
}
</script>

<style lang="scss">
ol,
ul,
dl {
  margin: 0;
  padding: 0;
}

li,
dd,
dt {
  padding: 0;
  margin: 0;
  list-style: none;
}

.webHead {
  position: fixed;
  z-index: 2001;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 260px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 43px 0px rgba(0, 42, 255, 0.09);

  .logo {
    height: 30px;
    margin: 25px 0;
  }

  .menu {
    display: flex;
    // justify-content: space-between;
    .solution {
      position: relative;

      .show_box {
        display: none;
        position: absolute;
        padding-top: 5px;
        top: 75px;
        width: 100%;
        text-align: center;
        background-color: transparent;

        div {
          // height: 42px;
          // line-height: 42px;
          padding: 8px 0;
          font-size: 14px;
          color: #666666;
          background-color: #f2f6ff;
        }

        ._active {
          background-color: #fff;
        }
      }

      &:hover {
        .show_box {
          display: block;
        }
      }
    }

    .menu-item1 {
      flex: 1;
      text-align: center;

      .menu-item-tit {
        display: inline-block;
        padding: 25px 0;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000;
        cursor: pointer;
        height: 75px;
      }

      .menu-item-tit:hover {
        opacity: 0.8;
      }

      .active {
        //font-size: 20px;
        font-weight: 500;
        border-bottom: 2.5px solid #000;
      }
    }

    .profile-menu-group {
      height: 71px;
      flex: 2;
      justify-content: space-between;
      align-items: center;
      // .avatar-wrapper {
      // box-sizing: border-box;
      // padding: 10px;
      // .user-avatar {
      //   width: 20px;
      //   height: 20px;
      // }
      // }
    }
  }
}
</style>

<style lang="scss" scoped>
.user-avatar {
  // cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.webHead {
  .switch-locale {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
}
</style>
