<template>
  <div id="bottomLeft">
    <div>
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2 headerTitle">出库计划列表</span>
        </div>
      </div>
      <dv-scroll-board :config="config" style="width: 5.1rem;height: 4.44rem;margin-top: 10px;" />
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      url: '/bigSunmmary/getOutBill',
      config: {}
    };
  },
  mounted() {
    this.getOutPage()
    setInterval(() => {
      this.getOutPage()
    }, window._CONFIG['refreshTime'])
  },
  methods: {
    getOutPage() {
      getAction(window._CONFIG['domianURL'] + this.url).then(res => {
        let arr = []
        res.data.forEach(element => {
          var itemArr = []
          itemArr.push(element.storeName)
          itemArr.push(element.name)
          itemArr.push(element.fwOrgName)
          itemArr.push(element.amount)
          if (element.state === 'T') {
            itemArr.push("<span class='colorRed'>" + "待执行" + "</span>")
          }
          if (element.state === 'W') {
            itemArr.push("<span class='colorRed'>" + "进行中" + "</span>")
          }
          if (element.state === 'D') {
            itemArr.push("<span class='colorGrass'>" + "已完成" + "</span>")
          }
          arr.push(itemArr)
        })
        this.config = {
          header: ["库房名", "凭证字", "发物单位", "数量", "任务状态"],
          data: arr,
          rowNum: 7, //表格行数
          headerHeight: 35,
          headerBGC: "#0C2869", //表头
          oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行
          evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行
          columnWidth: [150, 120, 150, 100, 150],
          align: ["center"]
        }
      }) 
    }
  }
};
</script>

<style lang="scss">
#bottomLeft {
  border-radius: 0.0625rem;
  .text {
    color: #c3cbde;
  }
}
</style>