import React from 'react'
import { Table, Icon } from 'antd'
import { WeaTable } from 'ecCom'
import { slideStep4Columns} from './columns'
import "./index.less"
import RuleEditModal from './step4/RuleEditModal'
import { inject, observer } from 'mobx-react';

@inject('ledgerStore')
@observer
export default class CalRulesForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            slideStep4Columns: slideStep4Columns.map(item => {
                item = {...item}
                if(item.key == "cz") {
                    item.render = (text, record) => {
                        return (
                            <a onClick={() => {this.handleDeleteItem(record)}}>删除</a>
                        )
                    }
                }
                return item
            })
        }
    }

    componentWillMount() {
        const { ledgerStore: { listAdjustmentRule }} = this.props;
        listAdjustmentRule()
    }

    handleSave(params) {
        const { ledgerStore: {sobItemRuleDataSource, setSobItemRuleDataSource}} = this.props;
        let dataSource = [...sobItemRuleDataSource]
        dataSource.push(params)
        setSobItemRuleDataSource(dataSource)
    }
    
    handleDeleteItem(record) {
        const { ledgerStore: {sobItemRuleDataSource, setSobItemRuleDataSource}} = this.props;
        let dataSource = [...sobItemRuleDataSource]
        setSobItemRuleDataSource(dataSource.filter(item => item.salaryItemId != record.key))
    }

    convertAdjustmentType(index) {
        let nameList = ['取调整后薪资', '分段计薪', '取平均']
        return nameList[Number(index) - 1]
    }

    getSalaryItemName(salaryItemId) {
        const { ledgerStore: {ruleOptionList}} = this.props;
        let result = ""
        ruleOptionList.map(item => {
            if(item.key == salaryItemId) {
                result = item.showname
            }
        })
        return result;
    }

    convertDataSource(dataSoruce) {
        let result = [...dataSoruce];
        return result.map(item => {
            let resultStr = "";
            resultStr += `${item.dayOfMonth}号（含）之前调薪，${this.convertAdjustmentType(item.beforeAdjustmentType)}；${item.dayOfMonth}号之后调薪，${this.convertAdjustmentType(item.afterAdjustmentType)}`
            return {
                key: item.salaryItemId,
                salaryItemId: item.salaryItemId,
                salaryItemName: item.salaryItemName ? item.salaryItemName : this.getSalaryItemName(item.salaryItemId),
                rule: resultStr
            }
        })
        
    }
    
    render() {
        const { ledgerStore: {sobItemRuleDataSource}} = this.props;
        let datas = this.convertDataSource(sobItemRuleDataSource)
        return (
            <div className="calRulesForm">
                <div className="headerIcon">
                        <Icon className="iconItem" type="plus-square" onClick={() => {this.setState({modalVisible: true})}}/>
                    </div>
                <div className="tableWrapper">
                    <WeaTable dataSource={datas} columns={this.state.slideStep4Columns} pagination={false}/>
                </div>

                {
                    this.state.modalVisible && <RuleEditModal 
                    visible={this.state.modalVisible}
                    onCancel={() => this.setState({modalVisible: false})}
                    onSave={(params) => {this.handleSave(params)}}
                    /> 
                }
            </div>
        )
    }
}