import React from "react";
import { Table } from "@tencent/tea-component";

const { mergeable } = Table.addons;

const records = [
  { name: "Link", age: 20, phone1: "0755-88888888", phone2: "18888888888" },
  { name: "Zelda", age: 18, phone1: "0755-86013388", phone2: "18777777777" },
  { name: "Mario", age: 38, phone1: "0755-86013388", phone2: "13888888888" },
  { name: "Luigi", age: 48, phone1: "0755-86013388", phone2: "13666666666" },
  { name: "..." },
];

export default function TableAddonExample() {
  return (
    <Table
      records={records}
      recordKey="name"
      bordered="all"
      columns={[
        { key: "name", header: "姓名" },
        { key: "age", header: "年龄" },
        { key: "phone1", header: "电话" },
        { key: "phone2", header: "-" },
      ]}
      addons={[
        mergeable({
          headColSpan: columnIndex => {
            switch (columnIndex) {
              case 2:
                return 2;
              case 3:
                return 0;
            }
            return 1;
          },
          colSpan: (columnIndex, recordIndex) => {
            if (recordIndex === 4) {
              if (columnIndex > 0) {
                return 0;
              }
              return 4;
            }
            return 1;
          },
          rowSpan: (columnIndex, recordIndex) => {
            if (columnIndex === 2) {
              if (recordIndex === 1) {
                return 3;
              }
              if (recordIndex > 1) {
                return 0;
              }
            }
            return 1;
          },
        }),
      ]}
    />
  );
}