/* *@description:入库监控 *@author: hudw *@date: 2021-08-25 11:42:32 */
<template>
  <div id="monitoring-putin-warehouse" class="monitoring-layout">
    <div class="monitoring-layout-grid">
      <div class="layout-grid-item-1 column">
        <a-page-header
          class="grid-item-page-header"
          title="入库完成作业监控"
          :avatar="baseRequest(`1.svg`)"
          :sub-title="`更新时间:${$moment().format('YYYY-MM-DD HH:mm')}`"
        />
        <div class="layout-grid-item-body" style="flex: 1;align-items: center;">
          <div class="layout-grid-item-block" v-for="(item, index) in section_1" :key="index">
            <a-avatar v-bind="baseRequest(`${item.icon}`,60).props" style="margin-right:10px" />
            <a-statistic :title="item.title" :value="item.value"/>
          </div>
        </div>
      </div>
      <div class="layout-grid-item-2 column">
        <a-page-header class="grid-item-page-header" title="入库未完成作业监控" :avatar="baseRequest(`2.svg`)" />
        <a-row class="grid-item-page-row" :gutter="10" type="flex">
          <a-col style="margin-bottom: 10px;" v-for="(item, index) in section_2" :key="index" :span="12">
            <a-statistic
              class="grid-item-page-statistic"
              :title="item.title"
              :value="item.value"
              :valueStyle="{ color: '#2b80ff' }"
            />
          </a-col>
        </a-row>
      </div>
      <div class="layout-grid-item-3 column">
        <a-page-header class="grid-item-page-header" title="采购订单监控" :avatar="baseRequest(`3.svg`)" />
        <a-row class="grid-item-page-row" :gutter="10" type="flex">
          <a-col
            style="margin-bottom: 10px;"
            v-for="(item, index) in section_3"
            :key="index"
            :span="section_3.length - 1 === index ? 24 : 12"
          >
            <a-statistic class="grid-item-page-statistic" :title="item.title" :value="item.value" />
          </a-col>
        </a-row>
      </div>
      <div class="layout-grid-item-6 column">
        <a-page-header class="grid-item-page-header" title="错误异常监控" :avatar="baseRequest(`6.svg`)" />

        <a-row class="grid-item-page-row" :gutter="10" type="flex">
          <a-col style="margin-bottom: 10px;" v-for="(item, index) in section_6" :key="index" :span="12">
            <a-statistic class="grid-item-page-statistic" :title="item.title" :value="item.value" />
          </a-col>
        </a-row>
        <!-- <p-table
          style="margin:10px"
          :selectedRowKeys.sync="mx_selectedRowKeys"
          :scroll="{ x: true }"
          bordered
          rowKey="_row_count"
          ref="mx_table"
          :dataSource="mokeDataSource"
          :columns="mx_columns"
          :remoteUrl="mx_remoteUrl"
          :remoteData="mx_remoteParams"
          dragle
          :autoLoad="false"
          :pagination="false"
          :rowSelectType="0"
        /> -->
      </div>
      <div class="layout-grid-item-4 column">
        <a-page-header class="grid-item-page-header" title="验收超时监控" :avatar="baseRequest(`4.svg`)" />
        <a-row class="grid-item-page-row" type="flex">
          <a-col
            style="margin-bottom: 10px;"
            :class="['line_' + index]"
            v-for="(item, index) in section_4"
            :key="index"
            :span="24"
          >
            <a-col class="grid-item-page-statistic parallel" :span="12">
              <a-statistic :title="item.title" :value="item.value" :valueStyle="{ color: '#2b80ff' }" />
            </a-col>
            <a-col class="grid-item-page-statistic parallel" :span="12">
              <a-statistic :title="item.title_sub" :value="item.value_sub" />
            </a-col>
          </a-col>
        </a-row>
      </div>
      <div class="layout-grid-item-5 column">
        <a-page-header class="grid-item-page-header" title="上架超时监控" :avatar="baseRequest(`5.svg`)" />
        <a-row class="grid-item-page-row" type="flex">
          <a-col
            style="margin-bottom: 10px;"
            :class="['line_' + index]"
            v-for="(item, index) in section_5"
            :key="index"
            :span="24"
          >
            <a-col class="grid-item-page-statistic parallel" :span="12">
              <a-statistic :title="item.title" :value="item.value" :valueStyle="{ color: '#2b80ff' }" />
            </a-col>
            <a-col class="grid-item-page-statistic parallel" :span="12">
              <a-statistic :title="item.title_sub" :value="item.value_sub" />
            </a-col>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script>
