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

import { loadTableFields, addTables, addFields } from '@/services/tablemanager/tablemanager';
import styles from './index.less';
const CheckboxGroup = Checkbox.Group;
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 [plainOptionsInside, setPlainOptionsInside] = useState([]); // 复选框所有内容
  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);
  const [indeterminate1, setIndeterminate1] = useState(false); // 内置分组
  const [checkAll1, setCheckAll1] = useState(false); // 内置分组

  const onChange = list => {
    setCheckedList(list);
    let data = [];
    if (plainOptionsInside.length > 0) {
      plainOptionsInside.map(i => {
        if (i.isCheck) {
          data.push(i);
        }
      });
    }

    let aa = data.length + list.length;
    let bb = plainOptionsInside.length + plainOptions.length;
    setIndeterminate(!!aa && aa < bb);
    setCheckAll(aa == bb);
  };

  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
    let data = [...plainOptionsInside];
    data.map(i => {
      i.isCheck = e.target.checked;
    });
    setPlainOptionsInside(data);
    setIndeterminate1(false);
    setCheckAll1(e.target.checked);
  };

  const onCheckAllChange1 = e => {
    let data = [...plainOptionsInside];
    data.map(i => {
      i.isCheck = e.target.checked;
    });
    let list = [];
    data.map(j => {
      if (j.isCheck) {
        list.push(j);
      }
    });
    setPlainOptionsInside(data);
    setIndeterminate1(false);
    setCheckAll1(e.target.checked);
    let aa = list.length + checkedList.length;
    let bb = plainOptionsInside.length + plainOptions.length;
    setCheckAll(aa == bb);
    setIndeterminate(!!aa && aa < bb);
  };
  // 提交
  const onSubmit = () => {
    let fieldNames = [];
    (checkedList || []).map(item => {
      fieldNames.push({ fieldNames: item });
    });
    let list = [];
    if (plainOptionsInside.length > 0) {
      plainOptionsInside.map(i => {
        if (i.isCheck) {
          list.push(i.fieldName);
        }
      });
    }
    let datalist = checkedList.concat(list);
    form.validateFields().then(validate => {
      if (validate) {
        let obj = form.getFieldsValue();
        setLoading(true);
        let data = {};
        let url = JSON.stringify(formObj) == '{}' ? addTables : addFields;
        if (JSON.stringify(formObj) == '{}') {
          data = {
            tableName: obj.tableName,
            alias: obj.tableAlias || '',
            fieldNames: datalist.join(','),
          };
        } else {
          data = { tableName: formObj.tableName, fieldNames: datalist.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) {
        // eslint-disable-next-line one-var
        let arr = [];
        let newArr = [];
        let insideArr = [];
        response.data.root.map(item => {
          if (item.isDefaultField == true) {
            insideArr.push({ fieldName: item.fieldName, isCheck: item.isCheck });
          } else {
            newArr.push(item.fieldName);
            if (item.isCheck) {
              arr.push(item.fieldName);
            }
          }
        });
        let list = [];
        if (insideArr.length > 0) {
          insideArr.map(i => {
            if (i.isCheck) {
              list.push(i);
            }
          });
          setCheckAll1(list.length === insideArr.length);
          setIndeterminate1(!!list.length && list.length < insideArr.length);
        }

        let aa = arr.length + list.length;
        let bb = newArr.length + insideArr.length;
        setCheckAll(aa == bb);
        setIndeterminate(!!aa && aa < bb);
        setPlainOptions(newArr);
        setPlainOptionsInside(insideArr);
        setCheckedList(arr);
      } else {
        setCheckAll(false);
        setIndeterminate(false);
      }
    });
  };
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 3,
    },
    wrapperCol: {
      span: 20,
    },
  };

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

  const onchenge = (e, item) => {
    let data = [...plainOptionsInside];
    data.map(i => {
      if (i.fieldName == item) {
        i.isCheck = e.target.checked;
      }
    });
    setPlainOptionsInside(data);
    let list = [];
    data.map(j => {
      if (j.isCheck) {
        list.push(j);
      }
    });
    setIndeterminate1(!!list.length && list.length < plainOptionsInside.length);
    setCheckAll1(list.length === plainOptionsInside.length);
    let aa = list.length + checkedList.length;
    let bb = plainOptionsInside.length + plainOptions.length;
    setIndeterminate(!!aa && aa < bb);
    setCheckAll(aa == bb);
  };

  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
      getContainer={false}
    >
      {visible && (
        <Form form={form} {...layout} style={{ marginBottom: '30px' }}>
          {JSON.stringify(formObj) == '{}' ? (
            <>
              <Item
                label="表名"
                name="tableName"
                rules={[{ required: true, message: '请选择表名' }]}
              >
                <Select onChange={handleChange} showSearch>
                  {tableList.length
                    ? tableList.map((item, index) => (
                        <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 > 0 && (
                <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
              )}
              {plainOptionsInside.length > 0 ? (
                <>
                  <div
                    style={{
                      position: 'relative',
                      top: '12px',
                      marginLeft: '16px',
                      backgroundColor: 'white',
                      width: '100px',
                      paddingLeft: '5px',
                    }}
                  >
                    <Checkbox
                      style={{ color: 'red' }}
                      indeterminate={indeterminate1}
                      onChange={onCheckAllChange1}
                      checked={checkAll1}
                    >
                      <strong>内置字段</strong>
                    </Checkbox>
                  </div>
                  <div
                    style={{
                      display: 'flex',
                      flexWrap: 'wrap',
                      border: '1px solid #d7d3d3',
                      borderRadius: '2px',
                      paddingTop: '20px',
                    }}
                  >
                    {plainOptionsInside.map(i => (
                      <div
                        style={{
                          width: '110px',
                          overflow: 'hidden',
                          paddingBottom: '10px',
                          marginLeft: '20px',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                        }}
                      >
                        <Checkbox
                          style={{ color: 'red' }}
                          checked={i.isCheck}
                          onChange={e => {
                            onchenge(e, i.fieldName);
                          }}
                        >
                          {i.fieldName}
                        </Checkbox>
                      </div>
                    ))}
                  </div>
                </>
              ) : (
                <></>
              )}
            </Card>
          </div>
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;