<template>
  <div id="centreRight1">
    <div>
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-line"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2 headerTitle">库存监控</span>
          <a-radio-group v-model="year" button-style="solid" size="small" style="margin-left: 1.6rem;" @change="getWorkPage">
            <a-radio-button :value="1">
              1年内
            </a-radio-button>
            <a-radio-button :value="2">
              2-5年
            </a-radio-button>
            <a-radio-button :value="3">
              5年以上
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board :config="config" style="width: 5rem;height: 4.44rem"/>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      url: '/bigSunmmary/getStockByYear',
      year: 1,
      config: {}
    };
  },
  components: {},
  mounted() {
    this.getWorkPage()
    setInterval(() => {
      this.getWorkPage()
    }, window._CONFIG['refreshTime'])
  },
  methods: {
    getWorkPage() {
      getAction(window._CONFIG['domianURL'] + this.url, {year: this.year}).then(res => {
        let arr = []
        res.data.forEach(element => {
          var itemArr = []
          itemArr.push(element.goodsCode)
          itemArr.push(element.goodsName)
          itemArr.push(element.qty)
          arr.push(itemArr)
        })
        
        this.config = {
          header: ["物资代码", "物资名称", "数量"],
          data: arr,
          rowNum: 6, //表格行数
          headerHeight: 35,
          headerBGC: "#0C2869", //表头
          oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行
          evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行
          index: true,
          columnWidth: [50, 150, 150, 100],
          align: ["center"]
        }
      }) 
    }
  }
};
</script>

<style lang="scss">
#centreRight1 {
  border-radius: 0.0625rem;
  .bg-color-black {
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 0.125rem;
    overflow: hidden;
  }
}
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  color: #fff;
  background: #0c2869;
  border-color: #0c2869;
}
</style>