<template>
  <div>
    <div class="statistics-title">
      <div style="flex:5">任务统计</div>
      <div style="flex:4">项目统计</div>
    </div>
    <div class="statistics-wrapper" v-loading="loading">
      <!-- 任务统计 -->
      <statistics-card
        style="flex: 1"
        :value="task.total"
        label="任务总数"
        icon="el-icon-s-order"
        start-color="#409EFF"
        end-color="#53a8ff"
      />
      <statistics-card
        style="flex: 1"
        :value="task.completed"
        label="已完成任务"
        icon="el-icon-check"
        start-color="#67C23A"
        end-color="#85ce61"
      />
      <statistics-card
        style="flex: 1"
        :value="task.overdueUncompleted"
        label="逾期未完成"
        icon="el-icon-warning"
        start-color="#E6A23C"
        end-color="#ebb563"
      />
      <statistics-card
        style="flex: 1"
        :value="task.overdueCompleted"
        label="逾期完成"
        icon="el-icon-time"
        start-color="#F56C6C"
        end-color="#f78989"
      />
      <statistics-card
        style="flex: 1"
        :value="task.bug"
        label="BUG数"
        icon="el-icon-error"
        start-color="#F56C6C"
        end-color="#f78989"
      />
      <!-- 项目统计 -->
      <statistics-card
        style="flex: 1"
        :value="project.total"
        label="项目总数"
        icon="el-icon-folder"
        start-color="#409EFF"
        end-color="#53a8ff"
      />
      <statistics-card
        style="flex: 1"
        :value="project.devOnTimeCompleted"
        label="正常开发完成"
        icon="el-icon-circle-check"
        start-color="#67C23A"
        end-color="#85ce61"
      />
      <statistics-card
        style="flex: 1"
        :value="project.devOverdueUncompleted"
        label="逾期未完成"
        icon="el-icon-warning"
        start-color="#E6A23C"
        end-color="#ebb563"
      />
      <statistics-card
        style="flex: 1"
        :value="project.devOverdueCompleted"
        label="逾期完成"
        icon="el-icon-warning-outline"
        start-color="#F56C6C"
        end-color="#f78989"
      />
    </div>
  </div>
  
</template>

<script>
import StatisticsCard from '@/components/StatisticsCard'
import { getBrief } from '@/api/dashboard/dashboard'
import { BriefKeys } from '@/utils/enums'

export default {
  name: 'UserStatistics',
  components: {
    StatisticsCard
  },
  props: {
    userId: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      loading: false,
      task: {},
      project: {}
    }
  },
  created() {
    this.getBrief()
  },
  methods: {
    getBrief() {
      this.loading = true
      getBrief({ joinUserId: this.userId, keys: [
        BriefKeys.PROJECT_STATUS,
        BriefKeys.PROJECT_DEV_ON_TIME_COMPLETED,
        BriefKeys.PROJECT_OVERDUE_DEV_UNCOMPLETED,
        BriefKeys.PROJECT_OVERDUE_DEV_COMPLETED,
        BriefKeys.TASK_STATUS,
        BriefKeys.TASK_TYPE,
        BriefKeys.TASK_OVERDUE_UNCOMPLETED,
        BriefKeys.TASK_OVERDUE_COMPLETED,
      ]}).then(res => {
        if (res.code === 200 && res.data) {
          this.task = res.data.task
          this.project = res.data.project
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-wrapper,
.statistics-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.statistics-title {
  margin-bottom: 8px;
  div {
    font-size: 14px;
    color: #333;
  }
}
</style>