<template>
  <div
    class="yj-base-header"
    id="page-header"
  >
    <div class="logo">
      <img
        v-if="projectLogo"
        :src="projectLogo"
        alt=""
      />
      <label v-if="projectName">{{projectName}}</label>
    </div>

    <section class="header-nav">
      <div>
        <el-tabs
          class="menu"
          v-model="menuIndex"
          :before-leave="beforeChange"
          @tab-click="changeMenu"
        >
          <template v-if="menuList && menuList.length">
            <el-tab-pane
              :class="'test'"
              v-for="(item, index) in menuList"
              :key="index"
              :label="item.name"
              :name="index + ''"
            ></el-tab-pane>
          </template>
        </el-tabs>
      </div>
    </section>

    <div class="menu-right">
      <slot name="right"></slot>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <i class="el-icon-user-solid"></i>
          {{ userName }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="base-header-dropdown-menu">
          <el-dropdown-item
            v-for="(item, index) in dropdownList"
            :key="index"
            :command="item.value"
          >
            {{item.label}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'baseHeader',
  props: {
    isNewWindow: {
      type: Boolean,
      default: true,
    },
    projectLogo: {
      type: String,
      default: '',
    },
    projectName: {
      type: String,
      default: '',
    },
    userName: {
      type: String,
      default: '',
    },
    tokenKey: {
      type: String,
      default: 'APP_TOKEN',
    },
    isFullPath: {
      type: Boolean,
      default: false,
    },
    dropdownList: {
      type: Array,
      default() {
        return []
      }
    },
    menuList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      menuOldIndex: '-1',
      menuIndex: '-1',
      isChangeMenu: false,
    };
  },
  watch: {
    menuList: {
      handler() {
        this.setMenuIndex()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    setMenuIndex() {
      let index = -1;

      for (let i = 0, len = this.menuList.length;i < len;i++) {
        if (location.pathname.indexOf(this.menuList[i].menuUrl) > -1) {
          index = i;
          break;
        }
      }

      if (index === -1) {
        let baseMoudle = location.pathname.split('/')[2] || location.pathname.split('/')[1] || location.pathname.split('/')[0];
        for (let i = 0, len = this.menuList.length;i < len;i++) {
          if (this.menuList[i].menuUrl.indexOf(baseMoudle) > -1) {
            index = i;
            break;
          }
        }
      }

      if (index === -1) {
        index = 0
      }

      this.menuIndex = index + ''
      this.menuOldIndex = this.menuIndex
    },
    beforeChange (activeName, oldActiveName) {
      let item = this.menuList[Number(activeName)]
      // 外链
      if (item.type == 'redirect') {
        this.$emit('redirect', item)
        this.isChangeMenu = false
        return false
      }

      this.isChangeMenu = true
      return true
    },
    async changeMenu(item) {
      if (!this.isChangeMenu) {
        return
      }

      this.menuIndex = item.name

      // 如果是当前导航，则不触发
      if (this.menuOldIndex === item.name) {
        return
      }

      let menuInfo = this.menuList[Number(item.name)];
      let menuUrl = this.changeDevHost(menuInfo.menuUrl);
      let separator = menuUrl.indexOf('?') > -1 ? '&' : '?';
      let url = menuUrl + separator + this.getParamStr(menuInfo)

      setTimeout(() => {
        this.menuIndex = this.menuOldIndex;
      }, 500);

      if ((this.$route.query.isRefresh || !this.isNewWindow) && item.type != 'redirect') {
        window.location.href = url
      } else {
        window.open(url, menuInfo.menuUrl);
      }
    },
    handleCommand(value) {
      this.$emit('rightDropClick', value)
    },
    getParamStr(menuInfo) {
      let menuUrlParamKeyList = []
      if (menuInfo.menuUrl.indexOf('?') > -1) {
        let menuUrlParams = menuInfo.menuUrl.split('?')[1]
        if (menuUrlParams) {
          menuUrlParams.split('&').forEach((item) => {
            let paramItemArr = item.split('=')
            menuUrlParamKeyList.push(paramItemArr[0])
          }) 
        }
      }

      let paramData = []
      // let topNavParams = sessionStorage.getItem('topNavParams')

      let menuParamData = this.$route.query

      // if (topNavParams && topNavParams != 'undefined') {
      //   topNavParams.split('&').forEach((item) => {
      //     let paramItemArr = item.split('=')
      //     menuParamData[paramItemArr[0]] = paramItemArr[1]
      //   })   
      // } else {
      //   menuParamData = this.$route.query
      // }

      // 从其他窗口跳回带tab大于当前菜单长度需要优化，暂时删除
      delete menuParamData['TAB']
      

      let queryData = Object.assign(menuParamData, {
        token: menuInfo.token || localStorage.getItem(this.tokenKey),
        menuId: menuInfo.primaryKey,
        parentMenuId: menuInfo.parentId,
        timestamp: new Date().getTime()
      })

      for (let key in queryData) {
        if (menuUrlParamKeyList.indexOf(key) < 0) {
          paramData.push(key + '=' + queryData[key])
        }
      }

      return paramData.join('&')
    },
    changeDevHost(url) {
      let urlHost = url.match(/^(?:[^\/]|\/\/)*/)
      // 开发环境替换域名为本地ip
      if (process.env.NODE_ENV === 'development' && window.devHostMap && urlHost && window.devHostMap[urlHost]) {
        url = url.replace(urlHost, window.devHostMap[urlHost])
      }
      return url
    },
    getUrlPath(url) {
      url = url.replace(/^(?:[^\/]|\/\/)*/, '').split('?')[0]
      return url
    },
    setMenuStorge(type, url) {
      // 初始进入一级导航时缓存一级导航参数
      // if (type == 'init') {
      //   sessionStorage.setItem('topNavParams', url.split('?')[1])
      // }

      if (!this.menuList[Number(this.menuIndex)]) {
        return
      }

      sessionStorage.setItem('menuId', this.menuList[Number(this.menuIndex)].primaryKey)
      sessionStorage.setItem('rootMenuId', this.menuList[Number(this.menuIndex)].parentId)
    }
  },
};
</script>

<style lang="scss" >
.yj-base-header {
  width: 100%;
  height: 60px;
  background-color: $header-background-color;
  position: relative;
  top: 0;
  z-index: 110;
  display: flex;
  align-items: center;

  .header-nav {
    flex: 1;
    height: 60px;
    padding: 0 15px 0 30px;
    overflow: hidden;
    .el-tabs__header {
      margin: 0;
      background-color: $header-background-color;

      .el-tabs__nav-wrap {
        overflow: visible;
      }

      .el-tabs__nav-wrap.is-scrollable {
        padding: 0;
      }

      .el-tabs__nav-prev {
        left: -16px;
      }

      .el-tabs__nav-next {
        right: -16px;
      }

      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        color: #fff;
        font-size: 16px;
        line-height: 60px;
      }

      .el-tabs__nav-wrap::after {
        height: 0;
        display: none;
      }

      .el-tabs__item {
        height: 60px;
        line-height: 60px;
        padding: 0 15px !important;
        color: $header-font-color;
        font-size: 16px;

        &:hover {
          background: rgba(0, 0, 0, 0.3) !important;
        }
      }

      .el-tabs__active-bar {
        display: none;
      }
    }

    .is-active {
      background: rgba(0, 0, 0, 0.3) !important;
      color: $header-active-font-color !important;
    }
  }

  .menu-right {
    font-size: 14px;
    color: #fff;
    text-align: right;
    display: flex;
    justify-content: center;
    line-height: 60px;
    display: flex;
    align-items: center;
    padding-right: 20px;
    margin-left: 20px;

    .el-dropdown {
      font-size: 16px;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #fff;
      display: inline-block;
      height: 100%;
    }
    .el-icon-arrow-down {
      font-size: 16px;
    }
  }

  .logo {
    min-width: 100px;
    max-width: 200px;
    background-color: $header-background-color;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 600;
    height: 60px;
    color: $white;
    padding-left: 20px;
    white-space: nowrap;
    padding-left: 30px;
    img {
      height: 35px;
      margin-right: 20px;
    }
  }
}
.el-dropdown-menu--small .el-dropdown-menu__item {
  font-size: 16px;
}
.base-header-dropdown-menu{
  margin-top: 0 !important;
  .popper__arrow{
    display: none;
  }
}
</style>