import React, { 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 } = columnConfig || {};

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

    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)) {
            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 renderDetailCell = () => {
        return (
            <div
                className={s.detailCell}
                onDoubleClick={() => {
                    setStatus('edit');
                }}
            >
                <Comp.Detail value={cellData} columnConfig={columnConfig} />
            </div>
        );
    };

    const renderEditCell = () => {
        return (
            <div
                className={s.editCell}
                onBlur={() => {
                    setStatus('detail');
                }}
            >
                <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' && renderDetailCell()}
            {status === 'edit' && renderEditCell()}
        </div>
    );
};

export default Cell;