<template>
  <div>
    <head-todo @getList="getList"></head-todo>

    <div class="wrap">
      <chart id="chart_1" class="chart"
       :seriesData="seriesData"
       title="上架任务"></chart>

      <chart id="chart_2" class="chart"
      :seriesData="seriesData2"
      title="拣货任务"></chart>

      <chart id="chart_3" class="chart"
      :seriesData="seriesData3"
      title="盘点任务"></chart>

      <chart id="chart_4" class="chart"
      :seriesData="seriesData4"
      title="移动任务"></chart>

    </div>

  </div>
</template>
<script>
import { time } from 'apec-fe-utils'
import HeadTodo from './components/head-todo'
import Chart from './components/charts'
export default {
  name: 'ReportTaskMonitorList',
  components: {
    HeadTodo,
    Chart
  },
  data () {
    return {
      query: {
        ' page.currentPage': 1,
        'page.limitCount': 10
      },
      chartData: {},
      seriesData: [
        { name: '未完成上架任务数', value: 'paCreateNum' },
        { name: '已完成上架任务数', value: 'paCompleteNum' }
      ],
      seriesData2: [
        { name: '未完成拣货任务数', value: 'pkCreateNum' },
        { name: '已完成拣货任务数', value: 'pkCompleteNum' }
      ],
      seriesData3: [
        { name: '未完成盘点任务数', value: 'countCreateNum' },
        { name: '已完成盘点任务数', value: 'countCompleteNum' }
      ],
      seriesData4: [
        { name: '未完成移动任务数', value: 'mvCreateNum' },
        { name: '已完成移动任务数', value: 'mvCompleteNum' }
      ],
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList (query) {
      const url = this.$API.Monitor.ReportTaskMonitorList.getList
      const param = { queryCondition: JSON.stringify({ ...this.query, ...query }) }
      this.$https.post(url, param).then(res => {
        this.formatArr(this.seriesData, res.rows[0])
        this.formatArr(this.seriesData2, res.rows[0])
        this.formatArr(this.seriesData3, res.rows[0])
        this.formatArr(this.seriesData4, res.rows[0])
      })
    },
    formatArr (tag, data) {
      tag.map(item => {
        for (let key in data) {
          if (key === item.value) {
            item['value'] = data[key] || null
          }
        }
      })
      return tag
    }
  },
  mounted () {
    // console.log(this.seriesData)
  }
}
</script>
<style scoped>
.wrap{
  width: 100%;
}
.chart{
    display: inline-block;
    width: 50%;
    height: 520px;
  }
</style>
