import React from 'react'
import { Modal, Row, Col, Button } from 'antd'
import { inject, observer } from 'mobx-react';
import { WeaCheckbox } from 'ecCom'

@inject('calculateStore')
@observer
export default class SelectFieldModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            fieldData: {}
        }
    }

    componentWillMount() {
        const {calculateStore: { getImportField } } = this.props;
        getImportField(this.props.id).then(data => {
            let fieldData = {};
            let formulaItems = []
            formulaItems = data.formulaItems
            if(this.props.fieldData.formulaItems) {
                formulaItems = this.props.fieldData.formulaItems
            }
            let inputItems = []
            inputItems = data.inputItems
            if(this.props.fieldData.inputItems) {
                inputItems = this.props.fieldData.inputItems
            }
            fieldData.formulaItems = formulaItems;
            fieldData.inputItems = inputItems;

            this.setState({
                fieldData
            })
            this.fieldData = fieldData
        })
    }

    // 公式项改变
    handleFormalChange(item, value, flag) {
        item.checked = value == 1 ? true: false
        let fieldData = {...this.state.fieldData}
        if(flag) { // 公式项
            fieldData.formulaItems.map(fieldItem => {
                if(item.salaryItemId == fieldItem.salaryItemId) {
                    fieldItem.checked = item.checked
                }
            })
        } else { // 输入项
            fieldData.inputItems.map(fieldItem => {
                if(item.salaryItemId == fieldItem.salaryItemId) {
                    fieldItem.checked = item.checked
                }
            })
        }
        this.setState({
            fieldData
        })
        this.fieldData = fieldData
    }

    // 添加按钮点击回调
    handleAddClick() {
        this.props.onAdd(this.fieldData)
        this.props.onCancel()
    }

    // 标题checkbox点击
    handleTitleCheckboxChange(value, flag) {
        let checked = value == 1 ? true: false
        let fieldData = {...this.state.fieldData}
        if(flag === 'formula') {
            fieldData.formulaItems.map(fieldItem => {
                fieldItem.checked = checked
            })
        } else if(flag === "input") {
            fieldData.inputItems.map(fieldItem => {
                fieldItem.checked = checked
            })
        }
        this.setState({
            fieldData
        })

        this.fieldData = fieldData;
    }

    // 只显示已选中
    showSelectedChange(value) {
        let checked = value == 1 ? true: false
        let fieldData = {...this.fieldData}
        if(checked) {
            if(fieldData.formulaItems) {
                fieldData.formulaItems = fieldData.formulaItems.filter(fieldItem => fieldItem.checked)
            }
            if(fieldData.inputItems) {
                fieldData.inputItems = fieldData.inputItems.filter(fieldItem => fieldItem.checked)
            }
        }

        this.setState({
            fieldData
        })
    } 



    render() {
        const { fieldData } = this.state;
        return (
            <Modal visible={this.props.visible} width={800} onCancel={() =>{this.props.onCancel()}}
                footer={null}
            >
                <div style={{height: "50px", lineHeight: "50px"}}>
                    <span style={{fontSize: "14px", fontWeight: "600"}}>添加表头字段</span>
                    <Button type="primary" style={{float: "right", marginRight: "50px"}} onClick={() => {this.handleAddClick()}}>添加</Button>
                </div>
                <div style={{marginTop: "20px"}}>
                    <div style={{height: "40px", lineHeight: "40px"}}>
                        <WeaCheckbox content="公式项" onChange={(value) => {this.handleTitleCheckboxChange(value, "formula")}}/>
                    </div>
                    <div style={{height: "100px", border: "1px solid #f2f2f2", margin: "10px", padding: "10px", overflowY: 'scroll'}}>
                        <Row>
                            { fieldData.formulaItems &&  fieldData.formulaItems.map(item => (
                                <Col span={6}><WeaCheckbox value={item.checked ? 1 : 0} content={item.salaryItemName} onChange={(value) => {
                                    this.handleFormalChange(item, value, true)
                                }}/></Col>
                            ))}
                        </Row>
                    </div>
                </div>

                <div style={{marginTop: "20px"}}>
                    <div style={{height: "50px", lineHeight: "50px"}}>
                        <WeaCheckbox content="输入项" onChange={(value) => {this.handleTitleCheckboxChange(value, "input")}}/>
                    </div>
                    <div style={{height: "100px", border: "1px solid #f2f2f2", margin: "10px", padding: "10px", overflowY: "scroll"}}>
                        <Row>
                            { fieldData.inputItems &&  fieldData.inputItems.map(item => (
                                <Col span={6}><WeaCheckbox value={item.checked ? 1 : 0} content={item.salaryItemName} onChange={(value) => {
                                    this.handleFormalChange(item, value, true)
                                }}/></Col>
                            ))}
                        </Row>
                    </div>
                </div>

                <div style={{marginTop: "20px"}}>
                    <WeaCheckbox content="只显示已选中" onChange={(value) => {this.showSelectedChange(value)}}/>
                </div>
            </Modal>
        )
    }
}