<template>
  <div class="grid h-full w-full grid-cols-2 gap-[20px]">
    <div class="table-item">
      <DoubleTable
        title="大厅取号量统计"
        border
        :column="column"
        :data="tableData"
      ></DoubleTable>
    </div>
    <div class="table-item">
      <DoubleTable
        title="业务取号量统计"
        border
        :column="column"
        :data="tableData"
      ></DoubleTable>
    </div>
    <div class="table-item">
      <DoubleTable
        title="部门取号量统计"
        border
        :column="column"
        :data="tableData"
      ></DoubleTable>
    </div>
    <div class="table-item">
      <DoubleTable
        title="个人取号量统计"
        border
        :column="column"
        :data="tableData"
      ></DoubleTable>
    </div>
  </div>
</template>

<script>
import DoubleTable from "./components/DoubleTable.vue";
export default {
  components: {
    DoubleTable,
  },
  data() {
    return {
      column: [
        {
          label: "排序",
          type: "index",
          align: "center",
        },
        {
          label: "业务名称",
          prop: "yewu",
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span>{cellValue}</span>;
            }
          },
        },
        {
          label: "排队数量",
          prop: "total",
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span class="table-num">{cellValue}</span>;
            }
          },
        },
      ],
      tableData: [
        {
          yewu: "排队系统",
          total: 100,
        },
        {
          yewu: "评价系统",
          total: 100,
        },
        {
          yewu: "排队系统",
          total: 100,
        },
        {
          yewu: "排队系统",
          total: 100,
        },
        {
          yewu: "排队系统",
          total: 100,
        },
        {
          yewu: "排队系统",
          total: 100,
        },
        {
          yewu: "排队系统",
          total: 100,
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.table-item {
  width: 100%;
  padding: 15px;
  background: #f5fafd;
  border-radius: 4px;
}
.table-num {
  font-weight: 600;
  color: var(--primary);
}
</style>
