<template>
  <div>
    <div class="header">
      <el-menu default-active="baseSetting" active-text-color="#409eff" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="baseSetting" @click="to('baseSetting')">① 基础信息</el-menu-item>
        <el-menu-item index="processDesign" @click="to('processDesign')">② 审批流程</el-menu-item>
      </el-menu>
      <div class="publish">
        <el-button size="mini"><i class="el-icon-view"></i>预览</el-button>
        <el-button size="mini" type="primary"><i class="el-icon-s-promotion"></i>发布</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'LayoutHeader',
  props: {
    value: {
      type: String,
      default: 'baseSetup'
    }
  },
  data() {
    return {
      viewCode: false
    }
  },
  computed: {},
  created() {
  },
  mounted() {
  },
  methods: {
    to(path) {
      this.$emit('input', path)
    },
  }
}
</script>
<style scoped>
.header {
  min-width: 980px;
  position: relative;
}

.header .el-menu {
  top: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  width: 100%;
}

.header .publish {
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 1000;
}

.header .publish i {
  margin-right: 6px;
}

.header .publish button {
  border-radius: 15px;
}

.back {
  position: absolute;
  z-index: 1000;
  top: 10px;
  left: 20px;
  font-size: small;


}

.back span i {
  border-radius: 10px;
  padding: 7.8px;
  font-size: 20px;
  color: #ffffff;
  margin: 0 10px;
}
</style>
