/**
 * 数据来源半成品
 */
import React, { Component, useState, useRef, useEffect } from "react";
import { ShowDataDiction } from "./component/ShowDataDiction";
import { ShowApiSource } from './component/ShowApiSource'
import { Select, Button } from '@alifd/next';

import './component/index.less'

interface DataSourceSelectType {
    [key: number]: string
}
interface DataSourceType {
    selectList?: number[]
}
const handleSelectOption = (): any[] => {
    let result: DataSourceSelectType = {
        1: "数据字典",
        2: "开放服务",
        3: "联动报表",
    };
    let arr = [1, 2];
    return arr.map((key: number) => {
        return {
            value: key * 1,
            label: result[key],
        };
    });
};

/**
 * widgetDataTypeList[] 报表选择项
 */
const DataSource = (props: any) => {
    const { field, onChange } = props

    const propData = field.getValue()
    console.log('props设置器', props)
    const onRef = useRef(null)
    const [selectValue, setSelectValue] = useState(0);

    useEffect(() => {
        if (propData && propData['dataSelectValue']) {
            setSelectValue(propData['dataSelectValue'])
            onRef.current?.parentData(propData)
        } 
    })

    function childrenOnChange(v: any) {

        let objData = {
            name: field.name,
            dataSelectValue: selectValue,
            dataSourceAll: v
        }
        console.log('字模块改变', objData)
        onChange(objData)
    }

    function showSelectData() {
        if (selectValue === 1) {
            onRef.current.showDatamapLayer();
        } else if (selectValue === 2) {
            onRef.current.showApiLayer();
        }
    }
    return (
        <div className="dataSourceBox">
            <div className="dataSourcelBtn">
                <div className="dataSourceSelect">
                    <Select
                        style={{ width: "100%" }}
                        value={selectValue}
                        onChange={(e) => setSelectValue(e)}
                        placeholder="请选择"
                    >
                        {handleSelectOption().map((item: any) => {
                            return (
                                <Select.Option value={parseInt(item.value)} key={item}>
                                    {item.label}
                                </Select.Option>
                            );
                        })}
                    </Select>
                </div>
                <div className="dataSourceIcon">
                    <Button
                        onClick={showSelectData}
                        className="dataSourceIcon_icon"
                    >搜索</Button>
                </div>
            </div>

            {selectValue === 1 && (
                <ShowDataDiction
                    ref={onRef}
                    onChange={(v: any) => childrenOnChange(v)}
                />
            )}
            {selectValue === 2 && (
                <ShowApiSource
                    ref={onRef}
                    onChange={(v: any) => childrenOnChange(v)}
                />
            )}

        </div>
    );
}

export default class extends Component<DataSourceType> {
    render() {
        return <DataSource {...this.props} />;
    }
}