<template>
  <el-row class="page_header"> 
    <el-col :span="1" style="margin: 10px 0px 0px 5px;font-size:10px;width:20px"><img src="../assets/iconfont/4.png"/></el-col>
    <el-col :span="1" style="margin: 12px 0px 0px 5px;font-size:10px"><p>当前位置</p></el-col>
    <el-col :span="7">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item style="margin-top: 13px;font-size:10px;color: #666666;text-decoration: underline;" :to="item.path" v-for="item in $route.matched.slice(1)" :key="item.path">{{item.name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
      <el-row :gutter="1" type="flex" class="row-bg" justify="end">
        <el-col :span="4" v-for="item in pageItems" :key="item.path" >
          <el-button :disabled="item.disabled" :class="{active:$route.matched[2] && $route.matched[2].name==item.name,menu2:true}"
          @click.native="routerReplace(item.path)">{{item.name}}</el-button>
        </el-col>
      </el-row>
  </el-row>
</template>

<script>
export default {
  name: "Menu2",
  props: {
    pageItems: Array
  },
  methods: {
    routerReplace(path) {
      this.$router.replace(path);
    }
  }
};
</script>
<style>
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page_header {
  min-height: 36px;
  margin-top: 18px;
  padding: 0px 5px 0px 5px;
  position: relative;
  background-color: #fafafa;
}
.menu2 {
  font-family: serif;
  /* opacity: 0.8;  */
  border: none;
  width: 100%;
  color: #999999;
  font-size: 10px;
  background-color: #d9d9d9;
  border-radius: 0%;
}
.menu2.active {
  background: #a6a6a6;
  color: #333333;
}
.menu2.el-button.is-disabled,
.menu2.el-button.is-disabled:hover {
  background-color: #d9d9d9;
}
.menu2.hover {
  background: #a6a6a6;
  color: #333333;
}
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 0;
  -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
</style>
