/* eslint-disable no-lonely-if */
/* eslint-disable no-else-return */
/* eslint-disable prefer-promise-reject-errors */
/* eslint-disable camelcase */
import React, { useState, useEffect } from 'react';
import { Form, Input, Select, Tooltip, Button, notification, Drawer, Space } from 'antd';
import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { LoadEventFields } from '@/services/tablemanager/tablemanager';
import {
    GetCM_Ledger_LoadLedgerTable,
    GetCMLedger_QueryLedgers,
    GetCMLedger_OperateLedger,
} from '@/services/standingBook/api';
import ChangeAdd from './changeAdd';

const { Option } = Select;
const { TextArea } = Input;
const BookConfig = props => {

    const {
        callBackSubmit,
        type,
        formObj,
        visible,
        tableData,
        pickItem1,
        onCancel,
        data,
        maxLength,
        keepTableData,
    } = props;
    const [standingTable, setStandingTable] = useState([]);
    const [isVisible, setIsVisible] = useState(false); // 弹窗
    const [pickItem, setPickItem] = useState(''); // 选择的字段
    const [Order, setOrder] = useState(''); // 当前编辑序号
    const [filed, setFiled] = useState({}); // 传给子组件列表数据
    const [checkedList, setCheckedList] = useState([]);
    const [allFileds, setAllFileds] = useState([]); // 当前表所有的字段
    const [form] = Form.useForm();
    const layout = {
        layout: 'horizontal',
        labelCol: {
            span: 5,
        },
        wrapperCol: {
            span: 19,
        },
    };
    const { Item } = Form;
    // 提交
    const onSubmit = () => {
        form.validateFields().then(validate => {
            if (validate) {
                let aa = form.getFieldsValue().Type;
                if (aa == '全部') {
                    notification.warning({
                        message: '提示',
                        duration: 3,
                        description: '分组名称不能为全部',
                    });
                } else {
                    let obj =
                        type === 'add'
                            ? { ...validate, Order: maxLength }
                            : { ...validate, Order, ID: formObj.ID };
                    GetCMLedger_OperateLedger(obj)
                        .then(res => {
                            if (res.code === 0) {
                                form.resetFields();
                                callBackSubmit();
                                notification.success({
                                    message: '提示',
                                    duration: 3,
                                    description: type === 'add' ? '新增成功' : '编辑成功',
                                });
                            } else {
                                notification.error({
                                    message: '提示',
                                    duration: 3,
                                    description: res.msg,
                                });
                            }
                        })
                        .catch(() => {
                            notification.error({
                                message: '提示',
                                duration: 3,
                                description: '网络异常请稍后再试',
                            });
                        });
                }
            }
        });
    };
    useEffect(() => {
        console.log(pickItem1);
        console.log(data[0]);
        if (visible) {
            // 获取台账表
            getTableData();
            if (type === 'edit') {
                GetCMLedger_QueryLedgers({ ledgerId: formObj.ID }).then(res => {
                    if (res.code === 0) {
                        form.setFieldsValue(res.data.root);
                        setOrder(res.data.root.Order);
                        changTable(res.data.root.TableName);
                    }
                });
            } else {
                if (!pickItem1 || pickItem1 == '全部') {
                    form.setFieldsValue({ Type: data[0] });
                } else {
                    form.setFieldsValue({ Type: pickItem1 });
                }
            }
        } else {
            setFiled({});
            form.resetFields();
            form.setFieldsValue({ AccountType: '台账' });
        }
    }, [visible]);

    // 获取台账表
    const getTableData = () => {
        GetCM_Ledger_LoadLedgerTable().then(res => {
            if (res.code === 0) {
                setStandingTable(res.data.root);
            }
        });
    };
    // 切换表后数据处理为对应格式
    const changTable = value => {
        LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
            if (res.data.root) {
                let fileMap = new Map();
                let initList = [];
                // 处理为子组件需要的格式
                res.data.root.forEach(item => {
                    initList.push(item.fieldName);
                    if (fileMap.has(item.group)) {
                        let list = [...fileMap.get(item.group)];
                        list.push(item.fieldName);
                        fileMap.set(item.group, list);
                    } else {
                        fileMap.set(item.group, [item.fieldName]);
                    }
                });
                // 给Map格式转为对象
                fileMap = Object.fromEntries(fileMap.entries());
                // 处理外部字段
                Object.keys(form.getFieldsValue()).forEach(key => {
                    saveOutFieldsLength(key, initList);
                });
                setAllFileds(initList);
                setFiled(fileMap);
            }
        });
    };
    // 保存外部字段个数
    const saveOutFieldsLength = (key, initList) => {
        switch (key) {
            case 'Fields':
                form.setFieldsValue({ outListFileds: dealExternal(key, initList) });
                break;
            case 'SearchFields':
                form.setFieldsValue({ outSearchFields: dealExternal(key, initList) });
                break;
            case 'AddFields':
                form.setFieldsValue({ outAddFields: dealExternal(key, initList) });
                break;
            case 'EditFields':
                form.setFieldsValue({ outEditFields: dealExternal(key, initList) });
                break;
            case 'WebFields':
                form.setFieldsValue({ outWebFields: dealExternal(key, initList) });
                break;
            case 'MobileFields':
                form.setFieldsValue({ outMobileFields: dealExternal(key, initList) });
                break;
            default:
                break;
        }
    };
    // 选择字段回调函数
    const onOK = prop => {
        setIsVisible(false);
        let obj = {};
        obj[prop.pickItem] = prop.str;
        form.setFieldsValue(obj);
        saveOutFieldsLength(prop.pickItem, allFileds);
    };
    // 处理外部字段
    const dealExternal = (fileds, list) => {
        let isExternal;
        let externalLength = 0;
        if (form.getFieldValue(fileds)) {
            form
                .getFieldValue(fileds)
                .split(',')
                .forEach(item => {
                    isExternal = list.some(val => val === item);
                    if (!isExternal && item !== '') {
                        // eslint-disable-next-line no-plusplus
                        externalLength++;
                    }
                });
        }

        return externalLength;
    };
    // 勾选字段
    const pickFiled = fileds => {
        if (!form.getFieldValue('TableName')) {
            notification.error({ message: '提示', duration: 3, description: '请选择台账表' });
            return;
        }
        // 添加外部字段
        let fil = { ...filed };
        fil['外部字段'] = [];
        let isExternal;
        let list = form.getFieldValue(fileds) ? form.getFieldValue(fileds).split(',') : [];
        list.forEach(item => {
            isExternal = allFileds.some(val => val === item);
            if (!isExternal && item !== '') {
                fil['外部字段'].push(item);
            }
        });
        if (fil['外部字段'].length === 0) {
            delete fil['外部字段'];
        }
        setFiled(fil);
        setCheckedList(list);
        setPickItem(fileds);
        setIsVisible(true);
    };
    // 搜索框监听
    const onSearch = value => {
        if (value) {
            form.setFieldsValue({ Type: value });
        }
    };

    return (
        <Drawer
            title={`${type === 'add' ? '台账配置' : '台账编辑'}`}
            width="500px"
            visible={visible}
            onClose={onCancel}
            destroyOnClose
            footer={
                <Space>
                    <Button onClick={onCancel}>取消</Button>
                    <Button onClick={onSubmit} type="primary">
                        确定
                    </Button>
                </Space>
            }
        >
            <Form form={form} {...layout}>
                <Item label="分组" name="Type" rules={[{ required: true, message: '请选择分组' }]}>
                    <Select
                        showSearch
                        filterOption={false}
                        onSearch={onSearch}
                        placeholder="请输入分组名称"
                        allowClear
                    >
                        {data.map((item, index) => (
                            <Option value={item} key={index}>
                                {item}
                            </Option>
                        ))}
                    </Select>
                </Item>
                <Item label="台账类型" name="AccountType">
                    <Select placeholder="请选择台账类型">
                        <Option value="台账">台账</Option>
                        <Option value="反馈">反馈</Option>
                        <Option value="设备">设备</Option>
                    </Select>
                </Item>
                <Item
                    label="台账名称"
                    name="Name"
                    rules={[
                        {
                            required: true,
                            validator: (rule, value) => {
                                if (
                                    keepTableData.find(i => i.name == form.getFieldsValue().Name) &&
                                    form.getFieldsValue().Name != formObj.name
                                ) {
                                    return Promise.reject('台账名称已存在');
                                } else if (form.getFieldsValue().Name == '') {
                                    return Promise.reject('台账名称不能为空');
                                }
                                return Promise.resolve();
                            },
                        },
                    ]}
                >
                    <Input placeholder="台账名称不可重复" allowClear />
                </Item>
                <Item label="台账表" name="TableName" rules={[{ required: true, message: '请选择台账表' }]}>
                    <Select placeholder="" optionFilterProp="children" onChange={changTable} showSearch>
                        {standingTable.map((item, index) => (
                            <Option key={index} value={item.value}>
                                {item.text}
                            </Option>
                        ))}
                    </Select>
                </Item>
                <Item
                    label={
                        <>
                            {form.getFieldValue('outListFileds') > 0 ? (
                                <Tooltip title={`外部字段${form.getFieldValue('outListFileds')}个`}>
                                    <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
                                </Tooltip>
                            ) : (
                                ''
                            )}
                            <span>台账字段</span>
                        </>
                    }
                    name="Fields"
                >
                    <div style={{ display: 'flex' }}>
                        <Form.Item name="Fields" style={{ marginBottom: 0, width: '100%' }}>
                            <TextArea placeholder="前端详情查看字段" allowClear />
                        </Form.Item>
                        <Button
                            type="dashed"
                            style={{ height: '54px', width: '50px', marginLeft: '10px' }}
                            icon={<PlusOutlined />}
                            onClick={() => {
                                pickFiled('Fields');
                            }}
                        />
                    </div>
                </Item>
                <Item
                    label={
                        <>
                            {form.getFieldValue('outSearchFields') > 0 ? (
                                <Tooltip title={`外部字段${form.getFieldValue('outSearchFields')}个`}>
                                    <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
                                </Tooltip>
                            ) : (
                                ''
                            )}
                            <span>检索字段</span>
                        </>
                    }
                    name="SearchFields"
                >
                    <div style={{ display: 'flex' }}>
                        <Form.Item name="SearchFields" style={{ marginBottom: 0, width: '100%' }}>
                            <TextArea placeholder="前端列表检索字段" allowClear />
                        </Form.Item>
                        <Button
                            type="dashed"
                            style={{ height: '54px', width: '50px', marginLeft: '10px' }}
                            icon={<PlusOutlined />}
                            onClick={() => {
                                pickFiled('SearchFields');
                            }}
                        />
                    </div>
                </Item>
                <Item
                    label={
                        <>
                            {form.getFieldValue('outAddFields') > 0 ? (
                                <Tooltip title={`外部字段${form.getFieldValue('outAddFields')}个`}>
                                    <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
                                </Tooltip>
                            ) : (
                                ''
                            )}
                            <span>添加字段</span>
                        </>
                    }
                    name="AddFields"
                >
                    <div style={{ display: 'flex' }}>
                        <Form.Item name="AddFields" style={{ marginBottom: 0, width: '100%' }}>
                            <TextArea placeholder="前端数据添加字段" allowClear />
                        </Form.Item>
                        <Button
                            type="dashed"
                            style={{ height: '54px', width: '50px', marginLeft: '10px' }}
                            icon={<PlusOutlined />}
                            onClick={() => {
                                pickFiled('AddFields');
                            }}
                        />
                    </div>
                </Item>
                <Item
                    label={
                        <>
                            {form.getFieldValue('outEditFields') > 0 ? (
                                <Tooltip title={`外部字段${form.getFieldValue('outEditFields')}个`}>
                                    <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
                                </Tooltip>
                            ) : (
                                ''
                            )}
                            <span>编辑字段</span>
                        </>
                    }
                    name="EditFields"
                >
                    <div style={{ display: 'flex' }}>
                        <Form.Item name="EditFields" style={{ marginBottom: 0, width: '100%' }}>
                            <TextArea placeholder="前端可编辑字段" allowClear />
                        </Form.Item>
                        <Button
                            type="dashed"
                            style={{ height: '54px', width: '50px', marginLeft: '10px' }}
                            icon={<PlusOutlined />}
                            onClick={() => {
                                pickFiled('EditFields');
                            }}
                        />
                    </div>
                </Item>
                <Item
                    label={
                        <>
                            {form.getFieldValue('outWebFields') > 0 ? (
                                <Tooltip title={`外部字段${form.getFieldValue('outWebFields')}个`}>
                                    <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
                                </Tooltip>
                            ) : (
                                ''
                            )}
                            <span>前端字段</span>
                        </>
                    }
                    name="WebFields"
                >
                    <div style={{ display: 'flex' }}>
                        <Form.Item name="WebFields" style={{ marginBottom: 0, width: '100%' }}>
                            <TextArea placeholder="前端列表展示字段" allowClear />
                        </Form.Item>
                        <Button
                            type="dashed"
                            style={{ height: '54px', width: '50px', marginLeft: '10px' }}
                            icon={<PlusOutlined />}
                            onClick={() => {
                                pickFiled('WebFields');
                            }}
                        />
                    </div>
                </Item>
                <Item
                    label={
                        <>
                            {form.getFieldValue('outMobileFields') > 0 ? (
                                <Tooltip title={`外部字段${form.getFieldValue('outMobileFields')}个`}>
                                    <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
                                </Tooltip>
                            ) : (
                                ''
                            )}
                            <span>手持字段</span>
                        </>
                    }
                    name="MobileFields"
                >
                    <div style={{ display: 'flex' }}>
                        <Form.Item name="MobileFields" style={{ marginBottom: 0, width: '100%' }}>
                            <TextArea placeholder="手持展示字段" allowClear />
                        </Form.Item>
                        <Button
                            type="dashed"
                            style={{ height: '54px', width: '50px', marginLeft: '10px' }}
                            icon={<PlusOutlined />}
                            onClick={() => {
                                pickFiled('MobileFields');
                            }}
                        />
                    </div>
                </Item>
                <Item label="接口配置" name="Interface">
                    <Input placeholder="服务项目dll库" allowClear />
                </Item>
            </Form>
            <ChangeAdd
                visible={isVisible}
                onCancel={() => {
                    setIsVisible(false);
                    setCheckedList([]);
                }}
                callBackSubmit={onOK}
                newCheckedList={checkedList}
                filed={filed}
                pickItem={pickItem}
                formObj={formObj}
            />
        </Drawer>
    );
};
export default BookConfig;