import React, { useState, useEffect } from 'react';
import { flowReOrder } from '@/services/platform/flow';
import { Modal, notification } from 'antd';
import DragTable from '@/components/DragTable/DragTable';
const Order = props => {
  const { visible, handleCancel, tableData, submitCallBack } = props;
  const [orderTable, setOrderTable] = useState([]);
  const [flowIDs, setFlowIDs] = useState('');
  // 页面弹出的时候初始化拖拽数据
  useEffect(() => {
    if (visible) {
      setOrderTable(() => {
        let table;
        table = tableData.filter(item => item.extendID !== -1);
        return table;
      });
    }
  }, [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 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,
        });
      }
    });
  };
  // 拖拽回调函数
  const dragCallBack = data => {
    if (data) {
      setOrderTable(data);
    }
  };
  const columns = [
    {
      title: '字段名',
      dataIndex: 'name',
      width: 150,
      key: 'name',
    },
  ];
  return (
    <Modal
      title="调整顺序"
      visible={visible}
      onOk={onSubmit}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
      <DragTable
        bordered
        style={{ marginBottom: '10px' }}
        rowKey={record => record.extendID}
        columns={columns}
        dataSource={orderTable}
        showHeader={false}
        pagination={false}
        size="small"
        dragCallBack={dragCallBack}
        ItemTypes="flowOrder"
      />
    </Modal>
  );
};
export default Order;
