import React from "react";
import { ApiLayer } from "./ApiLayer";
import { Form, Input, Select } from "@alifd/next";
import request from '../../../_server/index.js'

class ShowApiSource extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        console.log("开放服务11", props);

        this.state = {
            showApi: false,
            application: 0, // 暂时都使用一个
            restParamsOut: [],
            record: {
                
            }
        };

    }

    parentData(propsData: any) {

        console.log('数据字段', propsData)
        if (propsData && propsData['dataSelectValue'] !== undefined && propsData['dataSelectValue'] === 2) {
            this.setState({
                record: propsData['dataSourceAll'] || {}
            })
            if (propsData['dataSourceAll']['id'] !== undefined) {
                this.getApiDetail(propsData['dataSourceAll']['id']);
            }
        }
    }

    setApiDetail = (obj: any) => {
        console.log("选中内容", obj);
        obj.fieldKeyData={
            apiPidField:'',
            apiIdField:'',
            apiNameField:'',
        }
       
        this.setState({
            record:obj,
            showApi: false,
        });
        this.props.onChange(obj)
        this.getApiDetail(obj.id)
    };

    showApiLayer = () => {
        this.setState({
            showApi: true,
        });
    };
    closeApiLayer = () => {
        this.setState({
            showApi: false,
        });
    };

    getApiDetail = (id: any) => {
        request
            .postUrl("/a/rest/getApiDetail", {
                id,
            })
            .then((res: any) => {
                if (res.code === 0) {
                    this.setState({
                        restParamsOut: res.data.restParamsOut,
                        apiId: res.data.id,
                    });

                    return;
                }

            });
    };


    changeValue = (value: any, name: string) => {
        let record=this.state.record
        console.log('record',record, record.fieldKeyData,name,value)
        record['fieldKeyData'][name]=value
        this.setState({
            record
        })
        this.props.onChange(record)
    }



    render() {
        return (
            <div>
                {(
                    <ApiLayer
                        setApiDetail={this.setApiDetail}
                        isModalVisible={this.state.showApi}
                        closeApiLayer={this.closeApiLayer}
                        ApiModelProperty={this.state.application}
                    />
                )}
                {
                    this.state.record && this.state.record.id && (
                        <>
                            <Form.Item label="api">
                                <Input
                                    name='apiName'
                                    placeholder=""
                                    value={this.state.record.apiName}
                                    disabled
                                ></Input>
                            </Form.Item>
                            <Form.Item label="pid">
                                <Select
                                    style={{ width: "100%" }}
                                    placeholder="pid"
                                    value={this.state.record.fieldKeyData?.apiPidField}
                                    onChange={(e) => this.changeValue(e, "apiPidField")}
                                >
                                    {this.state.restParamsOut.map((v: any) => {
                                        return (
                                            <Select.Option value={v.nameEn} key={v.nameEn}>
                                                {v.nameEn}
                                            </Select.Option>
                                        );
                                    })}
                                </Select>
                            </Form.Item>
                            <Form.Item label="id">
                                <Select
                                    style={{ width: "100%" }}
                                    placeholder="请选择id"
                                    value={this.state.record.fieldKeyData?.apiIdField}
                                    onChange={(e) =>
                                        this.changeValue(e, 'apiIdField')
                                    }
                                >
                                    {this.state.restParamsOut.map((v: any) => {
                                        return (
                                            <Select.Option value={v.nameEn} key={v.nameEn}>
                                                {v.nameEn} ({v.nameCn})
                                            </Select.Option>
                                        );
                                    })}
                                </Select>
                            </Form.Item>
                            <Form.Item label="name">
                                <Select
                                    style={{ width: "100%" }}

                                    placeholder="请选择name"
                                    value={this.state.record.fieldKeyData?.apiNameField}
                                    onChange={(e) =>
                                        this.changeValue(e, 'apiNameField')
                                    }
                                >
                                    {this.state.restParamsOut.map((v: any) => {
                                        return (
                                            <Select.Option value={v.nameEn} key={v.nameEn}>
                                                {v.nameEn} ({v.nameCn})
                                            </Select.Option>
                                        );
                                    })}
                                </Select>
                            </Form.Item>
                        </>
                    )
                }

            </div>
        );
    }
}

export { ShowApiSource };