<template>
  <el-header height="48px">
    <el-row>
      <el-col :span="6">
        <a href="/" class="logo-link">
          <img
            src="data:image/x-icon;base64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAABMLAAATCwAAAAAAAAAAAADGkifzxpIn8saSJ/LGkifyxpIn8saSJ/LGkif2x5UxmM2/wwHInEkAAAAAAAAAAAAAAAAAAAAAAAAAAADMs4kAx5MqAMiYNmLHkyjyxpIn8saSJ/LGkifyxpIn8saSJ/LGkifzx5Mp58iXND3IljMAAAAAAAAAAAAAAAAAAAAAAMCMJP/AjCT/wIwk/8CMJP/AjCT/wIwk/8CMJP/AjSmmwZ5iAsKWQQAAAAAAAAAAAAAAAAAAAAAAAAAAAM2xhADAjSUAwpIzaMCMJf/AjCT/wIwk/8CMJP/AjCT/wIwk/8CMJP/AjCXyw5IxP8KRMAAAAAAAAAAAAAAAAAAAAAAAuoYj/7qGI/+6hiP/uoYj/7qGI/+6hiP/uoYj/7uJKrjFomYIxaRqAAAAAAAAAAAAAAAAAAAAAAAAAAAAy7CFALqHJQC9jTJnuock/rqGI/+6hiP/uoYj/7qGI/+6hiP/uoYj/7qHJPK9jDE/vYwvAAAAAAAAAAAAAAAAAAAAAAC0gCL/tIEi/7SBIv+0gSL/tIEi/7SBIv+0gCL/toMozsCbWxXCn2MAAAAAAAAAAAAAAAAAAAAAAAAAAADLr4QAtYIkALiIMWe1gSP+tIEi/7SBIv+0gSL/tIEi/7SBIv+0gCL/tYEk8reHMD+3hy4AAAAAAAAAAAAAAAAAAAAAAK97If+veyH/r3sh/697If+veyH/r3sh/697If+wfSXmtog9LLSGOAAAAAAAAAAAAAAAAAAAAAAAAAAAAMuwhQCwfCMAtIMxZ7B7Iv6veyH/r3sh/697If+veyH/r3sh/697If+wfCPys4IvP7OCLgAAAAAAAAAAAAAAAAAAAAAAqnUg/6p1IP+qdSD/qnUg/6p1IP+qdSD/qnUg/6p2IvqwgDVXqXQeANrPxQAAAAAAAAAAAAAAAAAAAAAAy6+FAKt2IgCvfjBnqnYh/qp1IP+qdSD/qnUg/6p1IP+qdSD/qnUg/6t2IvKvfS4/rn0tAAAAAAAAAAAAAAAAAAAAAAClcB//pXAf/6VwH/+lcB//pXAf/6VwH/+lcB//pXAf/6h2KpT0//8BupdjAAAAAAAAAAAAAAAAAAAAAADLroYApnIhAKt6L2emcSD+pXAf/6VwH/+lcB//pXAf/6VwH/+lcB//pnEh8qp5LT+qeCwAAAAAAAAAAAAAAAAAAAAAAKBrH/+gax//oGsf/6BrH/+gax//oGsf/6BrH/+gax//oW4k1K2ESR2rgEMAAAAAAAAAAAAAAAAAAAAAAMqvhgCgbCEApnYvZ6BsIP6gax//oGsf/6BrH/+gax//oGsf/6BrH/+gbCDypXQtP6RzKwAAAAAAAAAAAAAAAAAAAAAAmmYe/5pmHv+aZh7/mmYe/5pmHv+aZh7/mmYe/5pmHv+bZx/7onIxZYRDAADAo30AAAAAAAAAAAAAAAAAzK+IAJtnIACicS5nm2cf/ppmHv+aZh7/mmYe/5pmHv+aZh7/mmYe/5tnIPKhcCw/oG8rAAAAAAAAAAAAAAAAAAAAAACXYx7/l2Me/5djHv+XYx7/l2Me/5djHv+XYx7/l2Me/5diHv+aZyTEq4BNFqZ6QwAAAAAAAAAAAAAAAADLr4gAl2QgAJ9uLmeXYx/+l2Me/5djHv+XYx7/l2Me/5djHv+XYx7/mGQf8p5tLD+dbCsAAAAAAAAAAAAAAAAAAAAAAJZiHv+WYh7/lmIe/5ZiHv+WYh7/lmIe/5ZiHv+WYh7/lmIe/5diH/ucaytxAAAAAK2FUgAAAAAAAAAAAMuviQCXZCEAnm0vZ5diH/6WYh7/lmIe/5ZiHv+WYh7/lmIe/5ZiHv+XYyDynmwtP51rKwAAAAAAAAAAAAAAAAAAAAAAmGMd/5hjHf+YYx3/mGMd/5hjHf+YYx3/mGMd/5hjHf+YYx3/mGMd/5plIN+ldTc2nmooAP///wAAAAAAzbGJAJllIACgby5nmWQe/phjHf+YYx3/mGMd/5hjHf+YYx3/mGMd/5lkH/KgbSw/n2wqAAAAAAAAAAAAAAAAAAAAAACcZR7/nGUe/5xlHv+cZR7/nGUe/5xlHv+cZR7/nGUe/5xlHv+cZR7/nGUe/6BqJLurfD4bp3U1AAAAAADPsokAnWcgAKRwLmedZh/+nGUe/5xlHv+cZR7/nGUe/5xlHv+cZR7/nWYf8qNvLD+ibisAAAAAAAAAAAAAAAAAAAAAAKFoHv+haB7/oWge/6FoHv+haB7/oWge/6FoHv+haB7/oWge/6FoHv+haB7/oWge/qNtJaCxg0YSqXYyANGziwCiaSEAqHMvZ6FoH/6haB7/oWge/6FoHv+haB7/oWge/6FoHv+haSDypnItP6ZxKwAAAAAAAAAAAAAAAAAAAAAApGsf/6RrH/+kax//pGsf/6RrH/+kax//pGsf/6RrH/+kax//pGsf/6RrH/+kax//pGsg/KdwJ5qygUAUpWseAKVsIgCqdS9npGsg/qRrH/+kax//pGsf/6RrH/+kax//pGsf/6RsIfKpdC0/qXMsAAAAAAAAAAAAAAAAAAAAAACnbR//p20f/6dtH/+nbR//p20f/6dtH/+nbR//p20f/6dtH/+nbR//p20f/6dtH/+nbR//p20f/KtyJ6myfzkhqnIiALF8MmKobyH9p20f/6dtH/+nbR//p20f/6dtH/+nbR//qG4h8q13Lj+sdi0AAAAAAAAAAAAAAAAAAAAAAKpwH/+qcCD/qnAg/6pwIP+qcCD/qnAg/6pwIP+tdCP3rXIh/apwH/+qcCD/qnAg/6pwIP+qcCD/qnAg/qx0JcaxfDJBxZZKIbeALaSudCL3qnAf/6pwH/+qcCD/qnAg/6pwH/+rcSHyr3kuP694LQAAAAAAAAAAAAAAAAAAAAAArXMh/61zIf+tcyH/rXMh/61zIf+tcyH/rXMh/7aAMpy7hjKKsnom5q50If+tcyH/rXMh/61zIf+tcyH/rXMh/650I+eyeix9wpJJJb+KNl61fSnMr3Ui/K1zIf+tcyH/rXMh/650I/KzfC8/snsuAAAAAAAAAAAAAAAAAAAAAACxdSL/sXUi/7F1Iv+xdSL/sXUi/7F1Iv+xdSL/t38yfP///wHGlEM3vIUxnLV8J+mydyP/sXUi/7F1Iv+xdSL/sXUi/7F2IvyzeSfGuIAzWcWTRCy+hzJyt34p0bN4JPuxdSL/snYj8rZ+MD+2fS4AAAAAAAAAAAAAAAAAAAAAALV4JP+2eCT/tngk/7Z4JP+2eCT/tngk/7Z4JP+6gjR9lj4AANOqYwDZtW4GxZI+OL6HMpS6fynht3ol/bZ4JP+1eCT/tngk/7V4JP+2eSX2uHwquryENlzGlUg1wY05abyDLrq5fyrgvIQzPruDMgAAAAAAAAAAAAAAAAAAAAAAunsn/7p8J/+6fCf/unwn/7p8J/+6fCf/unsn/76FNn2eRAAA1rSEAP///wDOokwA17JmBMiWQivCijV5voQtybt/Kfa6fCf/unsn/7p7J/+6eyf/unwo+Lx+LMq/gzR7xpFGQ8iWR0DJm08VyZpOAAAAAAAAAAAAAAAAAAAAAAC+fir/vn4q/75+Kv++fir/vn4q/75+Kv++fir/woc5faRJAADXtYUAAAAAAAAAAAAAAAAA4MWCAPTrtQHNoFAVxpM/TsOKNZjAhS/WvoEs975/Kv++fir/vn4q/75+Kv6+gCzpwIIwtcKHN3fEjEA+yJRQF9OmdgPIl1UA/+n/AMKCLf/Cgi3/woIt/8KCLf/Cgi3/woIt/8KCLf/Fizx9qk8AANm3hgAAAAAAAAAAAAAAAAAAAAAAAAAAANiwdwCBMwAA1atsCsygVB7Gkj1Mw4w1i8KIMsLChS/nwoQu+sGCLf/Bgi3/wYIt/8KDL/LDhjLRxYw6pMuZUnTRpWg9xYUw/8WFMP/FhTD/xYUw/8WFMP/FhTD/xYUw/8mNPn2xVAAA27iHAAAAAAAAAAAAAAAAAAAAAAAAAAAA1694AP///wHKkEJwyIo4kcuPQVLPmVEoz59VHcqbTC/Gkj5Uxo45f8WLNabFijTGxIgy28SHMOzIkkL20aZmuNOrbl3IhzL/yIcy/8iHMv/IhzL/yIcy/8iHMv/IhzL/y49AfLRaAADduIkAAAAAAAAAAAAAAAAAAAAAAAAAAADbtYMA////AsyQQZrIhjH/yIcz+smINePJiTe9yos6ksyPQmfMkkZHzJRGNs6eVBzJmkgex5Q/LsyeVD3UrXEv2biFDsiHMv/IhzL/yIcy/8iHMv/IhzL/yIcy/8iHMv/Lj0B8tVoAAN24iQAAAAAAAAAAAAAAAAAAAAAAAAAAANu1hAD///8CzJBBmsiHMf/IhzL/yIcy/8iHMv/IhzL/yIcy/siHM/jJiTXhy44/OMqOPQAAAAAAAAAAAAAAAAAAAAAAyIcy/8iHMv/IhzL/yIcy/8iHMv/IhzL/yIcy/8uPQHy1WgAA3LiJAAAAAAAAAAAAAAAAAAAAAAAAAAAA2rWDAP///wLMkEGayIcx/8iHMv/IhzL/yIcy/8iHMv/IhzL/yIcy/8iHM/LKjT8+yo0+AAAAAAAAAAAAAAAAAAAAAADIhzL/yIcy/8iHMv/IhzL/yIcy/8iHMv/IhzL/y49AfLVZAADcuIgAAAAAAAAAAAAAAAAAAAAAAAAAAADatYMA////AsyQQprIhzH/yIcy/8iHMv/IhzL/yIcy/8iHMv/IhzL/yIc08cuNPz7KjD4AAAAAAAAAAAAAAAAAAAAAAMiHMv/IhzL/yIcy/8iHMv/IhzL/yIcy/8iHMv/Lj0B9tFgAAN24hwAAAAAAAAAAAAAAAAAAAAAAAAAAANq1gwD///8CzJBBmsiHMf/IhzL/yIcy/8iHMv/IhzL/yIcy/8iHMv/IhzTxy40/PsqMPgAAAAAAAAAAAAAAAAAAAAAAyIcy/8iHMv/IhzL/yIcy/8iHMv/IhzL/yIcy/8uPQHy1WQAA3LiJAAAAAAAAAAAAAAAAAAAAAAAAAAAA27WEAP///wLMkEKayIcx/8iHMv/IhzL/yIcy/8iHMv/IhzL/yIcy/8iINPHLjT8+yo0+AAAAAAAAAAAAAAAAAAAAAADIhzL/yIcy/8iHMv/IhzL/yIcy/8iHMv/IhzL/y49AfLVZAADcuIkAAAAAAAAAAAAAAAAAAAAAAAAAAADatIMA////AsuQQZrIhzH/yIcy/8iHMf/IhzH/yIcx/8iHMf/IhzH/yIcz8sqNPj7KjD0AAAAAAAAAAAAAAAAAAAAAAMaKM/LGijPxxosz8caLM/HGijPxxooz8caKM/TKkkF1s18AAN6/kgAAAAAAAAAAAAAAAAAAAAAAAAAAANaweQD///8ByZJBf8aLNNvHjTfayI874MmPPOLIjzziyI884siPPOPJkD3WypRFNsqURAAAAAAAAAAAAAAAAAAAAAAAAH+AHwB/gB8Af4AfAH+AHwB/gB8Af4AfAD+AHwA/gB8AP4AfAB+AHwAfgB8AD4AfAAeAHwADgB8AAYAfAACAHwAAAB8AAAAfAAAAHwDAAB8A8AAfAPwAAwD/gAAA/wAAAP8AAAD/AB8A/wAfAP8AHwD/AB8A/wAfAP8AHwD/AB8="
            alt="hotent-logo"
            class="nav-logo"
          />
          Hotent
        </a>
      </el-col>
      <el-col :span="18">
        <div class="nav-more">
          <el-autocomplete
            popper-class="my-autocomplete"
            size="small"
            class="inline-input"
            v-model="searchWork"
            :fetch-suggestions="querySearch"
            placeholder="搜索组件"
            :trigger-on-focus="false"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div class="index">{{ item.index }}</div>
              <span class="label">{{ item.label }}</span>
            </template>
          </el-autocomplete>
          <el-divider direction="vertical"></el-divider>
          <span>指南</span>
          <el-divider direction="vertical"></el-divider>
          <span class="active">组件</span>
          <el-divider direction="vertical"></el-divider>
          <span>资源</span>
          <el-divider direction="vertical"></el-divider>
          <el-dropdown size="small" split-button type="default" @command="handleChoseVersion">
            {{ currentVersion }}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="version in versions"
                :key="version"
                :command="version"
              >{{ version }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
          <lang-select class="right-menu-item hover-effect" />
        </div>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
import menu from "@/api/menu.js";
import LangSelect from "@/components/langSelect/LangSelect.vue";
import HotentUi from "@/components/index";
import utils from '@/utils'

export default {
  name: "navigator",
  components: { LangSelect },
  data() {
    return {
      menus: [],
      searchWork: "",
      versions: ['1.0.0-rc2', '1.0.0-rc1', HotentUi.version],
    };
  },
  computed: {
    currentVersion: function() {
      return this.pathToVersion()
    },
  },
  methods: {
    querySearch(queryString, cb) {
      var menus = this.menus;
      var results = queryString
        ? menus.filter(this.createFilter(queryString))
        : menus;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return menu => {
        return (
          menu.index.toLowerCase().indexOf(queryString.toLowerCase()) != -1 ||
          menu.label.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        );
      };
    },
    handleSelect(item) {
      this.$router.push({ path: `/${item.index}` });
    },
    handleChoseVersion(cmd) {
      const path = this.versionToPath(cmd)
      window.location.href = `/${path}`
    },
    versionToPath(version) {
      const verAry = utils.stringSplit(version, '.')
      return `${verAry[0]}.${verAry[1]}`
    },
    pathToVersion() {
      const reg = new RegExp(/^\d+\.\d+$/)
      const pathAry = utils.stringSplit(window.location.pathname, '/')
      if (!pathAry || pathAry.length < 1 || !reg.test(pathAry[0])) {
        return this.versions[0]
      }
      const version = this.versions.find((v) => v.startsWith(pathAry[0]))
      return version || this.versions[0]
    },
  },
  mounted() {
    menu.getComponentMenus(menus => {
      this.menus = menus;
    });
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  line-height: 48px;
  color: #555;
  background: #fff;
  -moz-box-shadow: 1px 1px 1px #ddd;
  box-shadow: 1px 1px 1px #ddd;
}

.logo-link {
  margin-left: 30px;
  font-weight: bold;
  font-size: 18px;
  color: #2274af;
  text-decoration: none;
}

.nav-logo {
  width: 25px;
  height: 25px;
  line-height: 25px;
  vertical-align: middle;
  margin-top: -6px;
}

.nav-more {
  float: right;
  margin-right: 30px;
}

.nav-more .el-divider {
  margin-left: 20px;
  margin-right: 20px;
}

.nav-more span {
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}

.nav-more span.active {
  padding-top: 13px;
  border-top: 2px solid #2274af;
  color: #2274af;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .index {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .label {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .index {
      color: #ddd;
    }
  }
}
</style>
