import React, { useState, useEffect } from 'react';
import { Modal } from 'antd';


import styles from './incident.less';
import Sortable from 'sortablejs';
const SortModal = props => {
    const {callBackSubmit = () => { }, title, visible, onCancel, sortData1 } = props;
    const [drag, setDrag] = useState([])

    useEffect(()=>{
        draftSort()
    },[visible])
   
    const onSumbit = () => {
        callBackSubmit({str: drag});
    }
    
    //拖拽初始化及逻辑
    const draftSort = () => {
        let el = document.getElementById('doctor-drag-items');
        if (el) {
            let sortable = Sortable.create(el, {
                animation: 100, //动画参数
                onEnd: function (evt) { //拖拽完毕之后发生，只需关注该事件
                    let arr = [];
                    let len = evt.from.children.length;
                    for (let i = 0; i < len; i++) {
                        console.log(i)
                        arr.push(evt.from.children[i].getAttribute('drag-id'))
                    }
                    console.log(arr)
                    setDrag(arr)
                }
            });
        }

    }
    return (
        <Modal
            title={title}
            visible={visible}
            onCancel={onCancel}
            onOk={onSumbit}
            okText="确认"
            cancelText="取消"
        >
            <div className={styles.cardContent} style={{width: '26rem', marginLeft:'24px'}}>
                <div className={styles.doctorTable}>
                    <table style={{width: '104%', marginLeft: '-5px'}}>
                        <thead>
                            <tr>
                                <td>事件名称</td>
                            </tr>
                        </thead>
                        <tbody id='doctor-drag-items'>
                            {
                                sortData1.map((item, index) => {
                                
                                    return <tr drag-id={item.ID} key={item.ID} style={{ cursor: 'move' }}>
                                        <td><span title={item.name}>{item.name}</span></td>
                                    </tr>
                                })

                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </Modal>
    )
}
export default SortModal;