/* eslint-disable no-lonely-if */
/* eslint-disable eqeqeq */
import React, { useState, useEffect, PureComponent } from 'react';
import { Modal, Divider, Checkbox, Space, Button, Empty } from 'antd';
import styles from './maintenance.less';
const CheckboxGroup = Checkbox.Group;

const ChangeAdd = props => {
  const {
    callBackSubmit = () => {},
    isType,
    visible,
    newCheckedList,
    filed,
    pickItem,
    characterValue,
    ff,
    type,
  } = props;
  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
  const [indeterminate, setIndeterminate] = useState(true); // 全选样式控制
  const [checkAll, setCheckAll] = useState(false); // 全选
  const [selectData, setSelectData] = useState([]); // 选中复选框的值集合
  let objArr = [];

  const onChangeList = list => {
    let arr = [];
    list.map((item, index) => {
      arr.push(item);
    });
    setCheckedList(arr);
    setIndeterminate(!!list.length && list.length < filed.length);
    setCheckAll(list.length === filed.length);
  };

  const onSubmit = () => {
    isType === 'rule'
      ? callBackSubmit(
          `${value === '无' || value === '' ? '' : `${value},`}${checkValue.join(',')}`,
        )
      : callBackSubmit({
          checkedList,
          str: selectData.join(','),
          pickItem,
          stt: selectData,
          isType,
        });
  };
  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? filed : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  useEffect(() => {
    console.log(filed);
    selectAll();
  }, [checkedList]);

  const selectAll = () => {
    objArr = [];
    checkedList.map(item => {
      objArr = objArr.concat(item);
    });
    console.log(checkedList);
    setSelectData(objArr);
  };

  useEffect(() => {
    console.log(indeterminate);
    if (type == 'edit') {
      if (isType != '' && isType === 'add') {
        // 反馈名称
        let checkArr = [];
        newCheckedList.map(checkItem => {
          if (filed.includes(checkItem)) {
            checkArr.push(checkItem);
          }
        });
        setCheckedList(checkArr);
        setIndeterminate(!!checkArr.length && checkArr.length < filed.length);
        setCheckAll(checkArr.length === filed.length && filed.length != 0);
        let newArr = characterValue.length ? characterValue.split(',') : [];
        setSelectData(newArr);
      }
    } else {
      if (isType != '' && isType === 'add') {
        // 反馈名称
        let checkArr = [];
        newCheckedList.map(checkItem => {
          if (filed.includes(checkItem)) {
            checkArr.push(checkItem);
          }
        });
        setCheckedList(checkArr);
        setIndeterminate(!!checkArr.length && checkArr.length < filed.length);
        setCheckAll(checkArr.length === filed.length && filed.length != 0);
        let newArr = characterValue.length ? characterValue.split(',') : [];
        setSelectData(newArr);
      }
    }
  }, [visible]);

  return (
    <div className={styles.ChangeAddContainer}>
      <Modal
        title="反馈名称"
        bodyStyle={{ width: '100%', minHeight: '100px' }}
        style={{ top: '10px' }}
        width="400px"
        destroyOnClose
        centered
        cancelText="取消"
        okText="确认"
        {...props}
        onOk={() => onSubmit()}
        forceRender
        getContainer={false}
      >
        {visible && (
          <div className={styles.listCard}>
            <div className={styles.cardItem}>
              {filed.length == 0 ? (
                <>
                  <div className={styles.cardContent}>
                    <Empty
                      image={Empty.PRESENTED_IMAGE_SIMPLE}
                      description="暂无数据请先在台账管理中配置台账类型为反馈"
                    />
                  </div>
                </>
              ) : (
                <div>
                  <div className={styles.cardContent}>
                    <div className={styles.cardItemData}>
                      <Divider
                        orientation="left"
                        style={{
                          margin: '0 0 5px 0',
                          color: '#15428b',
                          borderTopColor: '#99bbe8',
                        }}
                      >
                        全选
                        <Checkbox
                          style={{ marginLeft: '10px' }}
                          indeterminate={indeterminate}
                          onChange={onCheckAllChange}
                          checkvalue={filed}
                          checked={checkAll}
                        >
                          {' '}
                        </Checkbox>
                      </Divider>
                      <CheckboxGroup
                        options={filed}
                        value={checkedList}
                        onChange={e => onChangeList(e)}
                      />
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default ChangeAdd;
