/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-01-13 10:47:32
 * @LastEditTime: 2022-03-31 17:37:04
 * @LastEditors: leizhe
 */
/* eslint-disable array-callback-return */
/* eslint-disable no-plusplus */
import React, { useState, useEffect } from 'react';
import { Modal, Tooltip } from 'antd';

import styles from './sortModal.less';
import DragTable from '@/components/DragTable/DragTable';
const SortModal = props => {
  const { callBackSubmit = () => {}, visible, onCancel, webs } = props;
  const [orderTable, setOrderTable] = useState([]);
  const [flowIDs, setFlowIDs] = useState([]);

  const onSumbit = () => {
    callBackSubmit({ str: flowIDs });
  };

  // 根据orderTable值改变flowIDs
  useEffect(() => {
    let ids = [];
    orderTable.map(item => {
      ids.push(item.subSystemValue);
    });
    console.log(ids);
    setFlowIDs(ids);
  }, [orderTable]);

  useEffect(() => {
    if (visible) {
      console.log(webs);
      let aa = [...webs];
      aa.map(i => {
        delete i.children;
      });
      setOrderTable(aa);
    }
  }, [visible]);

  // 拖拽回调函数
  const dragCallBack = data => {
    if (data) {
      setOrderTable(data);
    }
  };

  const columns = [
    {
      title: '网站名',
      dataIndex: 'text',
      width: 50,
      key: 'text',
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
  ];

  return (
    <Modal
      title="网站调序"
      width="600px"
      visible={visible}
      onCancel={onCancel}
      onOk={onSumbit}
      okText="确认"
      cancelText="取消"
    >
      <div className={styles.cardContent} style={{ width: '90%', marginLeft: '24px' }}>
        <div style={{ height: '500px' }}>
          <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: 450,
            }}
          />
        </div>
      </div>
    </Modal>
  );
};
export default SortModal;
