import React from "react";
import "./indexBasicInfo.css";
import { Typography, Table, Button } from "antd";

const { Text, Title, Link } = Typography;

class indexBasicInfo extends React.Component {
  constructor(props) {
    super(props);
    // this.title = title[props.location.pathname];
  }
  render() {
    const apiUrl = this.props.location.state.apiurl;
    const inputPara = this.props.location.state.inputpara.map((item, index) => {
      return <Text key={index}>{item}</Text>;
    });
    const outPutList = this.props.location.state.data.outputResult;
    const errorList = this.props.location.state.data.errorResult;
    const title = this.props.location.state.name;
    return (
      <div>
        <Title level={4}>{title}</Title>
        <div>
          <Title className="stocks-title" level={5}>
            输入参数：
          </Title>
          {inputPara}
        </div>

        <div>
          <Title className="stocks-title" level={5}>
            输出结果：
          </Title>
          <Table
            columns={columns}
            dataSource={outPutList}
            pagination={false}
            size="small"
          />
        </div>
        <div>
          <Title className="stocks-title" level={5}>
            输出结果异常：
          </Title>
          <Table
            columns={errColumns}
            dataSource={errorList}
            pagination={false}
            size="small"
          />
        </div>

        <div>
          <Title className="stocks-title" level={5}>
            测试地址：
          </Title>
          <Button type="primary" className="stocks-button">
            <a href={apiUrl} target="_blank">
              API测试工具
            </a>
          </Button>
        </div>
        <div>
          <Title className="stocks-title" level={5}>
            SDK包：
          </Title>
          <Link href="http://boniu.xazhima.com/sdk/index_any_day.sdk">php程序包下载</Link>
        </div>
      </div>
    );
  }
}

export default indexBasicInfo;
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    render: (text) => <span>{text}</span>
  },
  {
    title: "说明",
    dataIndex: "desc",
    key: "desc"
  }
];
const errColumns = [
  {
    title: "错误类型",
    dataIndex: "type",
    key: "type",
    render: (text) => <span>{text}</span>
  },
  {
    title: "message_code",
    dataIndex: "code",
    key: "code"
  },
  {
    title: "message",
    dataIndex: "message",
    key: "message"
  }
];