<template>
  <div class="demo-table-custom-type">
    <ui-table :data-source="dataSource" :columns="columns"></ui-table>
  </div>
</template>

<script>
import { Table } from "amumu-ui"
import amumuConfig from "amumu-ui/src/managers/config"


const STATUS_LIST = [
  {
    id: 1,
    name: "待处理",
  },
  {
    id: 2,
    name: "进行中",
  },
  {
    id: 3,
    name: "已完结",
  }
]

const dataSource = [
  {
    id: "100001",
    title: "升级版本方案",
    status: 1,
    handler: "吴彦祖",
  },
  {
    id: "100002",
    title: "升级版本方案",
    status: 1,
    handler: "吴彦祖",
  },
  {
    id: "100003",
    title: "升级版本方案",
    status: 2,
    handler: "吴彦祖",
  },
]

const columns = [
  {
    title: "ID",
    key: "id",
    align: "right",
    width: 100,
    defaultSort: "desc",
    minDragWidth: 80,
  },
  {
    title: "标题",
    key: "title",
    transform: ({ value }) => `标题: ${value}`,
  },
  {
    title: "状态",
    key: "status",
    type: ["byId", { data: STATUS_LIST }],
  },
  {
    title: "处理人",
    key: "handler",
  },
]

const setAmumuConfig = () => {
  amumuConfig.set("Table.TypeRenderMap", {
    byId: (h, { value, row }, { data, id = "id", label = "name" }) => {
      const dataItem = data.find(item => item[id] === value)
      return dataItem ? dataItem[label] : "--"
    },
  })
}

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