import React from 'react';
import {Modal} from 'antd';
import s from './index.less';
import { antiAssign } from '@/apollo-table/utils/utils';

interface Props {
    onEmitChange: Function;
}
interface State {
    value: any;
    option: any;
}
export default function CellContainer<P extends Props>(Comp) {
    return class extends React.Component<P & Props, State> {
        constructor(props) {
            super(props);
            this.state = {
                value: props.value, // 组件的值
                option: undefined, // 选择项
            };
            console.log('props.value', props.value);
        }
        componentDidMount(): void {
            document.addEventListener('click', this.onBlur, false);
        }
        componentWillUnmount(): void {
            document.removeEventListener('click', this.onBlur, false);
        }
        changeValue = (value: any, option: any) => {
            console.log('value', value);
            this.setState({ value, option });
        };
        onBlur = () => {
            const { onEmitChange } = this.props;
            const { value, option } = this.state;
            console.log('state.value', value);
            if (typeof onEmitChange === 'function') {
                onEmitChange(value, option);
            }
        };
        onClick = (e) => {
            e.stopPropagation(); //阻止事件冒泡
            e.nativeEvent.stopImmediatePropagation();
        };
        render() {
            const selfProps = antiAssign(this.props, ['onEmitChange', 'onChange', 'value']);
            const { value } = this.state;
            return (
                <div className={s.container} onClick={this.onClick}>
                    <Comp
                        {...selfProps}
                        value={value}
                        onChange={this.changeValue}
                    />
                </div>
            );
        }
    };
}