<template>
  <div class="report-container">
    <el-tabs v-model="activeTab" class="report-tabs">
      <el-tab-pane label="综合报表" name="comprehensive">
        <Comprehensive v-if="activeTab === 'comprehensive'" />
      </el-tab-pane>
      <el-tab-pane label="日报表" name="day">
        <DayReport v-if="activeTab === 'day'" />
      </el-tab-pane>
      <el-tab-pane label="月报表" name="month">
        <MonthReport v-if="activeTab === 'month'" />
      </el-tab-pane>
      <el-tab-pane label="年报表" name="year">
        <YearReport v-if="activeTab === 'year'" />
      </el-tab-pane>
      <el-tab-pane label="损耗报表" name="loss">
        <LossReport v-if="activeTab === 'loss'" />
      </el-tab-pane>
      <el-tab-pane label="产出报表" name="out">
        <OutReport v-if="activeTab === 'out'" />
      </el-tab-pane>
      <el-tab-pane label="班报表" name="team">
        <TeamReport v-if="activeTab === 'team'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Comprehensive from '@/views/wms/report/shuang/comprehensive.vue'
import DayReport from '@/views/wms/report/shuang/day.vue'
import MonthReport from '@/views/wms/report/shuang/month.vue'
import YearReport from '@/views/wms/report/shuang/year.vue'
import LossReport from '@/views/wms/report/shuang/loss.vue'
import OutReport from '@/views/wms/report/shuang/out.vue'
import TeamReport from '@/views/wms/report/shuang/team.vue'

export default {
  name: 'DrReport',
  components: {
    Comprehensive,
    DayReport,
    MonthReport,
    YearReport,
    LossReport,
    OutReport,
    TeamReport,
  },
  data() {
    return {
      activeTab: 'comprehensive',
    }
  },
}
</script>

<style scoped lang="scss">
.report-container {
  width: 100%;
  height: 100%;

  .report-tabs {
    height: 100%;
    overflow-y: auto;
  }
}
</style>
