<template>
  <div class="page-wrap">
    <page-section title="计划进度">
      <el-form :inline="true" size="small">
        <el-form-item label="项目ID">
          <el-input v-model="projectId" style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item label="计划ID">
          <el-input v-model="planId" style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchProgress">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="16">
        <el-col :span="8">
          <page-section title="轮次汇总">
            <json-viewer :value="progress.round_summary || []"></json-viewer>
          </page-section>
        </el-col>
        <el-col :span="8">
          <page-section title="人员负载">
            <json-viewer :value="progress.assignee_load || []"></json-viewer>
          </page-section>
        </el-col>
        <el-col :span="8">
          <page-section title="每日趋势">
            <json-viewer :value="progress.daily_trend || []"></json-viewer>
          </page-section>
        </el-col>
      </el-row>
    </page-section>
  </div>
</template>

<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import JsonViewer from '@/components/TestPlatform/common/JsonViewer'
import { getPlanProgress } from '@/api/planApi'

export default {
  name: 'PlanProgress',
  components: { PageSection, JsonViewer },
  data() {
    return {
      projectId: this.$route.query.projectId || 1,
      planId: this.$route.query.planId || '',
      progress: {}
    }
  },
  methods: {
    fetchProgress() {
      if (!this.planId) {
        return
      }
      getPlanProgress(this.projectId, this.planId).then(res => {
        this.progress = (res && res.data) || res || {}
      }).catch(() => {
        this.progress = {}
      })
    }
  },
  created() {
    this.fetchProgress()
  }
}
</script>

<style scoped>
.page-wrap {
  padding: 20px;
}
</style>
