/* eslint-disable no-else-return */
/* eslint-disable react/jsx-boolean-value */
/* eslint-disable no-lonely-if */
/* eslint-disable guard-for-in */
/* eslint-disable no-restricted-syntax */
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-07-13 16:13:03
 * @LastEditTime: 2022-08-16 09:59:34
 * @LastEditors: leizhe
 */
import React, { useState, useEffect } from 'react';
import { Form, Modal, Divider, Checkbox, Button, Input, notification, Row, Col, Spin } from 'antd';
import {
  GetProductList,
  GetProductListByLicense,
  InitAddDataBase,
  InitEditDataBase,
  GetLicenseStatus,
} from '@/services/database/api';
import styles from './InitDataBase.less';

const CheckboxGroup = Checkbox.Group;

const InitModal = props => {
  const [form] = Form.useForm();
  const { callBackSubmit = () => {}, keepDb, visible, onCancel, keepProduct, keep } = props;
  const [data, setData] = useState([]);
  const [title, setTitle] = useState([]);
  const [listVisible, setListVisible] = useState(false);
  const [keepCode, setKeepCode] = useState([]);
  const [keepData, setKeepData] = useState([]);
  const [flag, setFlag] = useState(0);
  const [mag, setMag] = useState('');
  const [code, setCode] = useState('');
  const [checkboxFlag, setCheckboxFlag] = useState(0);
  const [keepValue, setKeepValue] = useState([]);
  const [value, setValue] = useState([]);
  const [product, setProduct] = useState([]);

  useEffect(() => {
    getProductList();
    console.log(keep);
    console.log(keepProduct);
    setFlag(0);
    setCheckboxFlag(0);
    setMag('');
    if (visible) {
      if (keep) {
        setCheckboxFlag(1);
      } else {
        setCheckboxFlag(0);
      }
      setValue(keepProduct);
      setKeepCode(keepProduct);
    } else {
      setCode('');
      setKeepCode([]);
      setValue([]);
      setKeepValue([]);
    }
  }, [visible]);

  useEffect(() => {
    form.resetFields();
  }, [listVisible]);

  const getProductList = () => {
    // GetProductList().then(res => {
    //   if (res.code === 0) {
    //     setKeepData(res.data);
    //     if (keepProduct.length > 0) {
    //       let dd = [];
    //       keepProduct.map(i => {
    //         res.data.map(j => {
    //           if (j.name === i) {
    //             dd.push(j);
    //           }
    //         });
    //       });
    //       let arr = formateArrDataA(dd, 'productName');
    //       let aa = Object.keys(arr);
    //       aa.map(i => {
    //         let list = [];
    //         arr[i].map(j => {
    //           list.push(j.name);
    //         });
    //         arr[i] = list;
    //       });
    //       console.log(arr);
    //       setProduct(arr);
    //       setKeepValue(arr);
    //     }
    //     let arr = formateArrDataA(res.data, 'productName');
    //     let aa = Object.keys(arr);
    //     aa.map(i => {
    //       let list = [];
    //       arr[i].map(j => {
    //         list.push(j.name);
    //       });
    //       arr[i] = list;
    //     });
    //     console.log(aa);
    //     console.log(arr);
    //     console.log(keepProduct);
    //     setTitle(aa);
    //     setData(arr);
    //   }
    // });
  };

  const formateArrDataA = (initialArr, name) => {
    // 判定传参是否符合规则
    if (!(initialArr instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    for (let i in initialArr) {
      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
        nameArr.push(initialArr[i][`${name}`]);
      }
    }
    // 新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in initialArr) {
        if (initialArr[j][`${name}`] == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(initialArr[j]);
        }
      }
    }
    for (let keys in tempObj) {
      let arr = [];
      tempObj[keys].map((item, index) => {
        tempObj[keys] = arr;
        item.key = index;
        arr.push(item);
      });
    }
    return tempObj;
  };

  const codeSubmit = () => {
    let obj = form.getFieldsValue();
    console.log(obj);
    let str = `${obj.License1}${obj.License2}${obj.License3}${obj.License4}${obj.License5}`;
    GetProductListByLicense({ License: str }).then(res => {
      if (res.code === 0) {
        if (res.data.length > 0) {
          let aa = [];
          res.data.map(i => {
            aa.push(i.name);
          });
          console.log(aa);
          let bb = keepProduct;
          let cc = aa.concat(bb);
          let dd = Array.from(new Set(cc));
          console.log(dd);
          GetLicenseStatus({ license: str }).then(res => {
            if (res.code === 0) {
              if (res.data == 1) {
                notification.error({
                  message: '提示',
                  duration: 5,
                  description: '激活码已被使用',
                });
              } else {
                setCheckboxFlag(checkboxFlag + 1);
                setKeepCode(dd);
                setCode(str);
                setListVisible(false);
                setFlag(flag + 1);
                setMag('');
              }
            } else {
              notification.error({
                message: '提示',
                duration: 5,
                description: res.msg,
              });
            }
          });
        } else {
          notification.error({
            message: '提示',
            duration: 5,
            description: '激活码未购买任何产品',
          });
          setMag('激活码未购买任何产品');
        }
      } else {
        notification.error({
          message: '提示',
          duration: 5,
          description: res.msg,
        });
        setMag(res.msg);
      }
    });
  };

  const onSubmit = () => {
    // console.log(mag);
    // if (mag != '' && keepProduct == keepCode && checkboxFlag != 0) {
    //   notification.error({
    //     message: '提示',
    //     duration: 5,
    //     description: '请先输入激活码激活产品',
    //   });
    // } else {
    //   if (flag !== 0 || checkboxFlag == 0) {
    //     setLoadings(true);
    //     let arr = [];
    //     if (checkboxFlag == 0) {
    //       keepData.map(i => {
    //         if (value.indexOf(i.name) != -1) {
    //           arr.push(i);
    //         }
    //       });
    //     } else {
    //       keepData.map(i => {
    //         if (keepCode.indexOf(i.name) != -1) {
    //           arr.push(i);
    //         }
    //       });
    //     }
    //     console.log(arr);
    //     callBackSubmit(arr, code);
    //     onCancel();
    //   } else {
    //     notification.warning({
    //       message: '提示',
    //       duration: 5,
    //       description: '请先输入激活码激活产品',
    //     });
    //   }
    // }
    let arr = [];
    if (checkboxFlag == 0) {
      keepData.map(i => {
        if (value.indexOf(i.name) != -1) {
          arr.push(i);
        }
      });
    } else {
      keepData.map(i => {
        if (keepCode.indexOf(i.name) != -1) {
          arr.push(i);
        }
      });
    }
    console.log(arr);
    callBackSubmit(arr, code);
    onCancel();
  };

  const onChange = (e, item) => {
    if (product[item]) {
      // 过滤已初始化的产品但不存在于产品列表中的数据，避免组件出错
      product[item].map(i => {
        if (data[item].indexOf(i) == -1) {
          product[item].splice(product[item].findIndex(j => j === i), 1);
        }
      });

      let arr = product[item].find(i => e.indexOf(i) == -1);
      let bb = keepProduct.indexOf(arr);
      // 已经被初始化的产品不允许取消勾选
      if (arr && bb != -1) {
        console.log(arr);
      } else {
        let aa = keepValue;
        aa[item] = e;
        let a = Object.keys(aa);
        let list = [];
        a.map(i => {
          aa[i].map(j => {
            list.push(j);
          });
        });
        setKeepValue(aa);
        console.log(list);
        setValue(list);
      }
    } else {
      let aa = keepValue;
      aa[item] = e;
      let a = Object.keys(aa);
      let list = [];
      a.map(i => {
        aa[i].map(j => {
          list.push(j);
        });
      });
      setKeepValue(aa);
      setValue(list);
    }
  };

  return (
    <Modal
      title="初始化"
      bodyStyle={{ width: '100%', minHeight: '100px', maxHeight: '600px', overflow: 'scroll' }}
      width="980px"
      destroyOnClose
      centered
      {...props}
      forceRender
      getContainer={false}
      footer={[
        // <Button onClick={() => setListVisible(true)}>产品激活</Button>,
        <Button type="primary" onClick={() => onSubmit()}>
          确认
        </Button>,
      ]}
    >
      <div>
        {visible && (
          <div className={styles.initItemData1}>
            {title &&
              title.map((item, index) => (
                <div key={index}>
                  <Divider
                    orientation="center"
                    style={{
                      margin: '0 0 20px 0',
                      color: '#15428b',
                      borderTopColor: '#99bbe8',
                    }}
                  >
                    {item}
                  </Divider>
                  {checkboxFlag == 0 ? (
                    <CheckboxGroup
                      options={data[item]}
                      value={value}
                      onChange={e => onChange(e, item)}
                    />
                  ) : (
                    <>
                      {data[item] &&
                        data[item].map((i, j) => {
                          if (keepProduct.indexOf(i) != -1) {
                            return <Checkbox checked={true}>{i}</Checkbox>;
                          } else {
                            return (
                              <Checkbox checked={false} disabled>
                                {i}
                              </Checkbox>
                            );
                          }
                        })}
                    </>
                  )}
                </div>
              ))}
          </div>
        )}
      </div>
      <Modal
        title="产品激活"
        visible={listVisible}
        onCancel={() => setListVisible(false)}
        onOk={() => codeSubmit()}
        width="700px"
      >
        <Form form={form}>
          <Row span={24}>
            <Col span={6}>
              <Form.Item
                label="产品激活码"
                name="License1"
                // rules={[{ required: true, message: '请输入产品激活码' }]}
              >
                <Input
                  maxLength={5}
                  onPaste={e => {
                    let aa = e.clipboardData
                      .getData('Text')
                      .split('-')
                      .join('');
                    let a1 = aa.substring(0, 5);
                    let a2 = aa.substring(5, 10);
                    let a3 = aa.substring(10, 15);
                    let a4 = aa.substring(15, 20);
                    let a5 = aa.substring(20, 25);
                    form.resetFields();
                    form.setFieldsValue({
                      License1: a1,
                      License2: a2,
                      License3: a3,
                      License4: a4,
                      License5: a5,
                    });
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item>
                <span style={{ marginLeft: '10px' }}>-</span>
              </Form.Item>
            </Col>
            <Col span={3}>
              <Form.Item name="License2">
                <Input
                  maxLength={5}
                  onPaste={e => {
                    let aa = e.clipboardData
                      .getData('Text')
                      .split('-')
                      .join('');
                    let a1 = aa.substring(0, 5);
                    let a2 = aa.substring(5, 10);
                    let a3 = aa.substring(10, 15);
                    let a4 = aa.substring(15, 20);
                    let a5 = aa.substring(20, 25);
                    form.resetFields();
                    form.setFieldsValue({
                      License1: a1,
                      License2: a2,
                      License3: a3,
                      License4: a4,
                      License5: a5,
                    });
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item>
                <span style={{ marginLeft: '10px' }}>-</span>
              </Form.Item>
            </Col>
            <Col span={3}>
              <Form.Item name="License3">
                <Input
                  maxLength={5}
                  onPaste={e => {
                    let aa = e.clipboardData
                      .getData('Text')
                      .split('-')
                      .join('');
                    let a1 = aa.substring(0, 5);
                    let a2 = aa.substring(5, 10);
                    let a3 = aa.substring(10, 15);
                    let a4 = aa.substring(15, 20);
                    let a5 = aa.substring(20, 25);
                    form.resetFields();
                    form.setFieldsValue({
                      License1: a1,
                      License2: a2,
                      License3: a3,
                      License4: a4,
                      License5: a5,
                    });
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item>
                <span style={{ marginLeft: '10px' }}>-</span>
              </Form.Item>
            </Col>
            <Col span={3}>
              <Form.Item name="License4">
                <Input
                  maxLength={5}
                  onPaste={e => {
                    let aa = e.clipboardData
                      .getData('Text')
                      .split('-')
                      .join('');
                    let a1 = aa.substring(0, 5);
                    let a2 = aa.substring(5, 10);
                    let a3 = aa.substring(10, 15);
                    let a4 = aa.substring(15, 20);
                    let a5 = aa.substring(20, 25);
                    form.resetFields();
                    form.setFieldsValue({
                      License1: a1,
                      License2: a2,
                      License3: a3,
                      License4: a4,
                      License5: a5,
                    });
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item>
                <span style={{ marginLeft: '10px' }}>-</span>
              </Form.Item>
            </Col>
            <Col span={3}>
              <Form.Item name="License5">
                <Input
                  maxLength={5}
                  onPaste={e => {
                    let aa = e.clipboardData
                      .getData('Text')
                      .split('-')
                      .join('');
                    let a1 = aa.substring(0, 5);
                    let a2 = aa.substring(5, 10);
                    let a3 = aa.substring(10, 15);
                    let a4 = aa.substring(15, 20);
                    let a5 = aa.substring(20, 25);
                    form.resetFields();
                    form.setFieldsValue({
                      License1: a1,
                      License2: a2,
                      License3: a3,
                      License4: a4,
                      License5: a5,
                    });
                  }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item
            name="name"
            label="部署人工号"
            rules={[
              // { required: true, message: '请输入部署人工号' },
              {
                validator: (rule, value) => {
                  let aa = /^[1-9]([0-9])*$/;
                  let bb = form.getFieldValue().name;
                  if (!aa.test(bb)) {
                    return Promise.reject('请正确填写工号');
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <Input placeholder="请输入部署人工号" allowClear style={{ width: '33%' }} />
          </Form.Item>
        </Form>
      </Modal>
    </Modal>
  );
};
export default InitModal;
