<template>
  <el-header height="48px">
    <el-row>
      <el-col :span="6">
        <a href="https://www.npmjs.com/package/ein-ui"
           class="logo-link">
          {{`EinYunUI_${pkg&&pkg.version}`}}
        </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>
          <a href="http://git.hypersmart.ltd/einyun/eip/web/htui">资源</a>
          <el-divider direction="vertical"></el-divider>
          <el-dropdown size="small"
                       split-button
                       @command="handleCommand"
                       type="default">
            {{version}}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in versionList"
                                :command="item"
                                :key="String(item)+String(index)">{{item}}</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 pkg from '../../package.json'
import menu from '@/api/menu.js'
import LangSelect from '@/components/langSelect/LangSelect.vue'
import EinUi from '@/components/index'
import utils from '@/utils'

export default {
  name: 'navigator',
  components: { LangSelect },
  data () {
    return {
      menus: [],
      versionList: [pkg.version, '2.1.0-beta.2', '1.0.0-beta.8'],
      pkg: pkg,
      searchWork: '',
      version: EinUi.version
    }
  },
  methods: {
    async handleCommand (v) {
      let pathStr = location.pathname || []
      let arr = pathStr && pathStr.split('/')
      arr && arr.shift()
      arr && arr.splice(1, 1, v)
      const resultPath = arr && arr.join('/')
      location.pathname = resultPath
    },
    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>
