import React, { useState, useEffect } from 'react';
import { flowReOrder } from '@/services/platform/flow';
import Sortable from 'sortablejs';
import { Modal, notification } from 'antd';
import styles from '../flow.less';
const Order = props => {
  const { visible, handleCancel, tableData, submitCallBack } = props;
  const [orderTable, setOrderTable] = useState([]);
  const [flowIDs, setFlowIDs] = useState('');
  // 页面弹出的时候初始化拖拽
  let dragTimer = null;
  useEffect(() => {
    if (visible) {
      setOrderTable(() => {
        let table;
        table = tableData.filter(item => item.extendID !== -1);
        return table;
      });
      dragTimer = setTimeout(() => {
        dragSort();
      }, 0);
    }
    return () => {
      clearTimeout(dragTimer);
    };
  }, [visible]);
  // 根据orderTable初始化flowIDs
  useEffect(() => {
    let ids;
    orderTable.forEach((item, index) => {
      if (index === orderTable.length - 1) {
        ids += `${item.extendID}`;
      } else {
        ids += `${item.extendID},`;
      }
    });

    setFlowIDs(ids);
  }, [orderTable]);
  // 初始化排序
  const dragSort = () => {
    let el = document.getElementById('doctor-drag-items');
    if (el) {
      Sortable.create(el, {
        animation: 100, // 动画参数
        onEnd(evt) {
          // 拖拽完毕之后发生，只需关注该事件
          let ids = '';
          let drg = evt.from.children;
          drg.forEach((item, index) => {
            if (index === drg.length - 1) {
              ids += `${item.getAttribute('drag-id')}`;
            } else {
              ids += `${item.getAttribute('drag-id')},`;
            }
          });
          setFlowIDs(ids);
        },
      });
    }
  };
  // 提交表单
  const onSubmit = () => {
    flowReOrder({ flowIDs }).then(res => {
      if (res.code === 0) {
        notification.success({
          message: '提示',
          duration: 3,
          description: '保存成功',
        });
        submitCallBack();
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
  return (
    <Modal
      title="调整顺序"
      visible={visible}
      onOk={onSubmit}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
      <div className={styles.doctorTable}>
        <table>
          <tbody id="doctor-drag-items">
            {orderTable && orderTable.length > 0 ? (
              orderTable.map(item => (
                <tr
                  drag-id={item.extendID}
                  key={item.extendID}
                  style={{ cursor: 'move' }}
                >
                  <td>
                    <span title={item.name}>{item.name}</span>
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan="10" style={{ textAlign: 'center' }}>
                  暂无数据
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </Modal>
  );
};
export default Order;
