import React, { useState, useEffect, PureComponent } from 'react';
import { Modal, Divider, Checkbox, Space, Button } from 'antd';
import styles from './maintenance.less';
const CheckboxGroup = Checkbox.Group;

const ChangeAdd = props => {
  const {
    callBackSubmit = () => {},
    isType,
    visible,
    newCheckedList,
    filed1,
    filed,
    pickItem,
    characterValue,
    ff,
  } = 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);
    });
    console.log(list);
    console.log(arr);
    setCheckedList(arr);
    setIndeterminate(!!list.length && list.length < filed.length);
    setCheckAll(list.length === filed.length);
  };
  const onChangeList1 = list => {
    let arr = [];
    list.map((item, index) => {
      arr.push(item);
    });
    console.log(list);
    console.log(arr);
    setCheckedList(arr);
    setIndeterminate(!!list.length && list.length < ff.length);
    setCheckAll(list.length === ff.length);
  };

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

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

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

  if (isType != 'app') {
    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}>
                {JSON.stringify(filed) == '{}' ? (
                  <>
                    <div className={styles.cardContent}>
                      <span
                        style={{
                          color: 'red',
                          fontSize: '1rem',
                          marginLeft: '25px',
                        }}
                      >
                        暂无数据请先配置台账管理台账名称为反馈
                      </span>
                    </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>
          )}
        </Modal>
      </div>
    );
  }
  if (isType === 'app') {
    return (
      <Modal
        title="角色"
        bodyStyle={{ width: '100%', minHeight: '100px' }}
        style={{ top: '10px' }}
        width="450px"
        destroyOnClose
        centered
        cancelText="取消"
        okText="确认"
        {...props}
        onOk={() => onSubmit()}
        forceRender
        getContainer={false}
      >
        {visible && (
          <div className={styles.listCard}>
            <div className={styles.cardItem}>
              <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={onCheckAllChange1}
                      checkvalue={ff}
                      checked={checkAll}
                    >
                      {' '}
                    </Checkbox>
                  </Divider>
                  <CheckboxGroup
                    options={ff}
                    value={checkedList}
                    onChange={e => onChangeList1(e)}
                  />
                </div>
              </div>
            </div>
          </div>
        )}
      </Modal>
    );
  }
};

export default ChangeAdd;
