<template>
  <div class="the-menu">
    <el-menu :default-active="activeIndex" class="the-menu-box" mode="horizontal" @select="handleSelect" text-color="#fff" active-text-color="#0780CF" router>
      <el-menu-item v-for="(menu, key) in menuListUrl" :index="menu.url" :key="key" class="the-menu-item">{{ menu.name }}</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  computed: {
    activeIndex() {
      const route = this.$route
      const { name } = route

      return name
    }
  },
  data() {
    return {
      menuListUrl: [
        { name: '指挥中心', url: 'home' },
        { name: '技术管理', url: 'technology' },
        { name: '质量管理', url: 'quality' },
        { name: '安全管理', url: 'security' },
        { name: '进度管理', url: 'schedule' },
        { name: '人员管理', url: 'personnel' },
        { name: '材料管理', url: 'material' },
        { name: '机械管理', url: 'mechanical' },
        { name: '视频监控', url: 'video' }
      ]
    }
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss">
.the-menu {
  height: px2rem(58);
  padding: px2rem(6) 0 0 px2rem(24);
}
.el-menu {
  background: transparent !important;
}
.el-menu.el-menu--horizontal {
  border: none !important;
}
.the-menu-box {
  display: flex;
  justify-content: space-between;
  flex: 7;
  box-sizing: border-box;
}
.the-menu-item,
.el-menu-item {
  flex: 1;
  background: url(@/assets/menu.gif) no-repeat;
  background-size: cover;
  text-align: center;
  font-size: px2rem(14) !important;
  font-weight: 900;
  margin-right: px2rem(24) !important;
  cursor: pointer;
  height: px2rem(52) !important;
  line-height: px2rem(52) !important;
}
.the-menu-item:last-child {
  margin-right: 0;
}
.el-menu--horizontal > .el-menu-item,
.el-menu--horizontal > .el-menu-item.is-active {
  border: none !important;
}
</style>
