import React, { Component } from 'react'
import { Space, Tag, Typography } from 'antd'
import Highlighter from 'pages/system/doc/highlighter'

const { Text } = Typography

export default class query extends Component {
    render() {
        return (
            <Space direction="vertical" className="w-100-p">
                <Text>
                    <Tag color="orange">/query</Tag>
                </Text>
                <ul>
                    <li class="mb-md">
                        <Space direction="vertical" className="w-100-p">
                            <Text>
                                <Tag color="red">QueryType</Tag>
                                获取查询类型字符串，与后端对应。
                            </Text>
                            <ul>
                                <li>
                                    <p>
                                        <Tag color="red">GreaterThan</Tag>：{' '}
                                        <Tag color="blue">&gt;</Tag>
                                    </p>
                                </li>
                                <li>
                                    <p>
                                        <Tag color="red">GreaterThanOrEqual</Tag>：{' '}
                                        <Tag color="blue">&gt;=</Tag>
                                    </p>
                                </li>
                                <li>
                                    <p>
                                        <Tag color="red">LessThan</Tag>：{' '}
                                        <Tag color="blue">&lt;</Tag>
                                    </p>
                                </li>
                                <li>
                                    <p>
                                        <Tag color="red">LessThanOrEqual</Tag>：{' '}
                                        <Tag color="blue">&lt;=</Tag>
                                    </p>
                                </li>
                                <li>
                                    <p>
                                        <Tag color="red">Like</Tag>： <Tag color="blue">LIKE</Tag>
                                    </p>
                                </li>
                                <li>
                                    <p>
                                        <Tag color="red">Equal</Tag>： <Tag color="blue">=</Tag>
                                    </p>
                                </li>
                                <li>
                                    <p>
                                        <Tag color="red">StartWith</Tag>：{' '}
                                        <Tag color="blue">STRAT</Tag>
                                    </p>
                                </li>
                                <li>
                                    <p>
                                        <Tag color="red">EndWith</Tag>： <Tag color="blue">END</Tag>
                                    </p>
                                </li>
                            </ul>
                        </Space>
                    </li>
                    <li class="mb-md">
                        <Space direction="vertical" className="w-100-p">
                            <Text>
                                <Tag color="red">getSearchDateRange</Tag>
                                <Tag color="green">
                                    (range: Array, format: String = 'YYYY-MM-DD', unit: String =
                                    'days') =&gt; Array
                                </Tag>
                            </Text>
                            <Text>获取查询用时间范围数组，在这里会自动将第二个时间增加1天。</Text>
                            <Text>
                                如果选择的日期范围为2021-01-01~2021-01-10，最终需要取得
                                &gt;=2021-01-01 and &lt;2021-01-11 的结果
                            </Text>
                        </Space>
                    </li>
                    <li class="mb-md">
                        <Space direction="vertical" className="w-100-p">
                            <Text>
                                <Tag color="red">getSearchInfo</Tag>
                                <Tag color="green">
                                    ({'{'}query: Object, queryType: Object{'}'}) =&gt; Array
                                </Tag>
                            </Text>
                            <Text>从键值对的query类型转换成数组类型。</Text>
                            <Text>键：自动作为field值</Text>
                            <Text>值：得到一个数组作为value的值</Text>
                            <Text>
                                queryType：一个JSON类型，已query的键为键，
                                <Tag className="ml-xs" color="red">
                                    QueryType
                                </Tag>
                                为值。 如果是一个
                                <Tag className="ml-xs" color="red">
                                    QueryType
                                </Tag>
                                的数组，则自动对应到value中的各个值。
                            </Text>
                            <Text>示例：</Text>
                            <Highlighter
                                code={this.props.codes['util/query/index.js']}
                                language="javascript"
                            />
                        </Space>
                    </li>
                </ul>
            </Space>
        )
    }
}
