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

class ShowDataDiction extends React.Component<any, any> {
    constructor(props: any) {
        console.log('数据字段', props)
        super(props);
        this.state = {
            showDatamap: false,
            currentEnum: false,
            selectOption: [],
            enumItemList: [],
            record: {}
        };
    }


    parentData(propsData: any) {

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


    // 提供给父调佣
    showDatamapLayer = () => {
        this.setState({
            showDatamap: true,
        });
    };

    handleEnumItemItem = (v: any) => {
        console.log(v)
        let obj = this.state.record
        obj['selectOption'] = v
        this.setState({
            record: v
        })
        this.props.onChange(obj)
    }
    setDatamapDetail = (obj: any) => {
        console.log('点击事件', obj)
        this.setState({
            record: obj,
            showDatamap: false,
        });
        this.props.onChange(obj)
        this.getDataEnumItemList(obj.id);
    }

    closeDatamapLayer = () => {
        this.setState({
            showDatamap: false,
        });
    }

    getDataEnumItemList = (id: number) => {
        request
            .postUrl("/a/report/enum/getDataEnumItemList", {
                id,
            })
            .then((res: any) => {
                if (res.code === 0) {
                    this.setState({
                        enumItemList: res.data,
                        currentEnum: true,
                    });
                    return;
                }
            });
    };

    render() {
        return (
            <div>
                {(
                    <DatamapLayer
                        setDatamapDetail={this.setDatamapDetail}
                        isModalVisible={this.state.showDatamap}
                        closeDatamapLayer={this.closeDatamapLayer}
                    />
                )}

                {this.state.record && this.state.record['id'] && <div className="showSelectData">
                    <Form.Item label="系统">
                        <Input
                            name='sysName'
                            value={this.state.record.sysName}
                            type="text"
                            disabled
                        />
                    </Form.Item>
                    <Form.Item label="业务类型">
                        <Input
                            name='typeName'
                            value={this.state.record.typeName}
                            disabled
                        />
                    </Form.Item>
                    <Form.Item label="子类型">
                        <Input
                            name='name'
                            value={this.state.record.name}
                            disabled
                        />
                    </Form.Item>
                    <Form.Item>
                        {this.state.currentEnum &&
                            this.state.enumItemList.length !== 0 && (
                                <div className="enumItemListwraps">
                                    <div className="info">
                                        请选择相关字段（不勾选默认全选）
                                    </div>
                                    <Checkbox.Group
                                        name='enumItemIds'
                                        value={
                                            this.state.record.selectOption
                                        }
                                        onChange={(e) => this.handleEnumItemItem(e)}
                                        style={{ width: "100%" }}
                                    >
                                        {this.state.currentEnum &&
                                            this.state.enumItemList.map((v: any) => {
                                                return (
                                                    <Checkbox value={v.id + ""}>
                                                        {v.name}
                                                    </Checkbox>
                                                );
                                            })}
                                    </Checkbox.Group>
                                </div>
                            )}
                    </Form.Item>

                </div>}
            </div>
        );
    }
}

export { ShowDataDiction };