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

const { expandable } = Table.addons;

const cvmList = [
  {
    instanceId: "ins-4m99aio4",
    instanceName: "Hongkong VPN",
    status: "running",
    area: "香港一区",
    modal: "标准型 S1",
    publicIP: "119.28.142.24",
    privateIP: "10.144.77.75",
  },
  {
    instanceId: "ins-3e7y5ww3",
    instanceName: "Guangzhou Test",
    status: "stopped",
    area: "广州三区",
    modal: "标准型 S1",
    publicIP: "112.30.42.241",
    privateIP: "10.121.72.123",
  },
];

export default function TableAddonExample() {
  const [expandedKeys, setExpandedKeys] = useState([]);

  return (
    <Table
      records={cvmList}
      recordKey="instanceId"
      columns={[
        {
          key: "instance",
          header: "ID/实例名",
          render: cvm => (
            <>
              <p>
                <a>{cvm.instanceId}</a>
              </p>
              <p>{cvm.instanceName}</p>
            </>
          ),
        },
        {
          key: "area",
          header: "可用区域",
        },
        {
          key: "modal",
          header: "主机型号",
        },
        {
          key: "publicIP",
          header: "IP 地址",
          align: "right",
        },
      ]}
      addons={[
        expandable({
          expandedKeys,
          onExpandedKeysChange: (keys, { event }) => {
            event.stopPropagation();
            setExpandedKeys(keys);
          },
          render(record) {
            return `${record.instanceId} 的详情`;
          },
          gapCell: 2,
          gapCellRender: record => "gapCellRender",
        }),
      ]}
    />
  );
}