import React, { useState } from "react";
import {
  Table,
  Switch,
  Form,
  RadioGroup,
  Radio,
  StatusTip,
  Segment,
} from "@tencent/tea-component";

const cvmList = [
  {
    instanceId: "ins-3e7y5ww3-mul",
    instanceName: "Guangzhou Test",
    status: "running",
    area: "广州三区",
    areaDetail: {
      zone: "广州地区",
      zoneNumber: "广州三区",
    },
    modal: "标准型 S1",
    publicIP: "112.30.42.241",
    privateIP: "10.121.72.123",
    desc:
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    instanceId: "ins-4m99aio4",
    instanceName: "Hongkong VPN",
    status: "running",
    area: "香港一区",
    areaDetail: {
      zone: "香港地区",
      zoneNumber: "香港一区",
    },
    modal: "标准型 S1",
    publicIP: "119.28.142.24",
    privateIP: "10.144.77.75",
    desc:
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
];

export default function TableExample() {
  const [bordered, setBordered] = useState(false);
  const [compact, setCompact] = useState(false);
  const [verticalTop, setVerticalTop] = useState(true);
  const [disableTextOverflow, setDisableTextOverflow] = useState(false);
  const [status, setStatus] = useState("none");

  return (
    <>
      <Form style={{ marginBottom: 32 }}>
        <Form.Item label="表格样式" align="middle">
          <Segment
            value={String(bordered)}
            onChange={value => {
              if (value === "false") {
                setBordered(false);
              } else if (value === "true") {
                setBordered(true);
              } else {
                setBordered(value);
              }
            }}
            options={[
              { text: "无边框", value: "false" },
              { text: "外边框", value: "true" },
              { text: "全边框", value: "all" },
            ]}
          />
          <i className="tea-divider tea-divider--space-2n" />
          <Switch value={compact} onChange={value => setCompact(value)}>
            紧凑样式
          </Switch>
          <Switch value={verticalTop} onChange={value => setVerticalTop(value)}>
            上对齐
          </Switch>
          <Switch
            value={!disableTextOverflow}
            onChange={value => setDisableTextOverflow(!value)}
          >
            自动省略
          </Switch>
        </Form.Item>
        <Form.Item label="顶部提示">
          <RadioGroup value={status} onChange={value => setStatus(value)}>
            <Radio name="none">无</Radio>
            <Radio name="loading">加载中</Radio>
            <Radio name="empty">空数据</Radio>
            <Radio name="found">找到数据</Radio>
            <Radio name="error">加载失败</Radio>
          </RadioGroup>
        </Form.Item>
      </Form>
      <Table
        compact={compact}
        bordered={bordered}
        verticalTop={verticalTop}
        disableTextOverflow={disableTextOverflow}
        records={status === "empty" ? [] : 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: "状态",
            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: "areaDetail.zone",
            header: "所在区",
          },
          {
            key: "modal",
            header: "主机型号",
          },
          {
            key: "publicIP",
            header: "IP 地址",
          },
          {
            key: "desc",
            header: "描述",
            align: "right",
          },
        ]}
        topTip={
          status !== "none" && (
            <StatusTip
              // @ts-ignore
              status={status}
              onClear={() => setStatus("loading")}
              onRetry={() => setStatus("loading")}
            />
          )
        }
      />
    </>
  );
}