<template>
  <div class="demo-table-select">
    <ui-table
      :data-source="dataSource"
      :columns="columns"
      :row-selection="rowSelection"
      :selected-rows="selected"
      :height="200"
      :summary-render="summaryRender"
      summary-text="总计"
      summary></ui-table>
  </div>
</template>

<script>
import { Table } from "amumu-ui"

const dataSource = [
  {
    id: "100001",
    name: "中性笔",
    count: 89,
    price: 2,
    date: "2019-01-08 10:01:15",
    operator: "小明",
  },
  {
    id: "100002",
    name: "笔记本",
    count: 90,
    price: 5,
    date: "2019-01-08 10:01:15",
    operator: "小明",
  },
  {
    id: "100003",
    name: "鼠标垫",
    count: 15,
    price: 20.23,
    date: "2019-01-08 10:01:15",
    operator: "小明",
  },
  {
    id: "100004",
    name: "U盘",
    count: 10,
    price: 50,
    date: "2019-01-08 10:01:15",
    operator: "小明",
  },
  {
    id: "100005",
    name: "鼠标",
    count: 20,
    price: 33.33,
    date: "2019-01-08 10:01:15",
    operator: "小明",
  },
  {
    id: "100006",
    name: "键盘",
    count: 20,
    price: 50.99,
    date: "2019-01-08 10:01:15",
    operator: "小明",
  },
]

const columns = [
  {
    title: "ID",
    key: "id",
    fixed: "left",
  },
  {
    title: "名称",
    key: "name",
    width: 150,
    fixed: "left",
  },
  {
    title: "数量",
    key: "count",
    width: 230,
  },
  {
    title: "单价",
    key: "price",
    width: 230,
  },
  {
    title: "采购日期",
    key: "date",
    width: 300,
  },
  {
    title: "操作人",
    key: "operator",
    width: 150,
    fixed: "right",
  },
]

export default {
  components: {
    "ui-table": Table,
  },
  data() {
    return {
      dataSource: dataSource,
      columns: columns,
      rowSelection: {
        onChange: this.onRowSelectChange,
        getCheckboxProps: this.getCheckboxProps,
      },
      selected: [],
    }
  },
  methods: {
    onRowSelectChange(selected) {
      console.log(selected)
    },
    summaryRender(column, rows) {
      const countRows = ["count", "price"]
      if (countRows.includes(column.key)) {
        return rows.reduce((total, row) => total + row[column.key], 0)
      } else {
        return "--"
      }
    },
  },
}
</script>