import '../style/index.less'
import { section_1, section_2, section_3, section_4, section_5, section_6 } from './js/config.js'
import { getInfoData } from './js/api.js'
function baseRequest(fileName,size=20) {
  return {
    props: { size, shape: 'square', src: require('./img/' + fileName) }
  }
};


const mokeDataSource = [
  { id: 1, name: '张三', count: 12, count2: 42 },
  { id: 2, name: '李四', count: 33, count2: 23 }
]
import { mapGetters } from 'vuex'
import mainTable from './mixins/mainTable.js'
export default {
  mixins: [mainTable()],
  computed:{
    ...mapGetters(['zoom']),
  },
  data() {
    return {
      section_1,
      section_2,
      section_3,
      section_4,
      section_5,
      section_6,
      mokeDataSource
    }
  },
  mounted() {
    // { startTime: '2021-08-02 00:00:00', endTime: '2021-08-2 23:59:59' }
    this.getDataAll()
  },
  methods: {
    baseRequest,
    getDataAll(time) {
      /** section_1 入库完成作业监控*/
      getInfoData('inbound_monitoring', time).then(response => {
        if (response.success) {
          let data = response.data[0]
          section_1.forEach(item => {
            if (item.format) {
              item.value = this.format(data[item.key])
            } else {
              item.value = data[item.key]
            }
          }, this)
        }
      })
      /** section_2 入库监控-入库未完成作业监控	 */
      getInfoData('inbound_no_complete', time).then(response => {
        if (response.success) {
          let data = response.data[0]
          section_2.forEach(item => {
            item.value = data[item.key]
          }, this)
        }
      })
      /** section_3 入库监控-采购订单监控*/
      getInfoData('inbound_bill', time).then(response => {
        if (response.success) {
          let data = response.data[0]
          section_3.forEach(item => {
            item.value = data[item.key]
          }, this)
        }
      })
      /** section_4 入库监控-验收超时监控*/
      getInfoData('inbound_rqc_timeout', time).then(response => {
        if (response.success) {
          let data = response.data[0]
          section_4.forEach(item => {
            item.value = data[item.key]
            item.value_sub = this.format(data[item.key_sub])
          }, this)
        }
      })
      /** section_5 入库监控-上架超时监控*/
      getInfoData('inbound_instock_timeout', time).then(response => {
        if (response.success) {
          let data = response.data[0]
          section_5.forEach(item => {
            item.value = data[item.key]
            item.value_sub = this.format(data[item.key_sub])
          }, this)
        }
      })
      /** section_6 错误修改监控*/
      getInfoData('inbound_ error', time).then(response => {
        if (response.success) {
          let data = response.data[0]
          section_6.forEach(item => {
            item.value = data[item.key]
          }, this)
        }
      })
    },
    format(value) {
      return (value > 0 ? (value * 100).toFixed(2) : value) + '%'
    }
  }
}
</script>
<style lang="less">
#monitoring-putin-warehouse {
  .monitoring-layout-grid {
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: 1fr 35% 45%;

    //20% 35% 45%
  }
  .layout-grid-item {
    &-1 {
      grid-column-start: 1;
      grid-column-end: 31;
    }
    &-2 {
      grid-column-start: 1;
      grid-column-end: 11;
    }
    &-3 {
      grid-column-start: 11;
      grid-column-end: 21;
    }
    &-6 {
      grid-column-start: 21;
      grid-column-end: 31;
    }

    &-4 {
      grid-column-start: 1;
      grid-column-end: 16;
    }
    &-5 {
      grid-column-start: 16;
      grid-column-end: 31;
    }
  }
}
</style>
