

import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
import { Drawer, Form, Button, Input, Divider, Table, Popconfirm, Select,Alert } from 'antd';

import {commitTemplateData,editTemplateData} from '@/api/generalSetting.js'
import './style.less';

const { TextArea } = Input;

const { Option } = Select;

const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
    <EditableContext.Provider value={form}>
        <tr {...props} />
    </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {

    constructor(props) {
        super(props);
        const { editing } = props;
        this.state = {
            editing: editing == 'true',
        };
    }

    static getDerivedStateFromProps(props, state) {
        // console.log({ props, state });
        const { editing } = props;
        return {
            ...state,
            editing: editing == 'true',
        }
    }
    /**
     * 
     * @param {Object} form Form实例
     * @returns tableCell ReactNode
     */
    renderCell = form => {
        this.form = form;
        const { children, dataIndex, record, title } = this.props;
        const { editing } = this.state;

        return editing ? (
            <Form.Item style={{ margin: 0 }}>
                {form.getFieldDecorator(dataIndex, {
                    rules: [
                        {
                            required: true,
                            message: `${title} 是必填.`,
                        },
                    ],
                    initialValue: record[dataIndex],
                })(
                    // <Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />
                    (dataIndex != 'required'&&dataIndex != 'showFiled') ? <Input ref={node => (this.input = node)} /> :
                        (
                            <Select
                                ref={node => (this.selecter = node)}
                                style={{ width: '100%' }}
                            >
                                <Option value={0}>否</Option>
                                <Option value={1}>是</Option>
                            </Select>
                        )
                )}
            </Form.Item>
        ) : (
            <div
                className="editable-cell-value-wrap"
                style={{ paddingRight: 24 }}
            >
                {children}
            </div>
        );
    };

    render() {
        const {
            editable,
            dataIndex,
            title,
            record,
            index,
            children,
            ...restProps
        } = this.props;
        return (
            <td {...restProps}>
                {editable ? (
                    <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
                ) : (
                    children
                )}
            </td>
        );
    }
}


const NormalForm = React.forwardRef((props, ref) => {

    const { form,initialFormValue } = props;
    const formRefs = React.createRef();
    const {getFieldDecorator} = form;
    const onSubmitFormhandle = () => {
        return new Promise((resolve)=>{
            form.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                    resolve(values);
                }
            });
        });
    }

    useImperativeHandle(ref,()=>{
          return {
              ...formRefs.current,
              form:form
          }
    });

    useEffect(()=>{
        form.setFieldsValue({name:initialFormValue.name,remark:initialFormValue.remark})
    },[]);

    return (
        <Form
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 16 }}
            ref={formRefs}
            onSubmit={onSubmitFormhandle}
        >
            <Form.Item
                label="模板名称"
                rules={[{ required: true, message: '请输入模板名称!' }]}
            >
                {getFieldDecorator('name', {
                    rules: [{ required: true, message: '请输入模板名称!' }],
                })(
                    <Input
                        placeholder="请输入模板名称,限制长度20字符"
                        maxLength={20}
                    />,
                )}
            </Form.Item>
            <Form.Item
                label="备注说明"
                rules={[{ required: false }]}
            >
                {getFieldDecorator('remark', {
                    rules: [{ required: false}],
                })(
                    <TextArea rows={4} />
                )}
            </Form.Item>
            <Divider dashed />
        </Form>
    )
})


const WrappedForm = Form.create()(NormalForm);

/**
 * 
 * @param {Object} props 
 * @returns 
 */
