<template>
  <div class="dashboard-panel" v-loading="loading">
    <el-row :gutter="12">
      <el-col :span="8">
        <stat-card
          title="任务"
          icon="el-icon-s-order"
          icon-color="#409EFF"
          :main-value="data.task.todayCompleted"
          main-label="今日完成任务"
          :items="[
            { label: '待完成任务', value: data.task.inProgress },
            { label: '即将到期', value: data.task.soonExpire },
            { label: '逾期任务', value: data.task.overdueUncompleted }
          ]"
        />
      </el-col>
      <el-col :span="8">
        <stat-card
          title="项目"
          icon="el-icon-s-cooperation"
          icon-color="#67C23A"
          :main-value="data.project.inProgress"
          main-label="进行中项目"
          :items="[
            { label: '运维中', value: data.project.maintenance },
            { label: '即将到期', value: data.project.devSoonExpire },
            { label: '开发超期', value: data.project.devOverdue }
          ]"
        />
      </el-col>
      <el-col :span="8">
        <stat-card
          title="客户"
          icon="el-icon-user"
          icon-color="#E6A23C"
          :main-value="data.customer.today"
          main-label="今日新增客户"
          :items="[
            { label: '今日已跟进', value: data.customer.todayFollowed },
            { label: '今日待跟进', value: data.customer.todayWaitFollow },
            { label: '即将跟进', value: data.customer.soonFollow }
          ]"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import StatCard from '@/components/Dashboard/StatCard'
import { getBrief } from "@/api/dashboard/dashboard"
import { BriefKeys } from '@/utils/enums'

export default {
  name: 'PanelGroup',
  components: {
    CountTo,
    StatCard
  },
  data() {
    return {
      loading: false,
      data: {
        project: {},
        task: {},
        customer: {}
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getBrief({
        keys: [
          BriefKeys.TASK_STATUS,
          BriefKeys.TASK_TODAY_COMPLETED,
          BriefKeys.TASK_SOON_EXPIRE,
          BriefKeys.TASK_OVERDUE_UNCOMPLETED,
          BriefKeys.PROJECT_STATUS,
          BriefKeys.PROJECT_DEV_SOON_EXPIRE,
          BriefKeys.PROJECT_DEV_OVERDUE,
          BriefKeys.CUSTOMER_TODAY_CREATE,
          BriefKeys.CUSTOMER_TODAY_FOLLOWED,
          BriefKeys.CUSTOMER_TODAY_WAIT_FOLLOW,
          BriefKeys.CUSTOMER_SOON_FOLLOW,
        ]
      }).then(res => {
        this.data = res.data
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

