import React from 'react'
import { Modal, Transfer, Icon } from 'antd'

class DisplayColumnBox extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            targetColumns: props.defaultSelectedColumns || [],
            selectedColumns: [],
        }
    }
    swapItems = (arr, index1, index2) => {
        let arrClone = JSON.parse(JSON.stringify(arr));    //这里要使用一个深拷贝才能真正地改变state
        let temp = arrClone[index1];
        arrClone[index1] = arrClone[index2];
        arrClone[index2] = temp;
        this.setState({
            targetColumns: arrClone
        });
    }


    upSwap = (index) => {
        let arr = this.state.targetColumns
        if (index === 0) {
            return;
        }
        this.swapItems(arr, index, index - 1)
    }

    downSwap = (index) => {
        let arr = this.state.targetColumns
        if (index === arr.length - 1) {
            return;
        }
        this.swapItems(arr, index, index + 1);
    };

    renderRow = (item) => {
        const { targetColumns } = this.state;
        let index = targetColumns.findIndex(c => c.name === item.name);
        return <span data-key={item.name}>
            <span data-key='$name'>{item.label}</span>
            {index !== -1 && <span style={{ float: 'right' }}>
                <Icon type="arrow-up" onClick={(e) => {
                    this.swapTarget = true;
                    this.upSwap(index);
                }} /> 
                <Icon type="arrow-down" onClick={(e) => {
                    this.swapTarget = true;
                    this.downSwap(index);
                }} />
            </span>}
        </span>
    }

    handleChange = (targetKeys, direction, moveKeys) => {
        const { allColumns } = this.props;
        let targetColumns = targetKeys.map(k => allColumns.find(c => c.name === k));
        this.setState({ targetColumns });
    }

    handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
        if(!this.swapTarget) {
            this.setState({
                selectedColumns: sourceSelectedKeys.concat(targetSelectedKeys)
            });
        }
        this.swapTarget = false;
    }

    onOk= () => {
        const { hideBox, okHandler } = this.props;
        const { targetColumns } = this.state;
        typeof okHandler === 'function' && okHandler(targetColumns);
        typeof hideBox === 'function' && hideBox();
    }
    
    onCancel = () => {
        const { hideBox } = this.props
        hideBox();
    }

    render() {
        const { allColumns, visibleDisplayColumnBox } = this.props;
        const { targetColumns, selectedColumns } = this.state;

        return (
            <Modal
                visible={visibleDisplayColumnBox}
                title='设置展示列'
                onCancel={this.onCancel}
                width={700}
                style={{textAlign:'center'}}
                onOk={this.onOk}
                maskClosable={false}
                destroyOnClose={true}
            >
                <Transfer
                    dataSource={allColumns.map(c => ({...c, key: c.name}))}
                    showSearch
                    filterOption={(inputValue, option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1}
                    listStyle={{
                        width: 250,
                        height: 300,
                        textAlign:'left'
                    }}
                    operations={['显示', '隐藏']}
                    targetKeys={targetColumns.map(c => c.name)}
                    selectedKeys={selectedColumns}
                    onChange={this.handleChange}
                    onSelectChange={this.handleSelectChange}
                    render={this.renderRow}
                />
            </Modal>
        )
    };
}

export default DisplayColumnBox;