const DrawerForm = (props) => {

    const defaultData = [
        {
            key: 1,
            title: '姓名',
            filedType: 'Text',
            required: 1,
            showFiled:1,
        },
        {
            key: 2,
            title: '性别',
            filedType: 'Text',
            required: 1,
            showFiled:1,
        },
        {
            key: 3,
            title: '年龄',
            filedType: 'Text',
            required: 1,
            showFiled:1,
        }
    ]
    const [dataSource, setDataSource] = useState(defaultData);
    const { visible: asVisible, onVisibleChange, title,initData } = props;
    const [visible, setVisible] = useState(false);
    const [ifEdit, setIfEdit] = useState(false);
    const [columns, setColumns] = useState([]);
    const [currentEditKey, setCurrentEditKey] = useState(-1);
    const formRef = useRef(null);
    const [drawerInitData,setDrawerInitData] = useState(null);
    const [showAlert,setShowAlert] = useState(false);

    const tableColumns = [
        {
            title: '标题',
            dataIndex: 'title',
            width: '20%',
            editable: true,
        },
        {
            title: '类型',
            dataIndex: 'filedType',
            editable: false,
            width: '10%',
        },
        {
            title: '是否必填',
            dataIndex: 'required',
            editable: true,
            width: '20%',
            render: bool => (bool ? '是' : '否')
        },
        {
            title: '是否展示信息',
            dataIndex: 'showFiled',
            editable: true,
            width: '20%',
            render: bool => (bool ? '是' : '否')
        },
        {
            title: '操作',
            width:'20%',
            dataIndex: 'operation',
            render: (text, record) => {
                // console.log(record.key,currentEditKey);
                if (true) {
                    if (record.key === currentEditKey) {
                        return (
                            <>
                                <EditableContext.Consumer>
                                    {
                                        form => (
                                            <a
                                                onClick={() => handleSave(form, record.key)}
                                            >保存</a>
                                        )
                                    }
                                </EditableContext.Consumer>
                                <Divider type="vertical" />
                                <a onClick={() => cancelUpdateTableHandle(record.key)}>取消</a>
                            </>
                        )
                    } else {
                        return (
                            <>
                                <a onClick={() => editRowHandle(record.key)}>编辑</a>
                                <Divider type="vertical" />
                                <Popconfirm title="确定删除?" onConfirm={() => delTableRowHandle(record.key)}>
                                    <a>删除</a>
                                </Popconfirm>
                            </>
                        )
                    }
                } else {
                    return null
                }

            }
        },
    ];

    const showDrawer = () => {
        setVisible(true);
        onVisibleChange(true);
    };

    const onClose = () => {
        setVisible(false);
        onVisibleChange(false);
        setDrawerInitData(null);
        localStorage.removeItem('localDataSource');
        setDataSource([...defaultData]);
    };

    /**
     * 
     * @param {Number} key 当前选中的key
     */
    const editRowHandle = (key) => {
        setIfEdit(true);
        setCurrentEditKey(key);
    }

    const delTableRowHandle = (key) => {
        let _data = localStorage.getItem('localDataSource');
        _data = JSON.parse(_data);
        const filtedData = _data.filter(t => {
            return t.key !== key
        });
        setDataSource([...filtedData]);
    }

    const cancelUpdateTableHandle = (key) => {
        setIfEdit(false);
        setCurrentEditKey(-1);
    }

    /**
     * 
     * @param {Object} form form实例对象参考antd Form
     * @param {Number} key 当前选中的key
     */
    const handleSave = (form, key) => {
        form.validateFields((error, row) => {
            if (error) {
                return;
            }
            const newData = [...dataSource];
            const index = newData.findIndex(item => key === item.key);
            if (index > -1) {
                const item = newData[index];
                newData.splice(index, 1, {
                    ...item,
                    ...row,
                });
                setDataSource(newData);
                setIfEdit(false);
                setCurrentEditKey(-1);
            } else {
                newData.push(row);
                setDataSource(newData);
                setIfEdit(false);
                setCurrentEditKey(-1)
            }
        });
    }

    const renderColumn = () => {

        const columns = tableColumns.map(col => {
            if (!col.editable) {
                return col;
            }
            return {
                ...col,
                onCell: record => ({
                    record,
                    editable: col.editable,
                    dataIndex: col.dataIndex,
                    title: col.title,
                    editing: `${record.key === currentEditKey}`,
                }),
            };
        });

        setColumns(columns);
    }

    const addHandle = () => {
        const newData = {
            key: dataSource.length + 1,
            title: '字段名',
            filedType: 'Text',
            required: 0,
            showFiled:0,
        };
        setDataSource([...dataSource, newData]);
    }
    
    /**
     * 
     * @param {Object} formData ==> {name,remark}
     */
    const postDrawerData = async (formData)=>{
        if(drawerInitData){
            //编辑
            const resp =  await editTemplateData({
                id:drawerInitData.id,
                ...formData,
                contentDTOs:dataSource.map(t=>({title:t.title,required:t.required,filedType:t.filedType,showFiled:t.showFiled}))
            });
            if(resp.data.status == 200){
                onClose();
            }
        }else{
            //新增
            const resp = await commitTemplateData({
                ...formData,
                contentDTOs:dataSource.map(t=>({title:t.title,required:t.required,filedType:t.filedType,showFiled:t.showFiled}))
            });
            if(resp.data.status == 200){
                onClose();
            }
        }
    }
    

    const onCommitDrawerData = async () => {

        const { props: { onSubmit } } = formRef.current;
        onSubmit().then((formData)=>{
            // console.log({formData});
            if(dataSource.length > 0){
                postDrawerData(formData);
            }else{
                setShowAlert(true);
            }
        })
    }

    useEffect(() => {
        asVisible && showDrawer();
        if(initData){
            //设置编辑时的回显
            const {dataSource:list} = initData;
            const _list = list.map((t,index)=>({...t,key:index+1}));
            setDataSource(_list);
            setDrawerInitData(initData);
        }
    }, [props]);

    useEffect(() => {
        //delTableRowHandle获取不到datasource,暂存localStorage
        localStorage.setItem('localDataSource', JSON.stringify(dataSource));
    }, [dataSource]);

    useEffect(() => {
        renderColumn();
    }, [ifEdit, currentEditKey]);

    useEffect(() => {
        return () => {
            //卸载时清空
            localStorage.removeItem('localDataSource');
            setDataSource([...defaultData]);
        }
    }, []);




    return (
        <Drawer title={title} width={800} placement="right" onClose={onClose} visible={visible} destroyOnClose={true} >
            <div className='formContainer'>
                <WrappedForm wrappedComponentRef={formRef} initialFormValue={{...drawerInitData}} />
                <div className='multiFormWrap' >
                    <div className='blockTitle'>模板内容</div>
                    { showAlert && <Alert message="请添加模板内容！" type="error" closable onClose={()=>setShowAlert(false)} />}
                    <Table
                        components={{
                            body: {
                                row: EditableFormRow,
                                cell: EditableCell,
                            },
                        }}
                        rowClassName={() => 'editable-row'}
                        dataSource={dataSource}
                        columns={columns}
                        pagination={false}
                        rowKey='key'
                        footer={() => <div className='footerTail' onClick={addHandle}>添加</div>}
                    />
                </div>
            </div>
            <div className='drawerFooter'>
                <Button className='sureBtn' type='primary' onClick={onCommitDrawerData} >确定</Button>
                <Button onClick={onClose}>取消</Button>
            </div>
        </Drawer>
    )
}

export default DrawerForm;