<template>
  <dv-scroll-board
    v-if="aa"
    :config="config"
    style="width: 100%; height: 100%"
  />
</template>
<script>
import { debounce } from "@/utils/debounce";
export default {
  name: "Order",
  data() {
    return {
      aa: true,
      config: {
        header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
        headerBGC: "rgba(0, 106, 205, 0.22)",
        oddRowBGC: "rgba(0, 106, 205, 0.22)",
        evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
        data: [],
        rowNum: 12,
        waitTime: 3000,
        columnWidth: [50],
        align: ["center"],
        carousel: "page",
      },
    };
  },
  mounted() {
    this.getTableList();
    this.tableReset();
    window.addEventListener("resize", this.tableReset);
  },
  methods: {
    tableReset() {
      this.aa = false;
      debounce(() => {
        this.initTable();
      }, 500)();
    },
    initTable() {
      this.aa = true;
    },
    getTableList() {
      let _this = this;
      setTimeout(
        (function name() {
          _this.config.data = [
            ["1", "行1列1", "行1列2", "行1列3", "50%"],
            ["2", "行2列1", "行2列2", "行2列3", "50%"],
            ["3", "行3列1", "行3列2", "行3列3", "50%"],
            ["4", "行4列1", "行4列2", "行4列3", "50%"],
            ["5", "行5列1", "行5列2", "行5列3", "50%"],
            ["6", "行6列1", "行6列2", "行6列3", "50%"],
            ["7", "行7列1", "行7列2", "行7列3", "50%"],
            ["8", "行8列1", "行8列2", "行8列3", "50%"],
            ["9", "行9列1", "行9列2", "行9列3", "50%"],
            ["10", "行10列1", "行10列2", "行10列3", "50%"],
            ["11", "行11列1", "行11列2", "行11列3", "50%"],
            ["12", "行12列1", "行12列2", "行12列3", "50%"],
            ["13", "行13列1", "行13列2", "行13列3", "50%"],
            ["14", "行14列1", "行14列2", "行14列3", "50%"],
            ["15", "行15列1", "行15列2", "行15列3", "50%"],
            ["16", "行16列1", "行16列2", "行16列3", "50%"],
            ["17", "行17列1", "行17列2", "行17列3", "50%"],
            ["18", "行18列1", "行18列2", "行18列3", "50%"],
            ["19", "行19列1", "行19列2", "行19列3", "50%"],
            ["20", "行20列1", "行20列2", "行20列3", "50%"],
          ];
        })(),
        2000
      );
      this.initTable();
    },
  },
};
</script>
