<template>
  <div class="demo-table-filter">
    <ui-table
      :data-source="dataSource"
      :columns="columns"
      :row-selection="rowSelection"></ui-table>
  </div>
</template>

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

const dataSource = [
  {
    id: "100001",
    title: "升级版本方案",
    status: "待处理",
    handler: "吴尊",
  },
  {
    id: "100002",
    title: "待定需求方案",
    status: "待处理",
    handler: "吴彦祖",
  },
  {
    id: "100003",
    title: "BUG-100023",
    status: "待处理",
    handler: "吴彦祖",
  },
  {
    id: "100004",
    title: "BUG-100025",
    status: "待处理",
    handler: "胡歌",
  },
  {
    id: "100005",
    title: "TODO-200005",
    status: "待处理",
    handler: "胡歌",
  },
  {
    id: "100006",
    title: "TODO-200006",
    status: "待处理",
    handler: "吴尊",
  },
]

const columns = [
  {
    title: "ID",
    key: "id",
    sorter: (a, b) => a.id - b.id,
  },
  {
    title: "标题",
    key: "title",
    filters: [
      { label: "需求", value: "方案" },
      { label: "BUG", value: "BUG" },
      { label: "待办", value: "TODO" },
    ],
    onFilter: (value, row) => row.title.indexOf(value) > -1,
  },
  {
    title: "状态",
    key: "status",
  },
  {
    title: "处理人",
    key: "handler",
    filters: [
      { label: "吴彦祖", value: "吴彦祖" },
      { label: "吴尊", value: "吴尊" },
      { label: "胡歌", value: "胡歌" },
    ],
    onFilter: (value, row) => row.handler === value,
  },
]

export default {
  components: {
    "ui-table": Table,
  },
  data() {
    return {
      dataSource: dataSource,
      columns: columns,
      rowSelection: {
        onChange: this.onRowSelectChange,
      },
    }
  },
  methods: {
    onRowSelectChange(selected) {
      console.log(selected)
    },
  },
}
</script>
