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'

@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
        }

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

    // 编辑公式
    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)
    }

    render() {
        const {ledgerStore: {setAddItemVisible, addItemVisible}} = this.props;
        const { selectedRowKeys, formalModalVisible } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        return (
            <div className="tableItemWrapper">
                <div style={{padding: "10px"}}> 
                    <span className="itemTitle">{this.props.title}</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} pagination={false}/>
                }
                {
                    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
                        })}
                    />
                }
                
            </div>
        )
    }
}