/* eslint-disable no-else-return */
/* eslint-disable spaced-comment */
/* eslint-disable eqeqeq */
import React, { useEffect, useRef, useState } from 'react';
import {
  Card,
  Form,
  Input,
  Button,
  Select,
  Space,
  notification,
  Modal,
  Spin,
  Tabs,
  Divider,
  Checkbox,
  Row,
  Col,
  Popconfirm,
  Timeline,
} from 'antd';
import PageContainer from '@/components/BasePageContainer';
import { connect } from 'react-redux';
import {
  setTableSQLDirName,
  deleteConnNew,
  initDBv4new,
  getInitDBLogNew,
  getConnRecordNew,
  getDataBaseConfigNew,
  saveConnectionNew,
  getDataBaseList,
  updateConnDescNew,
  deleteInitDBLogNew,
  connectionTest,
  GetProductList, // 获取产品列表
  GetDbProduct, // 获取产品方案配置
  InitAddDataBase, // 数据库初始化
  InitEditDataBase, // 二次初始化
  CheckConnection,
  SetAdminMenuToRole,
  CheckDatabaseIsExist,
  NewInitAddDataBase,
} from '@/services/database/api';
import { BarcodeOutlined, EditOutlined } from '@ant-design/icons';
import styles from './DatabaseInitialization.less';
import styles1 from '../InitDataBase/InitDataBase.less';

