import React from 'react'
import { Icon, Table, message, Modal } from 'antd'
import { WeaTable } from 'ecCom'
import { slideStep3Columns } from '../columns'
import AddSalaryItemModal from './AddSalaryItemModal'
import { inject, observer } from 'mobx-react';
import FormalFormModal from '../../salaryItem/formalFormModal'
import AddCategoryModal from '../step3/AddCategoryModal'
import { toJS } from 'mobx';

@inject('ledgerStore')
@observer
export default class CanMoveItem extends React.Component {
   constructor(props) {
        super(props)
        let columns = slideStep3Columns
        .map(item => {
            item = {...item}
            if(item.key == "formulaContent") {
                item.render = (text, record) => {
                    if(record.canEdit) {
                        return (
                            <a onClick={() => {
                                this.handleFormulaClick(record.formulaId, record)
                            }}>{text}</a>
                        )
                    } else {
                        return (
                            <span>{text}</span>
                        )
                    }
                }
            }
            return item;
        })
        this.state = {
            addItemVisible: false,
            showContent: true,
            selectedRowKeys: [],
            columns,
            formalModalVisible: false,
            addCategoryVisible: false
        }

        this.formulaId = ""
        this.record = {}
        this.title = ""
    }

    // 编辑公式
    handleFormulaClick(formulaId, record) {
        this.formulaId = formulaId
        this.record = record
        this.setState({
            formalModalVisible: true
        })
    }

    
    handleTiggleContent() {
        this.setState({showContent: !this.state.showContent})
    }
    
    onSelectChange = selectedRowKeys => {
        this.setState({ selectedRowKeys });
    };

    // 删除
    handleDelete = () => {
        const { selectedRowKeys } = this.state;
        if(selectedRowKeys.length == 0) {
            message.warning("为选择任何条目")
            return
        }
        Modal.confirm({
            title: '信息确认',
            content: '确认删除',
            onOk:() => {
                const {dataSource} = this.props;
                let result = [...dataSource]
                this.props.onChange(result.filter(item => selectedRowKeys.indexOf(item.key) < 0))
            },
            onCancel: () => {

            },
        });
    }

    // 保存
    handleSaveFormal(data) {
        let record = {...this.record}
        record.formulaId = data.id
        let dataSource = [...this.props.dataSource]
        dataSource.map(item => {
            if(item.id == record.id) {
                item.formulaId = data.id
                item.formulaContent = data.formula
            }
        })
        this.props.onDataSourceChange(dataSource)
    }

    // 编辑分类名称
    handleUpdateCategorySave(name) {
        this.props.onTitleChange && this.props.onTitleChange(name)
        this.setState({
            addCategoryVisible: false
        })
    }

    // 修改分类名称，弹出修改弹出 
    handleEditGroupIconClick(title) {
        this.title = title
        this.setState({addCategoryVisible : true})
    }

    // 删除分类回调
    handleDeleteGroupIconClick() {
        Modal.confirm({
            title: '信息确认',
            content: '确认删除',
            onOk:() => {
              this.props.onGroupDelete && this.props.onGroupDelete()
            },
            onCancel: () => {
            },
          });
    }

    handleTableDrop = (datas) => {
        // TODO 
        console.log("datas:", datas);
    }

    render() {
        const {ledgerStore: {setAddItemVisible, addItemVisible}} = this.props;
        const { selectedRowKeys, formalModalVisible, addCategoryVisible } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: (record) => ({
                disabled: !record.canDelete, 
            }),
        };

        return (
            <div className="tableItemWrapper">
                <div style={{padding: "10px"}}> 
                    <span className="itemTitle">{this.props.title} 
                        {
                            this.props.title !== "未分类" && <span>
                                <i className="icon-coms-edit" style={{marginLeft: "10px", marginRight: "10px", cursor:"pointer"}} onClick={() => {this.handleEditGroupIconClick(this.props.title)}}/> 
                                <i className="icon-coms-Delete" style={{cursor:"pointer"}} onClick={() => {this.handleDeleteGroupIconClick()}}/>
                            </span>
                        }
                     
                     </span>
                    <span className="rightBtnsWrapper">
                        <Icon className="iconItem" type="minus-square" onClick={() => {this.handleDelete()}}/>
                        <Icon className="iconItem" type="plus-square" onClick={() => { this.setState({addItemVisible: true}) }}/>
                        <Icon type={this.state.showContent ? "down" : 'left'} style={{cursor: "pointer"}} onClick={() => {this.handleTiggleContent()}}/>
                    </span>
                </div>
                {
                    this.state.showContent && <WeaTable 
                    rowSelection={rowSelection} 
                    dataSource={this.props.dataSource} 
                    columns={this.state.columns} 
                    onRow={(record, index) => ({     
                        index,
                        moveRow: record,
                    })}
                    pagination={false} 
                    onDrop={(datas) => this.handleTableDrop(datas)}
                    draggable={true}/>
                }
                {
                    this.state.addItemVisible && <AddSalaryItemModal 
                        visible={this.state.addItemVisible}
                        title={this.props.title}
                        onCancel={() => { this.setState({addItemVisible: false})}}
                    />
                }

                {
                    formalModalVisible && 
                    <FormalFormModal 
                        formulaId={this.formulaId}
                        visible={formalModalVisible}
                        onSaveFormal={(data) => {
                            this.handleSaveFormal(data)
                        }}
                        onCancel={() => this.setState({
                            formalModalVisible: false
                        })}
                    />
                }
                
                {/* 编辑分类名称 */}
                {
                    addCategoryVisible && 
                    <AddCategoryModal title={this.title} onSave={(value) => {this.handleUpdateCategorySave(value)}} visible={addCategoryVisible} onCancel={() => {
                        this.setState({addCategoryVisible: false})
                    }} />
                }
            </div>
        )
    }
}