import React, { useEffect, useState } from 'react';
import Sortable from 'sortablejs';
import { Modal, Divider, Checkbox } from 'antd';
import styles from '../../flowNode.less';
const CheckboxGroup = Checkbox.Group;

const Fieldselection = props => {
  const { onSubumit, handleCancel, visible, fieldList } = props;
  const [checkList, setCheckList] = useState([]);
  const [selectList, setSelectList] = useState([]); // 选中字段列表
  useEffect(() => {
    if (visible) {
      setCheckList(fieldList);
    }
  }, [visible]);
  useEffect(() => {
    let arr = [];
    if (checkList.length < 0) {
      return;
    }
    checkList.forEach(element => {
      arr = [...arr, ...element.defaultCheckedList];
    });
    setSelectList(arr);
    // 初始化拖拽
    setTimeout(() => {
      dragSort();
    }, 0);
  }, [checkList]);
  // 提交表单
  const onFinish = () => {
    onSubumit(selectList);
  };
  // 复选框
  const onChange = (list, index) => {
    setCheckList(value => {
      const chooseList = JSON.parse(JSON.stringify(value));
      chooseList[index].defaultCheckedList = list;
      chooseList[index].indeterminate =
        !!list.length && list.length < chooseList[index].plainOptions.length;
      chooseList[index].checkAll =
        list.length === chooseList[index].plainOptions.length;
      return chooseList;
    });
  };
  // 全选
  const onCheckAllChange = (e, index) => {
    setCheckList(value => {
      const chooseList = JSON.parse(JSON.stringify(value));
      chooseList[index].defaultCheckedList = e.target.checked
        ? chooseList[index].plainOptions
        : [];
      chooseList[index].indeterminate = false;
      chooseList[index].checkAll = e.target.checked;
      return chooseList;
    });
  };

  // 初始化排序
  const dragSort = () => {
    let el = document.getElementById('doctor-drag-items');
    if (el) {
      Sortable.create(el, {
        animation: 100, // 动画参数
        onEnd(evt) {
          // 拖拽完毕之后发生，只需关注该事件
          let arr = [];
          let len = evt.from.children;
          len.forEach(item => {
            arr.push(item.getAttribute('drag-id'));
          });
          setSelectList(arr);
        },
      });
    }
  };
  return (
    <Modal
      title="流程节点配置"
      visible={visible}
      onOk={onFinish}
      width="700px"
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
      centered
    >
      <div className={styles.fieldContent}>
        {/* 待选字段列表 */}
        <div className={styles.willSelectBox}>
          <div className={styles.header}>
            <Divider orientation="left" className={styles.headDivider}>
              待选字段列表
            </Divider>
          </div>
          <div className={styles.cardContent}>
            {checkList.map((item, index) => (
              <div className={styles.cardBox} key={index}>
                <div className={styles.title}>
                  <Divider orientation="left" className={styles.cardDivider}>
                    <span className={styles.groupName}>{item.groupName}</span>
                    <Checkbox
                      indeterminate={item.indeterminate}
                      onChange={e => onCheckAllChange(e, index)}
                      checked={item.checkAll}
                    />
                  </Divider>
                </div>
                <div className={styles.filedList}>
                  <CheckboxGroup
                    key={index}
                    options={item.plainOptions}
                    value={item.defaultCheckedList}
                    onChange={list => onChange(list, index)}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* 已选字段列表 */}
        <div className={styles.hasSelectBox}>
          <div className={styles.header}>
            <Divider orientation="left" className={styles.headDivider}>
              已选字段列表
            </Divider>
          </div>
          <div className={styles.doctorTable}>
            <table>
              <thead>
                <tr>
                  <td>字段名</td>
                </tr>
              </thead>
              <tbody id="doctor-drag-items">
                {selectList && selectList.length > 0 ? (
                  selectList.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>
    </Modal>
  );
};
export default Fieldselection;
