<template>
  <div class="navbar">
    <div class="left-menu">
        <i class="el-icon-arrow-left icon-menu" slot="reference" @click="backHome()"></i>
        <div class="divider"></div>
        <div class="text" :class="{'activate': status==1}" @click="changeStatus(1)">
          发起审批
        </div>
        <div class="text" :class="{'activate': status==2}" @click="changeStatus(2)">
          查看数据
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 1,
    }
  },
  methods: {
    backHome(){
      this.$router.push({path: '/'})
    },
    changeStatus(val){
      this.status = val;
      this.$parent.setStatus(this.status);
    },
  }
}
</script>
<style lang="scss" scoped>
.navbar {
  height: 60px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  
  .left-menu {
    font-size: 18px;
    padding: 0px 15px;
    float: left;
    height: 100%;
    // line-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .icon-menu:hover {
        background: #e6e8ed;
        border-radius: 3px;
    }
    .icon-menu{
      color: #525967;
      cursor: pointer;
      display: inline-block;
      font-size: 20px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      width: 30px;
    }
    .divider{
      height: 20px;
      margin: 0 5px;
      border: solid #EBECEE;
      border-width: 0 0 0 1px;
      display: inline-block;
      height: .9em;
      // margin: 0 15px;
      vertical-align: middle;
    }
    .text:hover {
        background: #e6e8ed;
    }
    
    .text{
      font-size: 18px;
      height: 50px;
      align-items: center;
      border-radius: 4px;
      color: gray;
      display: flex;
      padding: 0 20px;
      transition: background .2s ease;
    }
    .activate{
      color: black;
      font-weight: 800;
    }
  }
}
</style>
