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

const { Text, Title, Link } = Typography

const StocksInfo = (props) => {
  const outPutList = props.location.state.data.outputResult
  const errorList = props.location.state.data.errorResult
  const title = props.location.state.name
  const params = props.location.state.data.params
  const paramsInfo = props.location.state.data.paramsInfo
  const url = props.location.state.data.url
  const download = props.location.state.data.download
  return (
    <div>
      <Title level={4}>{title}</Title>
      <div>
        <Title className="stocks-title" level={5}>
          输入参数：
        </Title>
        <Text>
          { params }
        </Text>
        <div>
          {paramsInfo && '参数说明:  '}
          {
            paramsInfo && paramsInfo.map((info,index) => {
              return (
                <Text key={index}>{ info }</Text>
              )
            })
          }
        </div>
      </div>
      <div>
        <Title className="stocks-title" level={5}>
          输出结果：
        </Title>
        {/* 这里需要二级表格 */}
        <Table
          columns={columns}
          // expandable
          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={ url } target="_blank">API测试工具</a>
        </Button>
      </div>
      <div>
        <Title className="stocks-title" level={5}>
          SDK包：
        </Title>
        <Link href={ download }>php程序包下载</Link>
      </div>
    </div>
  )
}
export default StocksInfo

const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "说明",
    dataIndex: "desc",
    key: "desc",
  },
]
const errColumns = [
  {
    title: "错误类型",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "message_code",
    dataIndex: "code",
    key: "code",
  },
  {
    title: "message",
    dataIndex: "message",
    key: "message",
  },
]