import React, { useEffect, useState } from 'react';
import { message } from 'antd';
import { config } from './config';
import s from './Cell.less';
import { CellProps } from './interface';
import _ from 'lodash';
import FormHelper from '../utils/formHelper';
interface CellData {
    text: string;
    value: any;
}
const Cell = (props: CellProps) => {
    const { columnConfig, cellClassName, cellStyle, rowData, cellData, emitChangeCell } = props;
    const { width, columnType, columnName, requiredFlag, renderDetailCell, renderEditCell } = columnConfig || {};

    if (config[String(columnType)] === undefined) {
        return null;
    }
    const Comp = config[String(columnType)].component;
    const [status, setStatus] = useState('detail');

    useEffect(() => {
        setStatus('detail');
    }, [cellData]);

    const changeCellData = (changedValue) => {
        console.log('onChange', changedValue);
    };
    const emitChangeCellData = (changedValue, optionValue) => {
        console.log('onEmitChange', changedValue);
        const temp: Array<CellData> = [];
        cellData.map((item) => {
            temp.push({ text: item.text, value: item.value });
        });
        if (_.isEqual(temp, changedValue)) {
            setStatus('detail');
            return;
        }
        changeValue(changedValue, optionValue);
    };

    const changeValue = async (changedValue, optionValue) => {
        // 校验必填项
        if (requiredFlag) {
            if (!changedValue || changedValue.length === 0) {
                message.error('该字段为必填项');
                return;
            }
            if (changedValue.length === 1) {
                const data = changedValue[0];
                if (!data.value && !data.text) {
                    message.error('该字段为必填项');
                    return;
                }
            }
        }
        const extraData = FormHelper.changeTableData({
            item: columnConfig,
            changedKey: columnName,
            changedValue,
            originValue: optionValue,
        });
        extraData.push({
            columnCode: columnName,
            cellValueList: changedValue,
        });
        if (typeof emitChangeCell === 'function') {
            emitChangeCell({
                rowId: rowData.id,
                value: extraData,
            });
        }
    };

    const selfRenderDetailCell = () => {
        let detailCell = null;
        if (typeof renderDetailCell === 'function') {
            detailCell = renderDetailCell({ cellData, rowData, columnConfig });
        }
        return (
            <div
                className={s.detailCell}
                onDoubleClick={() => {
                    setStatus('edit');
                }}
            >
                {detailCell}
                {!detailCell && <Comp.Detail value={cellData} columnConfig={columnConfig} />}
            </div>
        );
    };

    const selfRenderEditCell = () => {
        let editCell = null;
        if (typeof renderEditCell === 'function') {
            editCell = renderEditCell({ cellData, rowData, columnConfig });
        }

        return (
            <div
                className={s.editCell}
                // onBlur={() => {
                //     setStatus('detail');
                // }}
            >
                {editCell}
                {!editCell && (
                    <Comp
                        value={cellData}
                        columnConfig={columnConfig}
                        onChange={changeCellData}
                        onEmitChange={emitChangeCellData}
                        style={{
                            minHeight: cellStyle.height,
                            borderRadius: 0,
                        }}
                    />
                )}
            </div>
        );
    };

    return (
        <div className={cellClassName} style={{ ...cellStyle, width: width || 200 }}>
            {status === 'detail' && selfRenderDetailCell()}
            {status === 'edit' && selfRenderEditCell()}
        </div>
    );
};

export default Cell;