<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-item index="3">考勤月报</el-menu-item>
        <el-menu-item index="4">打卡记录</el-menu-item>
      </el-menu>

      <!-- <InspectionLedger
          v-if="activeIndex == '1'"
          style="width: 100%; height: calc(100% - 49px)"
        ></InspectionLedger> -->
      <AttendanceOverview
        v-permission="{
          key: 'attendanceOverview',
          menuPath: '/project/labor/allAttendanceManage',
        }"
        v-if="activeIndex == '1'"
        style="width: 100%; height: calc(100% - 49px)"
      ></AttendanceOverview>
      <DayAttendanceReport
        v-permission="{
          key: 'dayAttendanceReport',
          menuPath: '/project/labor/allAttendanceManage',
        }"
        v-if="activeIndex == '2'"
        style="width: 100%; height: calc(100% - 49px)"
      ></DayAttendanceReport>
      <MonthAttendanceReport
        v-permission="{
          key: 'monthAttendanceReport',
          menuPath: '/project/labor/allAttendanceManage',
        }"
        v-if="activeIndex == '3'"
        style="width: 100%; height: calc(100% - 49px)"
      ></MonthAttendanceReport>
      <PunchCardRecord
        v-permission="{
          key: 'punchCardRecord',
          menuPath: '/project/labor/allAttendanceManage',
        }"
        v-if="activeIndex == '4'"
        style="width: 100%; height: calc(100% - 49px)"
      ></PunchCardRecord>
    </div>
  </div>
</template>
<script>
import AttendanceOverview from "./allAttendanceManageComponents/attendanceOverview.vue";
import DayAttendanceReport from "./allAttendanceManageComponents/dayAttendanceReport.vue";
import MonthAttendanceReport from "./allAttendanceManageComponents/monthAttendanceReport.vue";
import PunchCardRecord from "./allAttendanceManageComponents/punchCardRecord.vue";

export default {
  name: "business",
  components: {
    AttendanceOverview,
    DayAttendanceReport,
    MonthAttendanceReport,
    PunchCardRecord,
  },
  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>
  