import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, Checkbox, notification, Card } from 'antd';

import {
    loadTableFields, addTables, addFields
} from '@/services/platform/bs'
import styles from './index.less'
const CheckboxGroup = Checkbox.Group;
import qs from 'qs';
const { Option } = Select;
const AddModal = props => {
    const { callBackSubmit = () => { }, type, visible, tableList, formObj } = props;
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();
    const { Item } = Form;
    const [plainOptions, setPlainOptions] = useState([]);//复选框所有内容
    const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
    const [indeterminate, setIndeterminate] = useState(true);
    const [checkAll, setCheckAll] = useState(false);


    const onChange = list => {
        setCheckedList(list);
        setIndeterminate(!!list.length && list.length < plainOptions.length);
        setCheckAll(list.length === plainOptions.length);
    };

    const onCheckAllChange = e => {
        setCheckedList(e.target.checked ? plainOptions : []);
        setIndeterminate(false);
        setCheckAll(e.target.checked);
    };
    // 提交
    const onSubmit = () => {
        let fieldNames = [];
        (checkedList || []).map(item => {
            fieldNames.push({ fieldNames: item })
        })
        form.validateFields().then(validate => {
            if (validate) {
                let obj = form.getFieldsValue();
                setLoading(true);
                let data = {}, url = JSON.stringify(formObj) == '{}' ? addTables : addFields
                if (JSON.stringify(formObj) == '{}') {
                    data = { tableName: obj.tableName, alias: obj.tableAlias || '', fieldNames: checkedList.join(',') }
                }
                else {
                    data = { tableName: formObj.tableName, fieldNames: checkedList.join(',') }
                }
                url(data).then(res => {
                    setLoading(false);
                    if (res.msg === "Ok" || res.msg === "") {
                        form.resetFields();
                        callBackSubmit();
                        notification.success({
                            message: '提示',
                            duration: 3,
                            description: JSON.stringify(formObj) == '{}' ? '新增成功' : '表字段新增成功',
                        });

                    } else {
                        notification.error({
                            message: '提示',
                            duration: 3,
                            description: res.msg,
                        });
                    }
                })
                    .catch(err => {
                        notification.error({
                            message: '提示',
                            duration: 3,
                            description: '新增失败',
                        });
                        setLoading(false);
                    });

            }
        });
    };



    useEffect(() => {
        if (type != '' && JSON.stringify(formObj) == '{}') {
            renderField(tableList[0].text)
            form.setFieldsValue({
                tableName: tableList[0].text
            })
        } else if (type != '' && JSON.stringify(formObj) != '{}') {
            renderField(formObj.tableName)
        }

    }, [visible]);

    const renderField = (name) => {
        loadTableFields({ tableName: name }).then(response => {
            if (response.data.root.length) {
                let arr = [], newArr = []
                response.data.root.map(item => {
                    newArr.push(item.fieldName)
                    if (item.isCheck) {
                        arr.push(item.fieldName)
                    }
                })
                setCheckAll(false)
                setPlainOptions(newArr)
                setCheckedList(arr)
            }
        })
    }
    const layout = {
        layout: 'horizontal',
        labelCol: {
            span: 4,
        },
        wrapperCol: {
            span: 18,
        },
    };

    const handleChange = (value) => {
        renderField(value)
    }

    return (
        <Modal
            title={JSON.stringify(formObj) == '{}' ? '附加表' : '附加字段'}
            bodyStyle={{ width: '100%', minHeight: '200px' }}
            style={{ top: '150px' }}
            width="700px"
            destroyOnClose
            maskClosable={false}
            cancelText="取消"
            okText="确认"
            {...props}
            onOk={() => onSubmit()}
            confirmLoading={loading}
            forceRender={true}
            getContainer={false}
        >
            {visible && (
                <Form form={form} {...layout} >
                    {JSON.stringify(formObj) == '{}' ? <><Item
                        label="表名"
                        name="tableName"
                        rules={[{ required: true, message: '请选择表名' }]}
                    >
                        <Select onChange={handleChange}>
                            {tableList.length ? tableList.map((item, index) => { return <Select.Option key={index} value={item.text}>{item.text}</Select.Option>; }) : ''}
                        </Select>
                    </Item>
                        <Item
                            label="别名"
                            name="tableAlias"
                        >
                            <Input allowClear />
                        </Item></> : <div className={styles.paneTitle}>{formObj.tableName}</div>}
                    <div className={styles.field}>
                        <Card title="字段名" extra={<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}> </Checkbox>} >
                            {
                                plainOptions.length ? <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> : ''
                            }

                        </Card>
                    </div>

                </Form>
            )}
        </Modal>
    );
};
export default AddModal;