/* eslint-disable no-plusplus */
/* eslint-disable array-callback-return */
/* eslint-disable no-unused-expressions */
/* eslint-disable no-shadow */
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Form, Modal, Space, Divider, Radio, Checkbox, Button } from 'antd';

import Sortable from 'sortablejs';
import styles from './incident.less';
const CheckboxGroup = Checkbox.Group;
const ChangeAddFlows = props => {
  const {
    callBackSubmit = () => {},
    pickItem,
    visible,
    filed1,
    characterValue,
    newCheckedList,
  } = props;
  const [loading, setLoading] = useState(false);
  const [value, setValue] = useState('');
  const [checkValue, setCheckValue] = useState([]);
  const [form] = Form.useForm();
  const [title, setTitle] = useState([]);
  const { Item } = Form;
  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
  const [indeterminate, setIndeterminate] = useState([]);
  const [checkAll, setCheckAll] = useState([]);
  const [selectData, setSelectData] = useState([]);
  let objArr = [];

  const onChangeList1 = (list, index, title) => {
    const checkedListArr = [...checkedList];
    checkedListArr[index] = list;
    setCheckedList(checkedListArr);
    const indeterminateArr = [...indeterminate];
    const checkAllArr = [...checkAll];
    indeterminateArr[index] =
      !!list.length && list.length < filed1[title].length;
    checkAllArr[index] = list.length === filed1[title].length;
    setIndeterminate(indeterminateArr);
    setCheckAll(checkAllArr);
  };

  const onSubmit = () => {
    console.log(selectData.join(','));
    console.log(pickItem);
    console.log(checkedList);
    callBackSubmit({
      checkedList,
      str: selectData.join(','),
      pickItem,
      stt: selectData,
      title,
      filed22: filed1,
    });
  };
  const onCheckAllChange = e => {
    const indeterminateArr = [...indeterminate];
    const checkAllArr = [...checkAll];
    const checkedListArr = [...checkedList];
    checkAllArr[e.target.index] = e.target.checked;
    indeterminateArr[e.target.index] = false;
    e.target.checked
      ? (checkedListArr[e.target.index] = e.target.checkvalue)
      : (checkedListArr[e.target.index] = []);
    setCheckedList(checkedListArr);
    setIndeterminate(indeterminateArr);
    setCheckAll(checkAllArr);
  };
  useEffect(() => {
    selectAll();
  }, [checkedList]);

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

  useEffect(() => {
    console.log(characterValue);
    console.log(pickItem);
    console.log(filed1);
    let arr = Object.keys(filed1);
    console.log(arr, 'arr');
    setTitle(arr);
    let checkArr = [];
    let indeterminateArr = [];
    let checkAllArr = [];
    console.log(newCheckedList);
    // let b = []
    // let a = []
    arr.map((item, index) => {
      // filed1[item].map((i, j) => {
      //     b.push(i)
      // })
      checkArr[index] = [];
      newCheckedList.map(checkItem => {
        if (filed1[item].includes(checkItem)) {
          checkArr[index].push(checkItem);
        }
      });
      indeterminateArr.push(
        !!checkArr[index].length &&
          checkArr[index].length < filed1[item].length,
      );
      checkAllArr.push(checkArr[index].length === filed1[item].length);
    });
    // newCheckedList.map((item, index) => {
    //     if (b.includes(item) == false) {
    //         if(item == ''){
    //             a=[]
    //         }else{
    //             a.push(item)
    //         }

    //     }
    // })
    // if(a.length >0){
    //     filed1.外部字段 = a
    //     console.log(filed1)
    //     arr.push('外部字段')
    // }
    // setTitle(arr)
    // checkArr.push(a)
    console.log(checkArr);
    setCheckedList(checkArr);
    setIndeterminate(indeterminateArr);
    setCheckAll(checkAllArr);
    let newArr = characterValue.length ? characterValue.split(',') : [];
    setSelectData(newArr);
    draftSort();
  }, [visible]);

  // 拖拽初始化及逻辑
  const draftSort = () => {
    let el = document.getElementById('doctor-drag-items');
    if (el) {
      let sortable = Sortable.create(el, {
        animation: 100, // 动画参数
        onEnd(evt) {
          // 拖拽完毕之后发生，只需关注该事件
          let arr = [];
          let len = evt.from.children.length;
          for (let i = 0; i < len; i++) {
            arr.push(evt.from.children[i].getAttribute('drag-id'));
          }
          setSelectData(arr);
        },
      });
    }
  };

  return (
    <Modal
      title="部门或角色"
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      width="1400px"
      destroyOnClose
      centered
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      forceRender
      getContainer={false}
    >
      {visible && (
        <div className={styles.listCard1}>
          <div
            className={styles.cardItem1}
            style={{ borderRight: '1px solid #99bbe8' }}
          >
            <Divider
              orientation="left"
              style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
            >
              待选部门站点角色
            </Divider>
            <div className={styles.cardContent1}>
              {title.map((item, index) => (
                <div className={styles.cardItemData1} key={index}>
                  <Divider
                    orientation="left"
                    style={{
                      margin: '0 0 10px 0',
                      color: '#15428b',
                      borderTopColor: '#99bbe8',
                    }}
                  >
                    {item}{' '}
                    <Checkbox
                      indeterminate={indeterminate[index]}
                      onChange={onCheckAllChange}
                      index={index}
                      checkvalue={filed1[item]}
                      checked={checkAll[index]}
                    >
                      {' '}
                    </Checkbox>
                  </Divider>
                  <CheckboxGroup
                    options={filed1[item]}
                    value={checkedList[index]}
                    onChange={e => onChangeList1(e, index, item)}
                  />
                </div>
              ))}
            </div>
          </div>
          {/* <div className={styles.cardItem}>
            <Divider
              orientation="left"
              style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
            >
              已选列表
            </Divider>
            <div className={styles.cardContent}>
              <div className={styles.doctorTable}>
                <table>
                  <thead>
                    <tr>
                      <td>字段名</td>
                    </tr>
                  </thead>
                  <tbody id="doctor-drag-items">
                    {selectData && selectData.length > 0 ? (
                      selectData.map((item, index) => (
                        <tr
                          drag-id={item}
                          key={index}
                          style={{ cursor: 'move' }}
                        >
                          <td>
                            <span title={item}>{item}</span>
                          </td>
                        </tr>
                      ))
                    ) : (
                      <tr>
                        <td colSpan="10" style={{ textAlign: 'center' }}>
                          暂无数据
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div> */}
        </div>
      )}
    </Modal>
  );
};
export default ChangeAddFlows;
