import React from "react";
import {
  Table,
  Justify,
  Button,
  SearchBox,
  Card,
  Layout,
  Bubble,
  Icon,
} from "@tencent/tea-component";

const { Body, Content } = Layout;
const { pageable } = 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",
  },
];

function TableLayoutExample() {
  return (
    <Layout>
      <Body>
        <Content>
          <Content.Body>
            <Table.ActionPanel>
              <Justify
                left={
                  <>
                    <Button type="primary">新建</Button>
                    <Button>开机</Button>
                  </>
                }
                right={
                  <>
                    <SearchBox />
                    <Button icon="setting" />
                    <Button icon="refresh" />
                    <Button icon="download" />
                  </>
                }
              />
            </Table.ActionPanel>
            <Card>
              <Table
                verticalTop
                records={cvmList}
                recordKey="instanceId"
                rowDisabled={record => record.status === "stopped"}
                rowClassName={record => record.status}
                columns={[
                  {
                    key: "instance",
                    header: "ID/实例名",
                    render: cvm => (
                      <>
                        <p>
                          <a>{cvm.instanceId}</a>
                        </p>
                        <p>{cvm.instanceName}</p>
                      </>
                    ),
                  },
                  {
                    key: "status",
                    header: () => (
                      <>
                        状态
                        <Bubble content="状态描述">
                          <Icon type="info" />
                        </Bubble>
                      </>
                    ),
                    width: 100,
                    render: cvm => {
                      if (cvm.status === "running") {
                        return <span style={{ color: "green" }}>运行中</span>;
                      }
                      if (cvm.status === "stopped") {
                        return <span style={{ color: "red" }}>已关机</span>;
                      }
                      return cvm.status;
                    },
                  },
                  {
                    key: "area",
                    header: "可用区域",
                  },
                  {
                    key: "modal",
                    header: "主机型号",
                  },
                  {
                    key: "ip",
                    header: "IP 地址",
                    align: "right",
                    render: cvm => (
                      <>
                        <p>{cvm.publicIP} (公)</p>
                        <p>{cvm.privateIP} (内)</p>
                      </>
                    ),
                  },
                ]}
                addons={[pageable()]}
              />
            </Card>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}

export default function Demo() {
  return (
    <section
      style={{
        height: 320,
        border: "1px solid #ddd",
      }}
    >
      <TableLayoutExample />
    </section>
  );
}
