<template>
  <div class="box relative">
    <t-header type="1" title1="仓储监控" title2="WMS仓储看板"></t-header>
    <div class="box body_container">
      <div class="acon" v-for="(e, i) in resDataArr" :key="i">
        <div class="relative b_title">
          <span class="absolute sj_icon"></span>
          <p>{{ e.storsName }}</p>
        </div>
        <div class="zd-row wraper_1 mgb8">
          <div class="box zd-col-7 mgr8">
            <div class="relative wraper_2 mgb8">
              <div class="absolute bg_j bg_j_1"></div>
              <div class="absolute bg_j bg_j_2"></div>
              <div class="absolute bg_j bg_j_3"></div>
              <div class="absolute bg_j bg_j_4"></div>
              <p class="title">货位使用</p>
              <div class="zd-row wraper_4">
                <div class="box percent_item">
                  <p>{{ e.pointUse.use_percentage }}</p>
                </div>
                <div class="box zd-col-16 zd-row flexcol jccenter">
                  <div class="zd-row mgb8">
                    <p class="zd-col-8 item_label">总货位数</p>
                    <p class="zd-col-16 item_value">{{ e.pointUse.total_qty }}<span class="item_unit">个</span></p>
                  </div>
                  <div class="zd-row mgb8">
                    <p class="zd-col-8 item_label">已用货位</p>
                    <p class="zd-col-16 item_value">{{ e.pointUse.use_qty }}<span class="item_unit">个</span></p>
                  </div>
                  <div class="zd-row">
                    <p class="zd-col-8 item_label">空余货位</p>
                    <p class="zd-col-16 item_value">{{ e.pointUse.emp_qty }}<span class="item_unit">个</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="relative wraper_2">
              <div class="absolute bg_j bg_j_1"></div>
              <div class="absolute bg_j bg_j_2"></div>
              <div class="absolute bg_j bg_j_3"></div>
              <div class="absolute bg_j bg_j_4"></div>
              <p class="title">今日出入库</p>
              <div class="wraper_4 zd-row flexcol jccenter">
                <div class="zd-row flexstart mgb8">
                  <div class="zd-col-3 item_label">入库</div>
                  <div class="zd-col-21">
                    <div class="percent_line">
                      <!-- <div class="percent_i" :style="{'width': inw}"></div> -->
                      <div class="percent_i" :style="{'width': getPercentage(e.toDayInAndOut.in.vehicle_qty, e.toDayInAndOut.in.total_qty)}"></div>
                    </div>
                    <div class="zd-row">
                      <!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ inqty1 }}</span></p> -->
                      <p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.in.total_qty }}</span></p>
                    </div>
                  </div>
                </div>
                <div class="zd-row flexstart">
                  <div class="zd-col-3 item_label">出库</div>
                  <div class="zd-col-21">
                    <div class="percent_line percent_line_c">
                      <!-- <div class="percent_i percent_i_c" :style="{'width': outw}"></div> -->
                      <div class="percent_i percent_i_c" :style="{'width': getPercentage(e.toDayInAndOut.out.vehicle_qty, e.toDayInAndOut.out.total_qty)}"></div>
                    </div>
                    <div class="zd-row">
                      <!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ outqty1 }}</span></p> -->
                      <p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.out.total_qty }}</span></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <sec-two :weobj="e"></sec-two>
          <sec-three :weobj="e"></sec-three>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import THeader from '@components/header.vue'
import SecTwo from './secTwo.vue'
import SecThree from './secThree.vue'
// import { synthesizeInfo } from '@js/getData2.js'
import { synthesizeInfo } from '@js/mork02.js'
export default {
  components: {
    THeader,
    SecTwo,
    SecThree
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      intervalId: null,
      materList: [],
      historyList: [],
      pointUse: {}, // 料箱货位使用
      toDayInAndOut: {}, // 料箱今日出入库
      inw: '0',
      inqty1: '0',
      outw: '0',
      outqty1: '0',
      resDataArr: []
    }
  },
  created () {
    let obj = {
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime,
      setJxtTime: this.$store.getters.setJxtTime,
      pageNo: this.$store.getters.pageNo,
      iskb: '02',
      secCode: this.$store.getters.secCode
    }
    this.$store.dispatch('setConfig', obj)
    this._synthesizeInfo()
    this.timerFun(this._synthesizeInfo, this.interTime)()
  },
  mounted () {
  },
  destroyed () {
    // if (this.intervalId !== null) {
    //   clearTimeout(this.intervalId)
    //   this.intervalId = null
    // }
  },
  methods: {
    getPercentage (part, whole) {
      if (Number(whole) === 0) {
        return 0
      }
      const percentage = (part / whole * 100).toFixed(2)
      return `${percentage}%`
    },
    timerFun (f, time) {
      let _this = this
      return function backFun () {
        clearTimeout(_this.intervalId)
        _this.intervalId = setTimeout(function () {
          f()
          backFun()
        }, time)
      }
    },
    async _synthesizeInfo () {
      let res = await synthesizeInfo(this.$store.getters.secCode)
      this.resDataArr = res.data
      this.pointUse = res.data[0].pointUse
      this.toDayInAndOut = res.data[0].toDayInAndOut
      this.inw = this.getPercentage(this.toDayInAndOut.in.vehicle_qty, this.toDayInAndOut.in.total_qty)
      this.inqty1 = this.toDayInAndOut.in.total_qty
      this.outw = this.getPercentage(this.toDayInAndOut.out.vehicle_qty, this.toDayInAndOut.out.total_qty)
      this.outqty1 = this.toDayInAndOut.out.total_qty
    }
  }
}
</script>

<style lang="stylus" scoped>
@import './style.stylus'
.acon
  height 40%
.body_container
  padding-top 38px
.mgr8
  margin-right 8px
.mgb8
  margin-bottom 8px
.wraper_1
  width 100%
  // height calc(50% - 28px)
  height calc(100% - 28px)
.wraper_2
  height calc(50% - 4px)
  padding 4px 10px
  background-color rgba(15, 45, 115, 60%)
.wraper_3
  height 100%
.wraper_5
  height calc(100% - 4px)
  padding 4px 10px
  background-color rgba(15, 45, 115, 60%)
.wraper_6
  height calc(100% - 4px)
  background-color rgba(15, 45, 115, 60%)
.title
  font-size 14px
  line-height 16px
  color #fff
  // margin-left 14px
.wraper_4
  width 100%
  height calc(100% - 16px)
.percent_item
  width 76px
  background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
  p
    font-size 15px
    line-height 76px
    color #fff
    text-align center
.font_1
  font-size 13px
.font_2
  font-size 12px
  text-align left
  white-space nowrap
.c_y
  color #f4ab00
.mgl8
  margin-left 8px
.scroll_tab_2 li
  width 20%
  &:nth-child(1)
      width 20%
.scroll_tab_3 li
  width 11%
  &:nth-child(1)
      width 11%
.scroll-ul_1_div
  width 20% !important
  height 30px !important
.scroll-ul_2 .scroll-ul_1_div
  width 11% !important
  height 30px !important
  &:nth-child(1)
      width 11%
.scroll_container_0
  width: 100%;
  height: calc(100% - 20px);
.scroll-ul_1 li
  height 30px !important
  // line-height 30px !important
.scroll-ul_2 li
  height 30px !important
  // line-height 30px !important
</style>
