<template>
  <div style="display: flex">
    <div class="left-list-box vertical-tab">
      <el-tabs
        tab-position="left"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane name="first">
          <span slot="label">
            <i class="el-icon-folder-opened icon"> </i> 电子发票管理
          </span>
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label">
            <i class="el-icon-folder-opened icon"> </i> 随货同行单管理
          </span>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div  class="right-common-box">
      <ele-invoice-manage v-if="activeName == 'first'"></ele-invoice-manage>
      <accompany-manage v-if="activeName == 'second'"></accompany-manage>
    </div>
  </div>
</template>

<script>
import eleInvoiceManage from "./components/ele-invoice-manage";
import accompanyManage from "./components/accompany-manage";
export default {
  components: {
    eleInvoiceManage,
    accompanyManage
  },

  data() {
    return {
      activeName: "first"
    };
  },

  created() {},

  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  }
};
</script>

<style scoped lang="scss">
.left-box {
  width: 18%;
  margin-right: 20px;
  border-radius: 6px;
  background-color: #fff;
  height: 100%;
  overflow-y: auto;
}
.icon {
  margin-right: 10px;
}
</style>
