<template>
  <div class="demo-table-basic">
    <!-- minColWidth 设置表格整体最小宽度  -->
    <ui-table
      cache-width-key="amm-demo-column-width"
      :col-min-width="150"
      :data-source="dataSource"
      :columns="columns"
      :on-click="onClick"
      @column-width-dragend="headDragend"></ui-table>
  </div>
</template>

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

const dataSource = [
  {
    id: "100001",
    title: "升级版本方案",
    content: "方案内容",
    status: "待处理",
    handler: "吴彦祖",
  },
  {
    id: "100002",
    title: "升级版本方案",
    content: "方案内容",
    status: "待处理",
    handler: "吴彦祖",
  },
  {
    id: "100003",
    title: "升级版本方案",
    content: "方案内容",
    status: "待处理",
    handler: "吴彦祖",
  },
]

const columns = [
  {
    title: "ID",
    key: "id",
    className: "test-class",
    align: "right",
    width: 100,
    defaultSort: "desc",
    minDragWidth: 80,
  },
  {
    // 未设置宽度，最小宽度为 table 的 col-min-width
    title: "内容",
    key: "content",
    transform: ({ value }) => `内容: ${value}`,
  },
  {
    // 优先级高于 table 的 col-min-width
    minWidth: 200,
    title: "标题",
    key: "title",
    transform: ({ value }) => `标题: ${value}`,
  },
  {
    // minDragWidth 与 width，minWidth 功能独立，若自动分配宽度小于 minDragWidth，会无法拖拽
    minDragWidth: 200,
    title: "状态",
    key: "status",
  },
  {
    // 需要配合使用
    minWidth: 200,
    minDragWidth: 200,
    title: "处理人",
    key: "handler",
  },
]

export default {
  components: {
    "ui-table": Table,
  },
  data() {
    return {
      dataSource: dataSource,
      columns: columns,
    }
  },
  methods: {
    onClick() {
      console.log(arguments)
    },
    headDragend(data) {
      console.log("data", data)
    },
  },
}
</script>

<style lang="scss">
.demo-table-basic {
  table {
    margin: 0;
  }

  th,
  td {
    border: none;
  }
}
</style>
