<template>
  <div id="centreRight2">
    <div>
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2 headerTitle">库内物资Top10排行</span>
      </div>
      <dv-capsule-chart :config="config"  style="width: 5rem;height: 4.44rem" />
    </div>
    <dv-decoration-2 style="height:10px;" />
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      url: '/bigSunmmary/getGoodsByTopTen',
      config: {}
    };
  },
  mounted() {
    this.getGoodsStock()
    setInterval(() => {
      this.getGoodsStock()
    }, window._CONFIG['refreshTime'])
  },
  methods: {
    getGoodsStock() {
      getAction(window._CONFIG['domianURL'] + this.url).then(res => {
        this.config = {
          data: res.data,
          unit: '件',
          showValue: true
        }
      })
    }
  }
};
</script>

<style lang="scss">
#centreRight2 {
  border-radius: 0.0625rem;
  .bg-color-black {
    padding: 0.0625rem;
   // height: 5.0625rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 0.125rem;
    overflow: hidden;
  }
}
</style>