<!-- 前台头部 -->
<template>
  <el-header>
    <div class="header-container">
      <div class="header-left">
        <div class="logo-box">
          <!--     logo     -->
          <img class="logo" src="@/assets/img/logo-text.png" alt="" />
          <!--      菜单    -->
          <div :class="['menu-box']">
            <div class="short-menu">
              <div class="home-icon" @click="menuClick(homePageInfo)">
                <el-tooltip
                  placement="bottom"
                  trigger="hover"
                  popper-class="menu-popover"
                >
                  <span slot="content">{{ homePageInfo.name }}</span>
                  <svgIcon
                    icon-style="icon header-icon"
                    :icon-class="
                      homePageInfo.menuIcon ? homePageInfo.menuIcon : ''
                    "
                    :title="homePageInfo.name"
                  />
                </el-tooltip>
              </div>
              <div class="more-box" @mousedown.prevent="moreClick">
                <template>
                  <el-tooltip
                    placement="right"
                    trigger="hover"
                    popper-class="menu-popover"
                  >
                    <span slot="content"
                      >{{ showMore ? '收起' : '显示' }}菜单</span
                    >
                    <div
                      :class="[
                        'reference-box-collapse',
                        showMore ? 'expansion' : '',
                      ]"
                    >
                      <span></span>
                    </div>
                  </el-tooltip>
                </template>
              </div>
            </div>
            <div :class="['all-menu', showMore ? 'all-menu-show' : '']">
              <div
                class="all-menu-content"
                tabindex="-1"
                @blur="allMenuBlur"
                ref="allNavContent"
              >
                <div
                  :class="[
                    'menu-btn',
                    item.alias === currentMenu ? 'menu-btn-active' : '',
                  ]"
                  v-for="item in systemMenu"
                  :key="item.alias"
                  @click="menuClick(item)"
                >
                  <img
                    v-if="item.systemIconImg"
                    :src="
                      require('@/assets/img/homePage/feature_' +
                        item.systemIconImg +
                        '.png')
                    "
                    alt=""
                    class="system-img"
                  />
                  <svgIcon
                    v-else
                    icon-style="icon header-icon"
                    :icon-class="item.menuIcon ? item.menuIcon : ''"
                  />

                  <span> {{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header-right">
        <div @click="smartChange">
          <el-tooltip
            placement="top-start"
            trigger="hover"
            popper-class="menu-popover"
          >
            <span slot="content">AI 对话</span>
            <img src="@/assets/img/ai.png" alt="" class="ai-img" />
          </el-tooltip>
        </div>
        <template v-if="isFinishedUserInfo">
          <div class="bell-box" @click="showMsgDrawer = true">
            <el-badge :hidden="!newMsgNum" v-model="newMsgNum" class="bell">
              <el-tooltip
                placement="top-start"
                trigger="hover"
                popper-class="menu-popover"
              >
                <span slot="content">消息中心</span>
                <img src="@/assets/img/publicLayout/bell.png" alt="" />
              </el-tooltip>
            </el-badge>
          </div>
        </template>
        <HtAvatar class="avatar" :user="currentUser" />
        <el-popover
          popper-class="header-popper"
          width="250"
          placement="bottom"
          trigger="hover"
        >
          <div slot="reference" class="user-box">
            <div class="welcome">
              你好，{{ currentUser && currentUser.user.fullname
              }}<i class="el-icon-caret-bottom" />
            </div>
            <div class="department">{{ companyDepartment }}</div>
          </div>
          <div class="user-box-header">
            <h3 v-if="currentUser">
              {{ currentUser && currentUser.user.fullname }}
            </h3>
          </div>
          <ul class="user-link-ul">
            <li @click="openPersonalCenter">
              <i class="el-icon-user"></i>
              {{ $t('navigator.personalCenter') }}
            </li>
            <li @click="openResetPwdDialog">
              <i class="el-icon-setting"></i>
              {{ $t('navigator.changePsd') }}
            </li>
            <li v-if="userType !== 2" @click="handleSysPlat">
              <i class="el-icon-monitor" />
              {{ $t('navigator.manageSys') }}
            </li>
            <li @click="logout">
              <i class="el-icon-circle-close" />
              {{ $t('navigator.signOut') }}
            </li>
          </ul>
        </el-popover>
      </div>
    </div>

    <!--  消息抽屉组件  -->
    <message-drawer
      :showMsgDrawer.sync="showMsgDrawer"
      :newMsgNum.sync="newMsgNum"
    />
  </el-header>
</template>

<script>
import HtAvatar from '@/components/common/HtAvatar.vue'
import {mapState} from 'vuex'
import MessageDrawer from '@/components/layout/Navigator/components/MessageDrawer.vue'
import customSystemRouter from '@/router/custom-system-router'
import {
  formatSystemIconImg,
  processFirstChild,
  systemJump,
} from '@/utils/system.js'

export default {
  name: 'Navigator',
  components: {MessageDrawer, HtAvatar},
  props: {
    currentMenu: {
      default: '',
      type: String,
    },
  },
  computed: {
    ...mapState({
      token: (state) => state.login.currentUser.token,
      currentUser: (state) => state.user.currentUserDetail,
      isFinishedUserInfo: (state) => state.login.isFinishedUserInfo,
      // 重构菜单信息
      systemMenu(state) {
        const {platSystemMenus = [], cockpitMenus = []} = state.menu
        const cockpitMenusWrapper = []
        if (cockpitMenus.length) {
          const {name, ...item} = processFirstChild(cockpitMenus)
          cockpitMenusWrapper.push({
            name: '领导驾驶舱',
            systemIconImg: 'jsc',
            ...item,
          })
        }
        const platSystemMenusWidthIcon = platSystemMenus.map((item) => {
          item.systemIconImg = formatSystemIconImg(item.name)
          return item
        })
        return cockpitMenusWrapper.concat(platSystemMenusWidthIcon)
      },
      homePageInfo(state) {
        return state.menu.gatewayMenus[0] || {}
      },
      userType() {
        if (this.currentUser && this.currentUser.user) {
          return this.currentUser.user.userType
        }
      },
      userInfo: (state) => state.login.currentUser,
      companyDepartment: (state) => {
        /*
                    判断isCurrent去找到是否存在1的，则判断是不是所有值都一样，
                    如果有一样的话取第一项。如果没有则去判断isMaster，
                    如果isCurrent，isMaster都不符合条件。取org数组的第一项中的数据
                */
        const org = state.user.currentUserDetail?.org || []
        if (!(Array.isArray(org) && org.length)) return ''

        let resultObj
        const isCurrentArr = org.filter((i) => i.isCurrent === 1)
        const isMasterArr = org.filter((i) => i.isMaster === 1)
        if (isCurrentArr.length) {
          resultObj = isCurrentArr[0]
          if (isCurrentArr[0].orgPathName) {
            return isCurrentArr[0].orgPathName
          }
        } else if (isMasterArr.length) {
          resultObj = isMasterArr[0]
          if (isMasterArr[0].orgPathName) {
            return isMasterArr[0].orgPathName
          }
        } else {
          resultObj = org[0]
          if (org[0].orgPathName) {
            return org[0].orgPathName
          }
        }
        const {orgName, deptName} = resultObj || {}
        return [orgName, deptName].filter((i) => i).join('-') || ''
      },
    }),
    currentMenuInfo() {
      return this.systemMenu.find((i) => i.alias === this.currentMenu) || {}
    },
  },
  data() {
    return {
      systemInformation: {},
      showMore: false, // 展示全部菜单
      showMsgDrawer: false, // 是否展示侧边栏消息抽屉
      customSystemRouter, // 自定义后台路由
      newMsgNum: 0, // 新消息数量
      frontBase: `${window.location.origin}`,
      qrCodePort: window.context.apkPort,
    }
  },
  created() {},
  mounted() {
    this.$bus.$on('updataUserInfo', () => {
      this.$store.dispatch('user/loadCurrentUserDetail')
    })
    !this.currentUser && this.$store.dispatch('user/loadCurrentUserDetail')
    this.$store.dispatch('menu/actionDefaultMenus')
    this.$store.dispatch('menu/actionFrontMenus')
    this.$store.dispatch('menu/actionPlatSystemMenus')
    this.$store.dispatch('menu/actionCockpitMenus')
    this.$store.dispatch('login/checkUserInfoState')
    let url = '${uc}/uc/tenantManage/v1/getTenantByCode?code=platform'
    this.$http
      .get(url)
      .then((resp) => (this.systemInformation = resp.data || {}))
    // this.getBigScreenMenus()
  },
  methods: {
    smartChange() {
      const newWindow = window.open('', '_blank')
      newWindow.location.href = this.$router.resolve({path: '/aiPage'}).href
    },
    handleScreen(menu) {
      this.$router.push({
        path: '/' + menu.alias,
      })
    },
    getBigScreenMenus() {
      let frontMenus =
        JSON.parse(sessionStorage.getItem('currentFrontMenus')) || false
      let bigScreen = frontMenus.filter((item) => item.alias === 'bigScreen')
      if (bigScreen && bigScreen.length) {
        this.bigScreenMenus = bigScreen[0]?.children || []
      }
    },
    // 修改密码页面
    openResetPwdDialog() {
      this.$router.push({
        path: '/platLayout/resetPwdView',
        query: {type: 'settings'},
      })
    },

    // 跳转个人中心
    openPersonalCenter() {
      this.$router.push({
        path: '/platLayout/personalInfo',
      })
    },

    // 跳转管理系统
    handleSysPlat() {
      if (this.isFinishedUserInfo) {
        let url = window.context.manage + '/getAuth?token=' + this.token
        window.open(url, '_blank')
      } else {
        this.$message.warning('请完善个人信息！')
      }
    },
    openMobileVue() {
      if (this.isFinishedUserInfo) {
        window.open(window.context.mobile, '_blank')
      } else {
        this.$message.warning('请完善个人信息！')
      }
    },
    // 退出登录
    logout() {
      this.$store.dispatch('menu/clearMenus')
      this.$store.dispatch('user/clearUser')
      this.$store.dispatch('menu/setCopyMenus', [])
      let loginRouthPath =
        localStorage.getItem(
          this.$store.state.login.currentUser.account + 'loginRoutePath'
        ) || '/login'
      this.$store.dispatch('login/logoutAndCleanUp').then(() => {
        switch (window.ssoConfig.mode) {
          case 'cas':
          case 'oauth':
            window.sessionStorage.removeItem('currentUser')
            window.location.href =
              window.ssoConfig.logout +
              '?service=' +
              window.location.href.split('?')[0]
            break
          default:
            this.$router.push({
              path: loginRouthPath,
            })
            break
        }
      })
    },

    // 更多nav点击
    moreClick() {
      if (this.showMore) {
        this.showMore = false
      } else {
        this.showMore = true
        this.$nextTick((_) => {
          this.$refs.allNavContent && this.$refs.allNavContent.focus() //获得焦点
        })
      }
    },

    // 菜单弹出层失焦时间
    allMenuBlur() {
      this.$nextTick((_) => (this.showMore = false))
    },

    // nav菜单导航点击
    menuClick(item) {
      // 判断是否完善个人信息
      if (this.isFinishedUserInfo) {
        systemJump(item)
      } else {
        this.$message.warning('请完善个人信息！')
        this.openPersonalCenter()
      }
      this.showMore = false
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables';

.title {
  font-family: STXingkai, serif;
  font-size: 35px !important;

  i {
    font-size: 30px;
  }
}

.el-header {
  padding: 0;
  height: 60px !important;
}

.header-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  padding-left: 16px;
  box-sizing: border-box;
  background: url('~@/assets/img/publicLayout/header-bg.png') no-repeat 0 0,
    linear-gradient(180deg, #144871 0%, #144871 100%);
  background-size: 100% 100%;

  > * {
    font-family: Microsoft YaHei, serif;
  }

  .header-left {
    flex: 1;
    display: flex;
    align-items: center;
    column-gap: 60px;
    height: 100%;
    position: relative;

    .logo-box {
      height: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      color: $--menu-text;

      .logo {
        width: 170px;
        margin-right: 180px;
      }

      .logo_title {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        margin-top: -2px;

        .chinese {
          display: inline-block;
          font-size: 18px;
          font-family: SourceHanSerifCN-Medium, serif;
          width: 288px;
          height: 26px;
          color: $--menu-text;
          line-height: 26px;
        }

        .english {
          display: inline-block;
          font-size: 12px;
          height: 14px;
          font-family: Lato-Regular, serif;
          color: $--menu-text;
          line-height: 14px;
        }
      }

      .menu-box {
        padding-left: 20px;
        height: 60px;
        margin: 0 0 0 25px;
        position: relative;
        box-sizing: border-box;

        .short-menu {
          width: 100%;
          height: 100%;
          display: flex;
          //justify-content: space-between;
          align-items: center;
          column-gap: 16px;

          .home-icon {
            cursor: pointer;
            height: 32px;
            position: relative;

            svg {
              user-select: none;
              font-size: 33px;
            }
          }

          .more-box {
            height: 100%;
            cursor: pointer;
            display: flex;
            align-items: center;

            .reference-box-collapse {
              width: 65px;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s;
              background-color: transparent;

              span {
                display: inline-block;
                width: 32px;
                height: 32px;
                background: url('~@/assets/img/publicLayout/more-icon.png')
                  no-repeat 50% 70%;
                background-size: 100% 100%;
                transition: all 0.2s;
              }

              &.expansion {
                background-color: $--system-module-color1;
                height: 100%;

                span {
                  background: url('~@/assets/img/publicLayout/more-icon-blue.png')
                    no-repeat 50% 70%;
                  background-size: 100% 100%;
                }
              }
            }

            .reference-box {
              height: 100%;
              display: flex;
              align-items: center;
              user-select: none;
              column-gap: 8px;
              white-space: nowrap;
              padding: 0 16px;
              position: relative;

              &::before {
                content: '';
                position: absolute;
                width: 1px;
                height: 16px;
                background-color: $--menu-text;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
              }

              span {
                font-size: 16px;
                font-family: Microsoft YaHei, serif;
                font-weight: 400;
              }

              svg {
                width: 30px;
                height: 28px;
                margin-top: 1px;
              }

              &.expansion {
                background-color: $--system-module-color1;
                height: 100%;

                span,
                svg {
                  color: $--system-hover-active-text;
                }

                &::before {
                  background-color: $--system-module-color1;
                }
              }
            }
          }
        }

        .all-menu {
          position: absolute;
          left: 69px;
          bottom: 0;
          width: 660px;
          height: 0;
          z-index: 1000;
          transition: height 0.2s, bottom 0.2s, opacity 0.1s;
          opacity: 0;
          pointer-events: none;
          overflow: hidden;
          background: $--system-module-color1;
          border-radius: 0 0 16px 16px;
          box-shadow: 0 4px 10px 0 $--system-box-color3;

          &.all-menu-show {
            bottom: -312px;
            height: 312px;
            opacity: 1;
            pointer-events: auto;
          }

          .all-menu-content {
            width: 100%;
            height: 100%;
            padding: 24px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            column-gap: 8px;
            row-gap: 8px;

            &:focus {
              outline: none;
            }

            .menu-btn {
              width: calc((100% - 32px) / 5);
              height: 120px;
              background: linear-gradient(
                360deg,
                $--system-box-color5 0%,
                $--system-box-color4 100%
              );
              border-radius: 8px;
              display: flex;
              flex-direction: column;
              row-gap: 0px;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              transition: all 1s;
              box-sizing: border-box;

              @mixin hover-active {
                background: linear-gradient(
                  360deg,
                  $--system-box-color1 0%,
                  $--system-box-color3 100%
                );

                span,
                svg {
                  color: $--system-hover-active-text;
                }
              }

              &:hover {
                @include hover-active;
              }

              &.menu-btn-active {
                @include hover-active;
              }

              span {
                display: inline-block;
                height: 24px;
                line-height: 24px;
                font-size: 16px;
                font-family: Microsoft YaHei, serif;
                font-weight: 400;
                color: $--menu-text;
                transition: all 0.3s;
                user-select: none;
                width: 100%;
                text-align: center;
                padding: 0 4px;
              }

              .system-img {
                width: 70px;
                height: 70px;
                display: flex;
                align-items: center;
                transition: all 0.3s;
              }

              // svg {
              //   font-size: 42px;
              //   color: $--menu-text;
              //   transition: all 0.3s;
              // }
            }
          }
        }
      }
    }

    .first-menus {
      display: flex;
      column-gap: 30px;
      height: 100%;
      position: absolute;
      left: 58%;
      transform: translateX(-50%);

      .first-menus-item {
        padding-top: 6px;
        height: 100%;
        display: flex;
        align-items: center;
        column-gap: 10px;
        position: relative;
        cursor: pointer;
        transition: all 0.2s;
        color: $--menu-text;
        user-select: none;
        box-sizing: border-box;

        &.active-menu {
          color: #fff;
          transform: scale(1.125) translateY(-5%);

          span {
            font-weight: 700;

            &::after {
              opacity: 1;
              transform: translate(-50%, 0%);
            }
          }
        }

        &:hover {
          color: #fff;

          span {
            color: #fff;
          }
        }

        span {
          display: flex;
          align-items: center;
          height: 100%;
          font-size: 16px;
          color: $--menu-text;
          transition: all 0.15s;
          white-space: nowrap;
          position: relative;

          &::after {
            content: '';
            width: 80%;
            height: 2.5px;
            background-color: #fff;
            border-radius: 5px;
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translate(-50%, 300%);
            opacity: 0;
            transition: all 0.2s;
          }
        }

        .header-icon {
          font-size: 18px;
        }

        .active-line {
          width: 40px;
          height: 4px;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          margin: 5px auto 0;
        }
      }
    }
  }

  .header-right {
    margin-right: 16px;
    display: flex;
    align-items: center;
    .ai-img{
      width: 28px;
      height: 24px;
      -webkit-user-drag: none;
      margin-right: 12px;
      cursor: pointer;
    }
    .bell-box {
      padding: 5px;
      cursor: pointer;
      user-select: none;

      ::v-deep .bell {
        display: flex;
        align-items: center;

        img {
          width: 24px;
          height: 24px;
          -webkit-user-drag: none;
        }

        .el-badge__content {
          display: flex;
          align-items: center;
          height: 18px;
          border-radius: 100px;
          box-sizing: border-box;
          padding: 0 6px;
          font-size: 12px;
          font-family: Microsoft YaHei, serif;
          font-weight: 400;
          color: $--menu-text;
        }
      }
    }

    .avatar {
      margin: 0 8px 0 40px;
    }

    .input {
      width: 340px;
      height: 40px;
      border-radius: 4px;
      margin: 19px 36px;
      margin-left: 24px;

      ::v-deep .el-input input,
      ::v-deep .el-input-group__append {
        background-color: #f1f1f1;
        border: none;

        .el-icon-search {
          font-size: 18px;
        }
      }

      ::v-deep .el-input-group {
        height: 100%;
      }

      ::v-deep .el-input {
        input {
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0;
          height: 100%;
        }

        input::-webkit-input-placeholder {
          // 针对 谷歌 内核
          font-family: Microsoft YaHei, serif;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0;
          color: #c4c4c4;
        }

        input:-moz-placeholder {
          // 火狐
          font-family: Microsoft YaHei, serif;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0;
          color: #c4c4c4;
        }

        input:-ms-input-placeholder {
          // 微软ie
          font-family: Microsoft YaHei, serif;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0;
          color: #c4c4c4;
        }
      }
    }

    .user-box {
      display: flex;
      flex-direction: column;
      margin-right: 10px;
      row-gap: 2px;

      .welcome {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei, serif;
        color: $--menu-text;
        font-weight: 700;

        i {
          color: $--menu-text;
          font-size: 14px;
          margin-left: 8px;
        }
      }

      .department {
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei, serif;
        font-weight: 400;
        color: $--menu-text;
      }
    }
  }
}

.operation-manual {
  color: #2761ff;
  background: #e9efff;
  padding: 6px 12px;
  border: 1px solid #a9c0ff;
  cursor: pointer;
  margin-right: 20px;
  font-weight: bold;
  border-radius: 5px;

  i {
    color: #2761ff;
    margin-right: 6px;
  }

  .sub-back {
    color: #fff;
  }

  &:first-child {
    color: #fff;
    background: #2761ff;
    border: 1px solid #2761ff;
  }
}

.action-btn {
  width: 100px;
  height: 35px;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0;
  margin: 0 10px 0 0;
}

.operation-manual:hover {
  background: #2761ff;
  border-color: #2761ff;
  color: $--menu-text;

  i {
    color: $--menu-text;
  }
}

.el-avatar {
  width: 30px;
  height: 30px;
}

.el-avatar i {
  font-size: 16px;
  color: #c0c4cc;
}

.user-box-header {
  padding: 10px;

  h3 {
    font-weight: bold;
    margin: 2px 0;
  }
}

.user-link-ul {
  list-style: none;
  padding: 0;
  margin: 0;

  > li {
    padding: 8px 5px;
    cursor: pointer;
  }

  > li > i {
    margin-right: 5px;
    font-size: 16px;
    font-weight: bold;
  }

  > li:hover {
    color: $--system-hover-active-text;
    background-color: $--system-box-color3;
  }

  .el-link {
    color: #606266 !important;

    i {
      font-size: 16px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
}

.user-box-logout {
  justify-content: center;
  background: $--navigator-main-color;
  // border-top: 1px solid rgba($--navigator-text-color,0.1);
  // border-bottom: 1px solid rgba($--navigator-text-color,0.1);
  // margin-top: 10px;
  color: $--navigator-main-text-color !important;
}

.user-box-logout:hover {
  background: $--navigator-main-text-color;
}

.user-box-logout > .el-link {
  line-height: 46px;
  width: 100%;
  color: $--navigator-main-text-color !important;
  background: $--navigator-main-color;
}

.user-box-logout > .el-link:hover,
.user-box-logout > .el-link:focus {
  color: $--navigator-main-text-color !important;
}

.qr-icon {
  width: 24px;
  height: 24px;
  padding: 5px;
  -webkit-user-drag: none;
}
.qr-tips {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
}
.screen-menu {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  cursor: pointer;
  i {
    font-size: 14px;
  }
}
.screen-menu:hover {
  color: $--system-hover-active-text;
  background-color: $--system-box-color3;
}
</style>

<style lang="scss">
.menu-popover {
  min-width: 0 !important;
}

.header-popper {
  width: 150px !important;
  border-radius: 10px;
  overflow: hidden;
  padding: 8px 12px 16px !important;
  vertical-align: middle;
  right: 50px !important;
  left: initial !important;
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 10%);

  * {
    font-size: 13px;
  }
}

.qr-code-popover.el-popper[x-placement^='bottom'] {
  .popper__arrow {
    border-bottom-color: #43a1ff;
    top: -0.355vw;
  }
  .popper__arrow::after {
    border-bottom-color: #43a1ff;
  }
}
</style>
