<script setup lang="ts">
import { computed, ref } from "vue";
import { useNav } from "../hooks/nav";
import mixNav from "./sidebar/mixNav.vue";
import avatars from "/@/assets/avatars.jpg";
import Hamburger from "./sidebar/hamBurger.vue";
import Breadcrumb from "./sidebar/breadCrumb.vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useRouter, useRoute } from "vue-router";
// import Company from "../components/company/index.vue";
// import Super from "../components/company/super.vue";
import { useUserInfo } from "/@/hooks/core/useUser";
import { getToken } from "/@/utils/auth";
import SystemNotify from "./system-notify.vue";
import HelpModal from "./help-modal.vue";
import CryptoJS from "crypto-js";
import { loadEnv } from "@build/index";
// import { initRouter } from "/@/router/utils";
// import { useCompany } from "/@/hooks/core/useCompany";
// import { usePermissionStore } from "/@/store/modules/permission";
// import { ElMessageBox } from "element-plus";
// import router from "/@/router";

const route = useRoute();
const { push } = useRouter();
const showBackButton = computed(() => route.path.indexOf("Detail") >= 0);
const helpModalRef = ref<InstanceType<typeof HelpModal> | null>(null);
const systemNotifyRef = ref<InstanceType<typeof SystemNotify>>(null);
const { logout, toggleSideBar, pureApp, avatarsStyle } = useNav();

// let timerID: NodeJS.Timeout | null = null;

const { VITE_PURCHASE_URL, VITE_GD_URL, VITE_SECRET_KEY, VITE_SET_URL } =
  loadEnv();

// const SuperCompanyRef = ref<InstanceType<typeof Super> | null>(null);

const { userInfo } = useUserInfo();

// const menuData = computed(() => usePermissionStore().wholeMenus);
// const { setCurrentCompany } = useCompany();

function routeToList() {
  const { path, query } = route;
  push(
    (query?.back as string) ? (query.back as string) : path.split("Detail")[0]
  );
}

function openPurchaseSystem(type) {
  const encJson = CryptoJS.AES.encrypt(
    JSON.stringify({ token: getToken() }),
    VITE_SECRET_KEY
  );
  const encData = CryptoJS.enc.Base64.stringify(
    CryptoJS.enc.Utf8.parse(encJson)
  );

  let url = "";
  switch (type) {
    case 1:
      url = VITE_PURCHASE_URL + "#/accept?t=";
      break;
    case 2:
      // this.url =;
      url = VITE_GD_URL + "#/demand/index?t=";
      break;
    default:
      url = VITE_SET_URL + "#/accept?t=";
      break;
  }

  window.open(url + encData);
}

// function openAlert() {
//   ElMessageBox.alert("正在开发中", "提示", {
//     type: "warning"
//   });
// }
</script>

<template>
  <div class="navbar">
    <Hamburger
      v-if="pureApp.layout !== 'mix'"
      :is-active="pureApp.sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />

    <Breadcrumb
      v-if="pureApp.layout !== 'mix'"
      class="breadcrumb-container"
      :ml="showBackButton ? '20px' : '0px'"
    />

    <ElButton
      v-if="showBackButton"
      link
      absolute
      top="15px"
      left="45px"
      :icon="useRenderIcon('d-arrow-left')"
      @click="() => routeToList()"
    />

    <mixNav v-if="pureApp.layout === 'mix'" />

    <div v-if="pureApp.layout === 'vertical'" class="vertical-header-right">
      <!-- 采销系统入口 -->
      <el-tooltip placement="bottom" content="登录采销平台">
        <p class="bell-icon shake" @click="openPurchaseSystem(1)">
          <IconifyIconOffline icon="shop-cart-full" />
        </p>
      </el-tooltip>

      <!-- 结算系统入口 -->
      <el-tooltip placement="bottom" content="登录结算平台">
        <p class="bell-icon shake" @click="openPurchaseSystem(3)">
          <IconifyIconOffline icon="coin" />
        </p>
      </el-tooltip>

      <el-tooltip placement="bottom" content="登录工单管理系统">
        <p
          class="bell-icon shake"
          style="font-size: 14px"
          @click="openPurchaseSystem(2)"
        >
          工单
        </p>
      </el-tooltip>
<!-- 
      <p class="bell-icon shake" @click="() => systemNotifyRef.onDisplay()">
        <IconifyIconOffline icon="bell-filled" />
      </p> -->

      <!-- 退出登录 -->
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
          &nbsp; &nbsp;
          <template v-if="userInfo">
            <p>{{ userInfo.nickname }}</p>
          </template>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="logout">
            <el-dropdown-item>
              <IconifyIconOffline icon="user" style="margin: 5px" />
              <template v-if="userInfo">
                <span>{{ userInfo.mobile }}</span>
              </template>
            </el-dropdown-item>

            <!--            <el-dropdown-item @click="() => helpModalRef.onDisplay()">-->
            <!--              <IconifyIconOffline icon="dict" style="margin: 5px" />-->
            <!--              使用说明-->
            <!--            </el-dropdown-item>-->

            <el-dropdown-item @click="logout">
              <IconifyIconOffline
                icon="logout-circle-r-line"
                style="margin: 5px"
              />
              退出系统
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <HelpModal ref="helpModalRef" />
    <SystemNotify ref="systemNotifyRef" />
  </div>
</template>

<style lang="scss" scoped>
@keyframes shake {
  /* 水平抖动，核心代码 */
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(+2px, 0, 0);
  }

  30%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(+4px, 0, 0);
  }

  50% {
    transform: translate3d(-4px, 0, 0);
  }
}

.shake {
  animation: shake 800ms ease-in-out;
}

.navbar {
  width: 100%;
  height: 48px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 48px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
  }

  .vertical-header-right {
    display: flex;
    min-width: 280px;
    height: 48px;
    align-items: center;
    color: #000000d9;
    justify-content: flex-end;

    :deep(.dropdown-badge) {
      &:hover {
        background: #f6f6f6;
      }
    }

    .screen-full {
      cursor: pointer;

      &:hover {
        background: #f6f6f6;
      }
    }

    .globalization {
      height: 48px;
      width: 40px;
      padding: 11px;
      cursor: pointer;

      &:hover {
        background: #f6f6f6;
      }
    }

    .el-dropdown-link {
      height: 48px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      cursor: pointer;
      color: #000000d9;

      &:hover {
        background: #f6f6f6;
      }

      p {
        font-size: 14px;
      }

      img {
        width: 22px;
        height: 22px;
        border-radius: 50%;
      }
    }

    .el-icon-setting {
      height: 48px;
      width: 38px;
      padding: 12px;
      display: flex;
      cursor: pointer;
      align-items: center;

      &:hover {
        background: #f6f6f6;
      }
    }
  }

  .breadcrumb-container {
    float: left;
  }
}

.translation {
  ::v-deep(.el-dropdown-menu__item) {
    padding: 5px 40px;
  }

  .check-zh {
    position: absolute;
    left: 20px;
  }

  .check-en {
    position: absolute;
    left: 20px;
  }
}

.logout {
  max-width: 155px;

  ::v-deep(.el-dropdown-menu__item) {
    min-width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
  }
}

.bell-icon {
  margin: 0px 10px;
  cursor: pointer;
}
</style>
