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

    <div class="wrap">
      <chart id="chart_1" class="chart"
       :seriesData="seriesData"
       :selected="selected"
       title="入库作业统计报表"
       :subTitle="`入库单数：${chartData.periodAsnNum} 入库单明细：${chartData.periodAsnDetailNum}`"></chart>

      <chart id="chart_2" class="chart"
      :seriesData="seriesData2"
      :selected="selected"
      title="出库作业统计报表"
       :subTitle="`入库单数：${chartData.periodSoNum} 入库单明细：${chartData.periodSoDetailNum}`"></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: 'ReportOwnerInOutList',
  components: {
    HeadTodo,
    Chart
  },
  data () {
    return {
      query: {
        'fromTime': time.formatTime(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        'toTime': time.formatTime(new Date())
      },
      chartData: {},
      seriesData: [
        { name: '未收货订货数', value: 'periodAsnCreateNum' },
        { name: '部分收货数', value: 'periodPartReceiveNum' },
        { name: '完全收货数', value: 'periodReceiveNum' },
        { name: '关闭订单数', value: 'periodAsnCloseNum' },
        { name: '取消订单数', value: 'periodAsnCancelNum' }
      ],
      seriesData2: [
        { name: '创建状态订单数', value: 'periodSoCreateNum' },
        { name: '部分分配数', value: 'periodPartAllocNum' },
        { name: '完全分配数', value: 'periodAllocNum' },
        { name: '部分拣货数', value: 'periodSoPartPickNum' },
        { name: '完全拣货数', value: 'periodSoPickNum' },
        { name: '部分发运数', value: 'periodPartShipNum' },
        { name: '完全发运数', value: 'periodFullShipNum' },
        { name: '关闭订单数', value: 'periodSoCloseNum' },
        { name: '取消订单数', value: 'periodSoCancelNum' }
      ],
      selected: {
        '关闭订单数': false,
        '取消订单数': false,
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList (query) {
      const url = this.$API.Monitor.ReportOwnerInOutList.getList
      const param = { queryCondition: JSON.stringify({ ...this.query, ...query }) }
      this.$https.post(url, param).then(res => {
        this.formatArr(this.seriesData, res.data)
        this.formatArr(this.seriesData2, res.data)
        this.chartData = res.data
      })
    },
    formatArr (tag, data) {
      tag.map(item => {
        for (let key in data) {
          if (key === item.value) {
            item['value'] = data[key] || null
          }
        }
      })
      return tag
    }
  },
  mounted () {

  }
}
</script>
<style scoped>
.wrap{
  width: 100%;
}
.chart{
    display: inline-block;
    width: 50%;
    height: 520px;
  }
</style>
