<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="changeTab">
      <el-tab-pane label="日报填写" name="1">
        <daily-report v-if="isFirst" />
      </el-tab-pane>
      <el-tab-pane label="日报统计" name="2">
        <day-count v-if="isSecond" />
      </el-tab-pane>
      <el-tab-pane v-if="isAdmin == 1" label="项目管理" name="3">
        <project-management v-if="isThird" />
      </el-tab-pane>
      <el-tab-pane v-if="isAdmin == 1" label="工作看板" name="4">
        <today-count v-if="isForth" />
      </el-tab-pane>
      <el-tab-pane v-if="isAdmin == 1" label="工时统计" name="5">
        <work-time-count v-if="isFifth" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style></style>
<script>
import ProjectManagement from './ProjectManagement'
import DayCount from './dayCount.vue'
import TodayCount from './TodayCount.vue'
import DailyReport from './DailyReport.vue'
import WorkTimeCount from './WorkTimeCount.vue'
import { mapGetters } from 'vuex'

export default {
  components: {
    WorkTimeCount,
    DayCount,
    DailyReport,
    TodayCount,
    ProjectManagement
  },
  computed: {
    ...mapGetters(['id', 'token', 'name', 'clickItemData', 'personList', 'isAdmin'])
  },
  data() {
    return {
      activeName: '1',
      isFirst: true,
      isSecond: false,
      isThird: false,
      isForth: false,
      isFifth: false
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    changeTab() {
      switch (this.activeName) {
        case '1': {
          this.isFirst = true
          this.isSecond = false
          this.isThird = false
          this.isForth = false
          this.isFifth = false
          break
        }
        case '2': {
          this.isFirst = false
          this.isSecond = true
          this.isThird = false
          this.isForth = false
          this.isFifth = false
          break
        }
        case '3': {
          this.isFirst = false
          this.isSecond = false
          this.isThird = true
          this.isForth = false
          this.isFifth = false
          break
        }
        case '4': {
          this.isFirst = false
          this.isSecond = false
          this.isThird = false
          this.isForth = true
          this.isFifth = false
          break
        }
        case '5': {
          this.isFirst = false
          this.isSecond = false
          this.isThird = false
          this.isForth = false
          this.isFifth = true
          break
        }
      }
    }
  }
}
</script>
<style scoped></style>
