<template>
  <div class="PosTable">
    <Table
      :row-class-name="rowClassName"
      :columns="columns"
      :data="data"
    ></Table>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Table } from "@syman/ark-ui";
@Component({
  name: "PosTable",
  components: {
    Table,
  },
})
export default class PosTable extends Vue {
  @Prop() private value!: string | number;
  private columns = [
    {
      type: "selection",
      width: 60,
      align: "center",
    },
    {
      title: "订单编号",
      key: "name",
    },
    {
      title: "调拨类型",
      key: "age",
    },
    {
      title: "单据日期",
      key: "address",
    },
  ];
  private data = [
    {
      name: "John Brown",
      age: 18,
      address: "New York No. 1 Lake Park",
      date: "2016-10-03",
      status: 1,
    },
    {
      name: "Jim Green",
      age: 24,
      address: "London No. 1 Lake Park",
      date: "2016-10-01",
      status: 0,
    },
    {
      name: "Joe Black",
      age: 30,
      address: "Sydney No. 1 Lake Park",
      date: "2016-10-02",
      status: 2,
    },
    {
      name: "Jon Snow",
      age: 26,
      address: "Ottawa No. 2 Lake Park",
      date: "2016-10-04",
      status: 0,
    },
  ];
  private rowClassName(row: any): string {
    let className = "";
    switch (row.status) {
      case 0: //0提交状态
        className = "pos-table-submit";
        break;
      case 1: //1出库状态
        className = "pos-table-out";
        break;
      case 2: //入库状态
        className = "pos-table-enter";
        break;
      default:
        break;
    }
    return className;
  }
}
</script>
<style lang="less">
@import url(../../../style/variable.less);
.pos-table-submit {
  color: @pos-commit;
}
.pos-table-out {
  color: @pos-wait;
}
.pos-table-enter {
  color: @pos-cancle;
  td{
    background-color: @pos-cancle-background;
  }
  
}
</style>
