/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-01-13 17:26:13
 * @LastEditTime: 2022-03-31 17:37:35
 * @LastEditors: leizhe
 */
import React, { useState, useEffect } from 'react';
import { flowReOrder } from '@/services/flow/flow';
import { Modal, notification } from 'antd';
import DragTable from '@/components/DragTable/DragTable';
const Order = props => {
  const { visible, handleCancel, tableData, submitCallBack, processData } = props;
  const [orderTable, setOrderTable] = useState([]);
  const [flowIDs, setFlowIDs] = useState('');
  // 页面弹出的时候初始化拖拽数据
  useEffect(() => {
    if (visible) {
      console.log(tableData);
      console.log(processData);
      let aa = [];
      processData.map(i => {
        i.root.map(j => {
          aa.push(j);
        });
      });
      setOrderTable(aa);
      // 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: 'order',
      width: 50,
      key: 'order',
    },
    {
      title: '分组名',
      dataIndex: 'group',
      width: 150,
      key: 'group',
    },
    {
      title: '字段名',
      dataIndex: 'name',
      width: 150,
      key: 'name',
    },
  ];
  return (
    <Modal
      title="调整顺序"
      width="600px"
      visible={visible}
      onOk={onSubmit}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
      <div style={{ minHeight: '200px' }}>
        <DragTable
          bordered
          style={{ marginBottom: '10px' }}
          rowKey={record => record.extendID}
          columns={columns}
          dataSource={orderTable}
          // showHeader={false}
          pagination={false}
          size="small"
          dragCallBack={dragCallBack}
          ItemTypes="flowOrder"
          scroll={{
            y: 500,
          }}
        />
      </div>
    </Modal>
  );
};
export default Order;