<template>
  <div id="center">
    <div class="up">
      <div class="item" style="height: 2.2rem">
        <span style="font-size: 0.3875rem;">库存物资总数</span>
        <dv-decoration-12 style="width: 2rem;height: 2rem;margin: 0 auto;color: #fff" :color="['#046DB5', '#046DB5']">
          <span style="font-size: 0.6rem;color: rgb(61,231,201)">{{ amount }}</span><span style="color: rgb(61,231,201);font-size: 0.56rem;margin-left: 10px;">件</span></dv-decoration-12>
      </div>
      <div class="item" style="height: 1.6rem;margin-top: 0.2rem;">
        <span style="font-size: 0.3875rem;display: block;">本年度收发总数</span>
        <div style="display: flex;">
          <span style="font-size: 0.3875rem;margin-top: 55px;display: block;width: 20%;text-align: center;">收物:</span>
          <dv-digital-flop :config="inAmount" style="height:1.625rem;width: 30%" />
          <span style="font-size: 0.3875rem;margin-top: 55px;display: block;width: 20%;text-align: center;">发物:</span>
          <dv-digital-flop :config="outAmount" style="height:1.625rem;width: 30%" />
        </div>
        
      </div>
    </div>
    <div class="extra">
      <div class="item">
      <span style="font-size: 0.3rem;">垛位总数</span>
      <span style="margin-left: 38px;color: #03a9f4;font-size: 0.32rem;font-weight: 700;">{{ rackAmount }}</span>
      </div>
    </div>
    <div class="down">
      <div class="leftNm">
        <div class="item">
          <span>工作垛位</span>
          <span style="margin-left: 55px;font-size: 0.25rem;color: #03a9f4;">{{ workRackAmount }}</span>
        </div>
        <div class="item">
          <span>有货垛位</span>
          <span style="margin-left: 55px;font-size: 0.25rem;color: #03a9f4;">{{ usedRackAmount }}</span>
        </div>
        <div class="item">
          <span>无货垛位</span>
          <span style="margin-left: 55px;font-size: 0.25rem;color: #03a9f4;">{{ nullRackAmount }}</span>
        </div>
      </div>
      <div class="percent">
        <dv-active-ring-chart :config="config" style="width: 3.775rem;height: 3.775rem;margin-left: -20px;margin-top: -45px;" />
      </div>
    </div>
  </div>
</template>

<script>
import centerChart from "@/components/echart/center/centerChartRate";
import centerChartPie from '@/components/echart/center/centerChartPie'
import { getAction } from '@/api/manage'
export default {
  data () {
    return {
      url: '/big/getGoodsByBig',
      amount: 0,
      inAmount: {},
      outAmount: {},
      nullPalletAmount: 0,
      nullRackAmount: 0,
      rackAmount: 0,
      usedRackAmount: 0,
      workRackAmount: 0,
      config: {
        
      },
      water: {
        data: [24, 45],
        shape: "roundRect",
        formatter: "{value}%",
        waveNum: 3
      },
    };
  },
  components: {
    centerChart,
    centerChartPie
  },
  mounted() {
    this.initData()
    setInterval(() => {
      this.initData()
    }, window._CONFIG['refreshTime'])
  },
  methods: { 
    initData() {
      getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode}).then(res => {
        this.amount = res.data.stockVo.amount
        this.inAmount = {
          number: [res.data.stockVo.inAmount],
          content: "{nt}件",
          style: {
            fontSize: 30,
            fill: '#3de7c9'
          }
        }
        this.outAmount = {
          number: [res.data.stockVo.outAmount],
          content: "{nt}件",
          style: {
            fontSize: 30,
            fill: '#3de7c9'
          }
        }
        this.rackAmount = res.data.rackVo.rackAmount
        this.nullRackAmount = res.data.rackVo.nullRackAmount
        this.usedRackAmount = res.data.rackVo.usedRackAmount
        this.workRackAmount = res.data.rackVo.workRackAmount
        this.config = {
          data: [
            {
              name: '工作垛位',
              value: this.workRackAmount
            },
            {
              name: '有货垛位',
              value: this.usedRackAmount
            },
            {
              name: '无货垛位',
              value: this.nullRackAmount
            }
          ],
          lineWidth: 40,
          digitalFlopStyle: {
            fontSize: 20
          },
          showOriginValue: true,
          animationFrame: 10,
          color: [ '#54cce2', '#1fd7fd', '#8aa4fa', '#93fd8b'],
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      padding-top: 0.2rem;
      width: 100%;
    }
  }
  .extra {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 0.6rem;
      .item {
        width: 100%;
        // height: 15%;
        span {
          // font-size: 0.25rem;
          line-height: 0.6rem;
          margin-left: 0.14rem;
        }
    }
  }
  .down {
    width: 100%;
    display: flex;
    height: 2.6rem;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 0.0625rem;
    }
    .percent {
      width: 55%;
    }
  }
  .leftNm {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      width: 100%;
      height: 20%;
      span {
        font-size: 0.25rem;
        line-height: 0.8rem;
        margin-left: 0.14rem;
      }
    }
  }
}
</style>