import React from 'react';
import { message, Popover, Modal } from 'antd';

import { getComponent } from './base';

import style from './index.less';
import _ from 'lodash';
import { CellProps, CellState } from './interface';
// import EditCell from './EditCell';

export default class Cell extends React.Component {
    static getDerivedStateFromProps(nextProps: CellProps, prevState: CellState) {
        const { prevProps } = prevState;
        let nextState: CellState = {
            ...prevState,
            prevProps: nextProps,
        };
        return nextState;
    }
    constructor(props: CellProps) {
        super(props);
        this.state = {
            prevProps: props,
            isEditVisible: false,
            isMenuVisible: false,
            editValue: [],
            value: [],
        };
    }

    handleVisibleChange = (visible: boolean) => {
        if (!visible) {
            this.emitChange();
        }
        this.setState({ isEditVisible: visible, isMenuVisible: false });
    };
    menuVisibleChange = (visible: boolean) => {
        this.setState({ isMenuVisible: visible, isEditVisible: false });
    };
    handleChange = ({ newValue, originValue, emitFlag }: any) => {
        this.setState(
            {
                inputValue: newValue,
                originValue,
            },
            () => {
                if (emitFlag) {
                    this.emitChange();
                }
            },
        );
    };

    emitChange = () => {
        let { value, editValue } = this.state;
        if (_.isEqual(value, editValue)) {
            return;
        }
        const {
            record,
            columnObj,
            columnObj: { key },
        } = this.props;
        if (this.props.updateData) {
            this.props.updateData({
                id: record.id,
                value: editValue,
            });
        }
        this.setState({
            editValue: [],
        });
    };

    renderPopContent = () => {
        return <div>ca</div>;
        // return (
        //     <EditCell
        //         value={inputValue}
        //         onChange={this.handleChange}
        //         component={component}
        //         componentAttr={columnAttrObj}
        //         columns={columns}
        //         columnObj={columnObj}
        //         record={record}
        //     />
        // );
    };

    renderCellContent = () => {
        let { columnConfig, cellData } = this.props;
        let { isEditVisible, isMenuVisible, inputValue } = this.state;
        let { columnType, columnAttrObj = {}, width, readOnlyFlag } = columnConfig || {};
        columnAttrObj.disabled = readOnlyFlag || false;
        //模糊搜索单选
        if (String(columnType) === '13' && !columnAttrObj.isMultiple) {
            columnType = '2';
        }
        const component: any = getComponent(String(columnType));
        if (!component) {
            console.log('[TableCell] unknown type ' + columnType);
            return null;
        }
        return (
            <div className={style.cellContent} onDoubleClick={this.jump2detail}>
                <component.Detail value={cellData} columnConfig={columnConfig} />
            </div>
        );
    };

    render() {
        const { columnConfig } = this.props;
        const { width } = columnConfig || {};
        return (
            <div className={style.cell} style={{ width }}>
                {this.renderCellContent()}
            </div>
        );
    }
}