<template>
  <div class="demo-table-fix-head">
    <ui-table
      :data-source="dataSource"
      :columns="columns"
      :height="350"></ui-table>
  </div>
</template>

<script>
import { Table } from "amumu-ui"
import { message } from "amumu-ui/src/factory"

const dataSource = []

for (let i = 0; i < 100; i++) {
  dataSource.push({
    id: 100000 + i,
    title: `BUG-${100023 + i}`,
    index: Math.ceil(Math.random() * 10) + i,
    status: "待处理",
    handler: "吴彦祖",
  })
}

const columns = [
  {
    title: "ID",
    key: "id",
    sorter: (a, b) => a.id - b.id,
  },
  {
    title: "标题",
    key: "title",
    sortable: true, // 自带 sort((a, b) => a - b) 排序
  },
  {
    title: "索引",
    key: "index",
    sortable: true,
    onBeforeSort({ column, order }) {
      message.info(`排序的字段是${column.key}, 排序顺序是${order}, 返回false可以阻止排序`)
      return false
    },
  },
  {
    title: "状态",
    key: "status",
  },
  {
    title: "处理人",
    key: "handler",
  },
]

export default {
  components: {
    "ui-table": Table,
  },
  data() {
    return {
      dataSource: dataSource,
      columns: columns,
    }
  },
}
</script>
