import { Pagination, Dialog, Input, Button, Table, Select } from "@alifd/next";
import request from '../../../_server/index.js'
import React from "react";
import "./index.less";
import { systemOptions } from "./systemOptions";

const columns = [
    {
        title: "id",
        dataIndex: "id",
        width: 100,
    },
    {
        title: "api名称",
        dataIndex: "apiName",
        width: 300,
    },
    {
        title: "api地址",
        dataIndex: "apiPath",
        width: 400,
    },
    {
        title: "system",
        dataIndex: "system",
        render: (key: any) => {
            console.log("key", key);
            return getSystemData(key)
        },
    },

];

function getSystemData(key: any) {
    let data = systemOptions.find((v: any) => {
        return v.value == key;
    })

    if (data) {
        return data.label
    }
    return key
}

class ApiLayer extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            result: [],
            pageNum: 1,
            systemList: [],
            typeList: []
        }

        this.getApi()

    }

    componentDidMount() {
        this.onSubmit()
    }

    getApi = () => {
        let { apiName, system, pageNum, apiPath, apiType } = this.state;
        request
            .postUrl("/a/rest/getApiInfoByParam", {
                apiName,
                system,
                apiPath,
                apiType,
                pageSize: 10,
                pageNum,
                application: this.props.ApiModelProperty,
                //isBoomApi: 0,
            })
            .then((res: any) => {
                if (res.code === 0) {
                    this.setState({
                        result: res.data.result,
                        total: res.data.total,
                    });
                    return;
                }
            });
    };
    getApiDetail = (id: any) => {
        request
            .postUrl("/a/rest/getApiDetail", {
                id,
            })
            .then((res: any) => {
                if (res.code === 0) {
                    this.props.setApiDetail({
                        restParamsOut: res.data.restParamsOut,
                        apiId: res.data.id,
                        apiName: res.data.apiName,
                    });
                    return;
                }
            });
    };

    handleOk = () => {
        console.log('出发数据', this.state)
        this.props.setApiDetail(this.state.record);
    }
    closeDialog = () => {
        console.log('关闭')
        this.props.closeApiLayer();
    }
    onSubmit = () => {
        console.log('提交', this.state)
        this.getApi()
    };

    onChangeSelect = (e: any, name: string) => {
        this.setState({
            [name]: e,
        });

    }
    onChange = (e: any) => {
        console.log('选中数据', e)
        if (e && e.target) {
            this.setState({
                [e.target.name]: e.target.value,
            });
        }
    }

    render() {
        let _this = this
        return (
            <Dialog
                title="开放服务"
                footerAlign='right'
                visible={this.props.isModalVisible}
                onClose={this.closeDialog}
                onCancel={this.closeDialog}
                onOk={this.handleOk}
                width='1100'
            >
                <div>
                    <div className="formData">
                        <div className="formItemOne">
                            <div className="label">平台</div>
                            <div className="box">
                                <Select
                                    style={{ width: 100 + '%' }}
                                    name="system"
                                    placeholder="请选择"
                                    value={this.state.sysId}
                                    onChange={(e) => this.onChangeSelect(e, 'system')}
                                    dataSource={systemOptions.map((v: any) => ({
                                        label: v.label,
                                        value: v.value,
                                    }))}
                                >
                                </Select>
                            </div>

                        </div>
                        <div

                            className="formItemOne"
                        >
                            <div className="label">API类型</div>
                            <div className="box">
                                <Select
                                    style={{ width: 100 + '%' }}
                                    placeholder="请选择"
                                    name="apiType"
                                    onChange={(e) => this.onChangeSelect(e, 'apiType')}
                                    dataSource={[{ name: 'sql', id: 0 }, { name: 'url', id: 1 }].map((v: any) => ({
                                        label: v.name,
                                        value: v.id,
                                    }))}
                                >
                                </Select>
                            </div>

                        </div>
                        <div

                            className="formItemOne"
                        >
                            <div className="label">API名称</div>
                            <div className="box">
                                <Input style={{ width: 100 + '%' }} name="apiName" onChange={this.onChange} placeholder='请输入' />
                            </div>

                        </div>
                        <div className="formItemOne">
                            <div className="label">API地址</div>
                            <div className="box">
                                <Input style={{ width: 100 + '%' }} name="apiPath" onChange={this.onChange} placeholder='请输入' />
                            </div>

                        </div>

                        <div>
                            <Button type="primary" onClick={this.onSubmit}>
                                搜索
                            </Button>
                        </div>
                    </div>
                    <Table
                        columns={columns}
                        fixedHeader
                        dataSource={this.state.result}
                        rowSelection={{
                            mode: 'single',
                            onSelect(selected, record) {
                                console.log('点击后', selected, record)
                                _this.setState({
                                    record,
                                });
                            }
                        }}
                    />
                </div>
                <div>
                    <Pagination
                        style={{
                            textAlign: 'center',
                            marginTop: '10px'
                        }}
                        total={this.state.total}
                        current={this.state.pageNum}
                        showJump={false}
                        onChange={(current: number) => {
                            this.setState({
                                pageNum: current
                            })
                            this.onSubmit()
                        }}
                    ></Pagination>
                </div>

            </Dialog>
        );
    }
}


export { ApiLayer };