<template>
  <!-- 业务中心 -->
  <div class="business whiteBlock">
    <div class="business">
      <el-menu
        :default-active="activeIndex"
        @select="handleSelect"
        class="business-menu-demo"
        mode="horizontal"
        text-color="#262D47"
        active-text-color="#5181F6"
      >
        <el-menu-item index="1">工时统计表</el-menu-item>
        <el-menu-item index="2">工时异常表</el-menu-item>
      </el-menu>

      <WorkHoursStatisticsTable
        v-if="activeIndex == '1'"
        style="width: 100%; height: calc(100% - 49px)"
      ></WorkHoursStatisticsTable>
      <WorkHoursAbnormalityTable
        v-if="activeIndex == '2'"
        style="width: 100%; height: calc(100% - 49px)"
      ></WorkHoursAbnormalityTable>
    </div>
  </div>
</template>
<script>
import WorkHoursStatisticsTable from "./timeSheet/workHoursStatisticsTable.vue";
import WorkHoursAbnormalityTable from "./timeSheet/workHoursAbnormalityTable.vue";
export default {
  name: "business",
  components: {
    WorkHoursStatisticsTable,
    WorkHoursAbnormalityTable,
  },
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      this.activeIndex = key;
    },
  },
};
</script>
<style lang="less" scoped>
.business {
  width: 100%;
  height: 100%;
}
.business-menu-demo {
  height: 49px;
  width: 100%;
  line-height: 49px;
  background-color: transparent;
  .el-menu-item {
    height: 49px;
    line-height: 49px;
  }
}
.el-menu.el-menu--horizontal {
  border-bottom-color: @borderColor;
}
</style>