const CheckboxGroup = Checkbox.Group;
const { Option } = Select;
const formLables = {
  ip: '服务器地址',
  userName: '用户名称',
  password: '用户密码',
  dbName: '数据库名称',
};
let time = null;
const DatabaseInitialization = props => {
  const [form] = Form.useForm();
  const [option, setOption] = useState([]); // 下拉列表数据
  const [modalVisible, setModalVisible] = useState({
    describeVisible: false, // 描述弹窗
    versionVisible: false, // 检查版本弹窗
    initVisible: false, // 初始化选择产品弹窗
  }); // 修改弹窗
  const [initVisible, setInitVisible] = useState(false); // 数据库初始化弹窗
  const [initContent, setInitContent] = useState(''); // 数据库初始化内容
  const [cardLoading, setCardLoading] = useState(false); // 初始化card Loading
  const [finish, setFinish] = useState(false);
  const [initLoading, setInitLoading] = useState(false);
  const [dbExists, setDbExists] = useState(false); // 数据库是否存在
  const [keepDb, setKeepDb] = useState([]);
  const [keepProduct, setKeepProduct] = useState([]);
  const scroll = useRef(null);
  const [flag, setFlag] = useState(0);

  const [data, setData] = useState([]);
  const [title, setTitle] = useState([]);
  const [listVisible, setListVisible] = useState(false);
  const [keepCode, setKeepCode] = useState([]);
  const [keepData, setKeepData] = useState([]);
  const [code, setCode] = useState('');
  const [checkboxFlag, setCheckboxFlag] = useState(0);
  const [keepValue, setKeepValue] = useState([]);
  const [value, setValue] = useState([]);
  const [product, setProduct] = useState([]);
  const [msg, setMsg] = useState('');
  const [keepNumber, setkeepNumber] = useState('');
  const [keepNa, setkeepNa] = useState('');
  const [keepCo, setkeepCo] = useState('');
  const [keepMsg, setkeepMsg] = useState('');
  const [keepState, setKeepState] = useState(0);
  const [allLength, setAllLength] = useState('');
  const [firstColor, setfirstColor] = useState('gray');
  const [secordColor, setsecordColor] = useState('gray');
  const [lastColor, setLastColor] = useState('gray');
  const [totalProduct, setTotalProduct] = useState('');
  const [simpleProduct, setSimpleProduct] = useState('');

  // 获取数据库配置信息
  useEffect(() => {
    setCardLoading(true);
    getProductList();
    // form.setFieldsValue({ ip: '127.0.0.1', password: 'sa', userName: 'sa' });
    GetDb();
  }, []);
  const getProductList = () => {
    GetProductList().then(res => {
      setCardLoading(false);
      if (res.code === 0) {
        console.log(res.data);
        setKeepData(res.data);
        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);
        setAllLength(res.data.length);
        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 handleShowModal = (key, value) => {
    setModalVisible({ ...modalVisible, [key]: value });
  };

  // 获取日志
  const doInitLog = () => {
    setInitLoading(true);
    getInitDBLogNew()
      .then(res => {
        if (res.code === 0) {
          if (res.data.content) {
            setInitLoading(false);
            let arr = [];
            arr.push(
              res.data.content.split(/(\r\n)|(\n)/).map((item, index) => (
                // eslint-disable-next-line react/no-danger
                <p key={index} dangerouslySetInnerHTML={{ __html: item }} />
              )),
            );
            console.log(arr);
            setInitContent(arr);
            scroll.current.scrollTop = scroll.current.scrollHeight;
          }
          if (!res.data.finish) {
            time = setTimeout(() => {
              doInitLog();
            }, 600);
          } else {
            setInitLoading(false);
            if (time) {
              clearTimeout(time);
              time = null;
            }
          }
        }
      })
      .catch(err => {
        setFinish(true);
      });
  };

  const onValuesChange = (value, b) => {
    form.setFieldsValue(value);
  };
  const onChange = value => {
    const { length } = value;
    form.setFieldsValue({
      dbName: value[length - 1],
    });
  };

  // 关闭弹窗
  const handleClick = () => {
    setInitVisible(false);
    setInitContent('');
    setFinish(false);
    // deleteInitDBLog({
    //   _version: 9999,
    //   _dc: Date.now(),
    // });
    deleteInitDBLogNew();
  };

  // 获取数据库列表
  const selectFocus = e => {
    //setOption([]);
    let params = form.getFieldsValue();
    getDataBaseList({
      // _version: 9999,
      // _dc: Date.now(),
      userName: params.userName || '',
      password: params.password || '',
      ip: params.ip || '',
    })
      .then(res => {
        if (res.code == 0) {
          console.log(res.data.root);
          setOption(res.data.root);
        } else {
          notification.error({
            message: '提示',
            duration: 15,
            description: res.msg,
          });
          setOption([]);
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  const GetDb = () => {
    // let obj = form.getFieldsValue();
    GetDbProduct().then(res => {
      if (res.code === 0) {
        form.setFieldsValue(res.data.DbInfo);
        if (res.data.Project[0]) {
          setkeepNumber(res.data.Project[0].license);
          setkeepMsg(res.data.Project[0].projectName);
          setkeepNa(res.data.Project[0].applicantName);
          setkeepCo(res.data.Project[0].jobNumber);
        } else {
          setkeepNumber('');
          setkeepMsg('');
          setkeepNa('');
          setkeepCo('');
        }
        if (res.data.Product) {
          let aa = [];
          res.data.Product.map(i => {
            aa.push(i.name);
          });
          if (res.data.IsAuthorize) {
            setCheckboxFlag(1);
          } else {
            setCheckboxFlag(0);
          }
          console.log(aa);
          if (aa.length > 0) {
            let dd = [];
            aa.map(i => {
              keepData.map(j => {
                if (j.name === i) {
                  dd.push(j);
                }
              });
            });
            console.log(dd);
            let Arr = Array.from(new Set(dd));
            console.log(Arr);
            let arr = formateArrDataA(Arr, 'productName');
            let a = Object.keys(arr);
            a.map(i => {
              let list = [];
              arr[i].map(j => {
                list.push(j.name);
              });
              arr[i] = list;
            });
            console.log(arr);
            setProduct(arr);
            setKeepValue(arr);
          }
          console.log(newArr);
          let newArr = Array.from(new Set(aa));
          setKeepProduct(newArr);
          setKeepCode(newArr);
          setValue(newArr);
        }
        setDbExists(res.data.DBExists);
        setKeepDb(res.data);

        if (res.data.DBExists) {
          setCheckboxFlag(1);
          setMsg('当前数据库已存在不可初始化');
          notification.warning({
            message: '提示',
            duration: 5,
            description: '当前数据库已存在不可初始化',
          });
        } else if (!res.data.DBExists && !res.data.Project[0]) {
          setCheckboxFlag(0);
          setMsg('');
          notification.warning({
            message: '提示',
            duration: 5,
            description: '未检测到License，自主选择产品进行数据库初始化',
          });
        } else if (!res.data.DBExists && res.data.Project[0]) {
          setCheckboxFlag(1);
          notification.success({
            message: '提示',
            duration: 5,
            description: '已检测到License，需初始化数据库',
          });
          setMsg('');
        }
      } else {
        notification.warning({
          message: '提示',
          duration: 5,
          description: res.msg,
        });
      }
    });
  };

  const GetDbChange = () => {
    let obj = form.getFieldsValue();
    GetDbProduct({ ...obj }).then(res => {
      if (res.code === 0) {
        if (res.data.Project[0]) {
          setkeepNumber(res.data.Project[0].license);
          setkeepMsg(res.data.Project[0].projectName);
          setkeepNa(res.data.Project[0].applicantName);
          setkeepCo(res.data.Project[0].jobNumber);
        } else {
          setkeepNumber('');
          setkeepMsg('');
          setkeepNa('');
          setkeepCo('');
        }
        if (res.data.Product) {
          let aa = [];
          res.data.Product.map(i => {
            aa.push(i.name);
          });
          if (res.data.IsAuthorize || res.data.DBExists) {
            setCheckboxFlag(1);
          } else {
            setCheckboxFlag(0);
          }
          console.log(aa);
          if (aa.length > 0) {
            let dd = [];
            aa.map(i => {
              keepData.map(j => {
                if (j.name === i) {
                  dd.push(j);
                }
              });
            });
            console.log(dd);
            let Arr = Array.from(new Set(dd));
            console.log(Arr);
            let arr = formateArrDataA(Arr, 'productName');
            let a = Object.keys(arr);
            a.map(i => {
              let list = [];
              arr[i].map(j => {
                list.push(j.name);
              });
              arr[i] = list;
            });
            console.log(arr);
            setProduct(arr);
            setKeepValue(arr);
          }
          console.log(newArr);
          let newArr = Array.from(new Set(aa));
          setKeepProduct(newArr);
          setKeepCode(newArr);
          setValue(newArr);
        }
        setDbExists(res.data.DBExists);
        setKeepDb(res.data);
      } else {
        notification.warning({
          message: '提示',
          duration: 5,
          description: res.msg,
        });
      }
    });
  };

  const onOK = (arr, code) => {
    initDatabasePro(arr, code);
  };

  // 数据库初始化
  const initDatabasePro = (e, j) => {
    let productSetting = e;
    let obj = form.getFieldsValue();
    // 数据库存在调用编辑接口否则调用新增接口
    setInitLoading(true);
    handleShowModal('initVisible', false);
    setInitVisible(true);
    doInitLog();
    // if (dbExists) {
    //   InitEditDataBase({ ...obj, productSetting, license: j }).then(res => {
    //     setInitLoading(false);
    //     if (res.code === 0) {
    //       setfirstColor('green');
    //       setsecordColor('green');
    //       SetAdminMenuToRole().then(resdata => {
    //         if (resdata.code === 0) {
    //           setLastColor('green');
    //         }
    //       });

    //       notification.success({
    //         message: '提示',
    //         duration: 5,
    //         description: '数据库初始化成功',
    //       });
    //     } else {
    //       setfirstColor('red');
    //       setsecordColor('gray');
    //       setLastColor('gray');
    //       notification.error({
    //         message: '提示',
    //         duration: 5,
    //         description: res.msg,
    //       });
    //     }
    //   });
    //   return;
    // }
    NewInitAddDataBase({ ...obj, productSetting }).then(res => {
      setInitLoading(false);
      if (res.code === 0) {
        console.log(value);
        console.log(keepProduct);
        console.log(123231);
        if (value.length > 0) {
          setKeepProduct(value);
        }
        setMsg('当前数据库已存在不可初始化');
        setCheckboxFlag(1);
        setfirstColor('green');
        setsecordColor('green');
        SetAdminMenuToRole().then(resdata => {
          if (resdata.code === 0) {
            setLastColor('green');
          }
        });
        notification.success({
          message: '提示',
          duration: 5,
          description: '数据库初始化成功',
        });
        setkeepNumber('');
        setkeepNa('');
        setkeepMsg('');
        setkeepCo('');
        setTotalProduct(res.data.productPackageSumCount);
        setSimpleProduct(res.data.productPackageCount);
      } else {
        setFinish(true);
        setfirstColor('red');
        setsecordColor('gray');
        setLastColor('gray');
        notification.error({
          message: '提示',
          duration: 5,
          description: res.msg,
        });
      }
    });
  };

  const flagChange = () => {
    console.log(888);
    setSimpleProduct('');
    setTotalProduct('');
    setValue('');
    setKeepProduct([]);
    setKeepValue([]);
    setProduct([]);
    onCheck();
    // deleteInitDBLogNew();
  };

  const onChange1 = (e, item) => {
    console.log(e);
    console.log(item);
    console.log(product);
    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 {
        console.log(keepValue);
        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 {
      console.log(keepValue);
      let aa = keepValue;
      aa[item] = e;
      console.log(aa);
      let a = Object.keys(aa);
      console.log(a);
      let list = [];
      a.map(i => {
        aa[i].map(j => {
          list.push(j);
        });
      });
      console.log(aa);
      setKeepValue(aa);
      console.log(list);
      setValue(list);
    }
  };

  const onCheck = () => {
    let obj = form.getFieldsValue();
    GetDbChange();
    deleteInitDBLogNew();
    setCardLoading(true);
    CheckDatabaseIsExist({ ...obj }).then(res => {
      setCardLoading(false);
      if (res.code == 0) {
        // 数据库不存在
        if (res.data === false) {
          // 有授权码
          if (keepNumber) {
            setCheckboxFlag(1);
            setDbExists(false);
            setMsg('');
            notification.warning({
              message: '提示',
              duration: 5,
              description: '已检测到License，需初始化数据库',
            });
          } else {
            setCheckboxFlag(0);
            setDbExists(false);
            setMsg('');
            notification.warning({
              message: '提示',
              duration: 5,
              description: '未检测到License，自主选择产品进行数据库初始化',
            });
          }
        } else {
          setCheckboxFlag(1);
          setMsg('当前数据库已存在不可初始化');
          notification.warning({
            message: '提示',
            duration: 5,
            description: '当前数据库已存在不可初始化',
          });
        }
      } else {
        setMsg(res.msg);
        setCheckboxFlag(1);
        notification.error({
          message: '提示',
          duration: 5,
          description: res.msg,
        });
      }
    });
  };

  const Submit = () => {
    let obj = form.getFieldsValue();
    CheckDatabaseIsExist({ ...obj }).then(res => {
      if (res.code === 0) {
        if (res.data === true) {
          setCheckboxFlag(1);
          setMsg('当前数据库已存在不可初始化');
          notification.warning({
            message: '提示',
            duration: 5,
            description: '当前数据库已存在不可初始化',
          });
        } else {
          setDbExists(false);
          setMsg('');
          if (msg) {
            notification.warning({
              message: '提示',
              duration: 5,
              description: '当前数据库不可初始化',
            });
          } else if (obj.ip == '' || obj.userName == '' || obj.password == '' || obj.dbName == '') {
            notification.warning({
              message: '提示',
              duration: 5,
              description: '请输入完整数据库信息',
            });
          } else if (checkboxFlag == 0 && value.length == 0) {
            notification.warning({
              message: '提示',
              duration: 5,
              description: '请勾选产品',
            });
          } else if (checkboxFlag == 1 && keepProduct.length == 0) {
            notification.warning({
              message: '提示',
              duration: 5,
              description: '请勾选产品',
            });
          } else {
            console.log(value);
            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);
            onOK(arr, code);
          }
        }
      } else {
        setMsg(res.msg);
        setCheckboxFlag(1);
        notification.error({
          message: '提示',
          duration: 5,
          description: res.msg,
        });
      }
    });

    // callBackSubmit(arr, code);
    // onCancel();
  };

  const save = () => {
    if (
      form.getFieldValue().ip &&
      form.getFieldValue().userName &&
      form.getFieldValue().password &&
      form.getFieldValue().dbName
    ) {
      flagChange();
    }
  };

  return (
    <>
      <PageContainer className={styles.InitDataBaseContainer}>
        <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
          <div style={{ width: '30%' }}>
            <Card>
              <div style={{ height: 'calc(100vh - 108px)', paddingTop: '13px' }}>
                <Form
                  className={styles.mgTop20}
                  layout="horizontal"
                  labelAlign="left"
                  labelCol={{ span: 6 }}
                  form={form}
                  onValuesChange={onValuesChange}
                >
                  <Form.Item
                    label={`${formLables.ip}：`}
                    name="ip"
                    rules={[
                      {
                        validator: (rule, value) => {
                          if (form.getFieldValue().ip == '') {
                            return Promise.reject('ip必填');
                          }
                          setfirstColor('gray');
                          setsecordColor('gray');
                          setLastColor('gray');
                          return Promise.resolve();
                        },
                      },
                    ]}
                  >
                    <Input placeholder="请输入服务器名或IP地址" />
                  </Form.Item>
                  <Form.Item
                    label={`${formLables.userName}：`}
                    name="userName"
                    rules={[
                      {
                        validator: (rule, value) => {
                          if (form.getFieldValue().userName == '') {
                            return Promise.reject('用户名称必填');
                          }
                          setfirstColor('gray');
                          setsecordColor('gray');
                          setLastColor('gray');
                          return Promise.resolve();
                        },
                      },
                    ]}
                  >
                    <Input placeholder="请输入用户名称" />
                  </Form.Item>
                  <Form.Item
                    label={`${formLables.password}：`}
                    name="password"
                    rules={[
                      {
                        validator: (rule, value) => {
                          console.log(form.getFieldValue().password);
                          if (form.getFieldValue().password == '') {
                            return Promise.reject('用户密码必填');
                          }
                          setfirstColor('gray');
                          setsecordColor('gray');
                          setLastColor('gray');
                          return Promise.resolve();
                        },
                      },
                    ]}
                  >
                    <Input placeholder="请输入用户密码" type="password" />
                  </Form.Item>
                  <Form.Item
                    label={`${formLables.dbName}：`}
                    name="dbName"
                    rules={[
                      {
                        validator: (rule, value) => {
                          console.log(form.getFieldValue().dbName);
                          if (
                            form.getFieldValue().dbName == '' ||
                            form.getFieldValue().dbName == undefined
                          ) {
                            return Promise.reject('数据库名称必填');
                          }
                          setfirstColor('gray');
                          setsecordColor('gray');
                          setLastColor('gray');
                          return Promise.resolve();
                        },
                      },
                    ]}
                  >
                    <Input placeholder="请输入数据库名称" />
                  </Form.Item>
                </Form>
                <div style={{ float: 'right' }}>
                  <Button onClick={save}>环境检查</Button>
                </div>
                <div style={{ marginTop: '100px', transform: 'scal(1.5)' }}>
                  <Timeline>
                    <Timeline.Item color={firstColor}>数据库初始化完成</Timeline.Item>
                    <Timeline.Item color={secordColor}>
                      <p>产品授权打开已初始化的产品</p>
                      {/* {console.log(simpleProduct)}
                      {console.log(totalProduct)} */}
                      {/* {simpleProduct ? ( */}
                      <p>
                        已打开<span style={{ color: 'rgb(24 144 255)' }}>{simpleProduct}</span>/
                        <span style={{ color: 'rgb(24 144 255)' }}>{totalProduct}</span>个产品
                      </p>
                      {/* ) : (
                        <></>
                      )} */}
                    </Timeline.Item>
                    <Timeline.Item color={lastColor}>
                      <p>平台管理员勾选所有菜单权限</p>
                      <p>平台管理员登录名：panda</p>
                      <p>初始密码：panda666</p>
                    </Timeline.Item>
                  </Timeline>
                </div>
              </div>
            </Card>
          </div>
          <div style={{ width: '70%' }}>
            <Card className={styles.mgTop20}>
              <div style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <div style={{ display: 'inline-block', width: '30%' }}>
                  授权码：
                  {keepNumber ? (
                    <>{keepNumber}</>
                  ) : (
                    <span>
                      --
                      {/* <EditOutlined
                        style={{ color: 'rgb(24 144 255)', marginLeft: '20px', marginTop: '10px' }}
                        onClick={}
                      /> */}
                    </span>
                  )}
                </div>
                <div style={{ display: 'inline-block', width: '30%' }}>
                  项目名：{keepMsg ? <>{keepMsg}</> : '--'}
                </div>
                <div style={{ display: 'inline-block', width: '25%' }}>
                  申请人：{keepNa ? <>{keepNa}</> : '-'}
                  {keepCo ? <>（{keepCo}）</> : '-'}
                </div>
                <div style={{ display: 'inline-block', width: '15%' }}>
                  {checkboxFlag == 0 ? (
                    <div style={{ float: 'right' }}>
                      （已选<span style={{ color: 'rgb(24 144 255)' }}>{value.length}</span>/
                      <span style={{ color: 'rgb(24 144 255)' }}>{allLength}</span>个产品）
                    </div>
                  ) : (
                    <div style={{ float: 'right' }}>
                      （已选
                      <span style={{ color: 'rgb(24 144 255)' }}>{keepProduct.length}</span>/
                      <span style={{ color: 'rgb(24 144 255)' }}>{allLength}</span>个产品）
                    </div>
                  )}
                </div>
              </div>
              <Spin tip="loading..." spinning={cardLoading}>
                <div className={styles1.initItemData}>
                  {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 => onChange1(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>
              </Spin>
              <div>
                <Space size="large" className={styles.btnBox}>
                  <Popconfirm
                    placement="topLeft"
                    disabled={msg == '' ? false : true}
                    title={<span style={{ color: 'rgb(24 144 255)' }}>是否确认初始化！</span>}
                    okText="确认"
                    cancelText="取消"
                    onConfirm={() => {
                      Submit();
                      deleteInitDBLogNew();
                    }}
                  >
                    <Button type="primary" disabled={msg == '' ? false : true}>
                      数据库初始化
                    </Button>
                  </Popconfirm>
                </Space>
              </div>
            </Card>
          </div>
        </div>
        <Modal
          title="初始化数据库"
          visible={initVisible}
          onCancel={() => {
            setInitVisible(false);
            setInitContent('');
            deleteInitDBLogNew();
          }}
          width={800}
          maskClosable={false}
          bodyStyle={{
            height: '500px',
            // overflowY: 'auto',
          }}
          footer={[
            <Button
              onClick={() => {
                handleClick();
              }}
              key="back"
              type="primary"
            >
              关闭窗口
            </Button>,
          ]}
        >
          <div
            ref={scroll}
            style={{
              maxHeight: '470px',
              overflowY: 'auto',
              marginRight: ' -24px',
            }}
          >
            {initContent || (
              <Spin
                spinning={initLoading}
                tip="loading..."
                style={{ width: '100%', marginTop: '40px' }}
              />
            )}
          </div>
        </Modal>
      </PageContainer>
    </>
  );
};

export default connect()(DatabaseInitialization);
