import React from 'react'
import ImportModal from '../../../../components/importModal'
import { Button } from 'antd'
import { inject, observer } from 'mobx-react';
import SelectFieldModal from './selectFieldModal';

@inject('calculateStore')
@observer
export default class AcctResultImportModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            modalParam: {
                salaryAcctRecordId: "",
                salaryItemIds: ""
            },
            step: 0,
            selectFieldVisible: false
        }
    }

    componentWillMount() {
        const { id } = this.props;
        let modalParam = { ...this.state.modalParam }
        modalParam.salaryAcctRecordId = id
        this.setState({
            modalParam
        })
    }

     // 获取模板
     handleAccResultTemplateLink() {
        const { calculateStore: { getImportTemplate }} = this.props;
        getImportTemplate(this.state.modalParam.salaryItemIds, this.state.modalParam.salaryAcctRecordId)
    }
    
    // 设置步骤
    setStep(step) {
        this.setState({step})
    }

    // 完成
    handleFinish() {
        this.setState({step: 0})
        this.props.onCancel()
        const { calculateStore: { acctResultList } } = this.props;
        acctResultList(this.props.id)
    }

    // 关闭
    handleCancel() {
        this.setState({
            modalVisiable: false,
            step: 0
        })
    }


     // 渲染第一步表单
     renderFormComponent() {
        return <Button onClick={() => {
            this.handleSelectedField()
        }}>请选择表单字段</Button>
    } 

    // 选择表单字段
    handleSelectedField() {
        this.setState({
            selectFieldVisible: true
        })
    }

    // 添加表头字段
    handleAdd(fieldDate) {
        let salaryItemIdsList = []
        fieldDate.formulaItems.map(item => {
            if(item.checked) {
                salaryItemIdsList.push(item.salaryItemId)
            }
        })

        fieldDate.inputItems.map(item => {
            if(item.checked) {
                salaryItemIdsList.push(item.salaryItemId)
            }
        })

        let salaryItemIds = ""
        if(salaryItemIdsList.length > 0) {
            salaryItemIds = salaryItemIdsList.join(",")
        }
        
        let modalParam = { ...this.state.modalParam }
        modalParam.salaryItemIds = salaryItemIds
        this.setState({
            modalParam
        })
        this.props.onAdd(fieldDate)
    }

    // 初始化Import数据
    handleImportModalInit() {
        const { calculateStore: {setPreviewAcctResultColumns, setPreviewAcctResultDataSource, setImportAcctResult}} = this.props;
        setPreviewAcctResultColumns([])
        setPreviewAcctResultDataSource([])
        setImportAcctResult({})
    }

    render() {
        const { calculateStore } = this.props;
        const { fetchPreviewAcctResult, previewAcctResultColumns, previewAcctResultDataSource, importAcctResult, fetchImportAcctResult } = calculateStore
        const { step, selectFieldVisible, modalParam } = this.state;
        const { visiable } = this.props;
        return (
            <div>
                {
                    visiable && <ImportModal 
                        init={() => {
                            this.handleImportModalInit();
                        }}
                        params={modalParam}
                        columns={previewAcctResultColumns}
                        step={step}
                        setStep={this.setStep.bind(this)}
                        slideDataSource={previewAcctResultDataSource}
                        importResult={importAcctResult}
                        onFinish={() => {
                            this.handleFinish()
                        }}
                        previewImport={(params) => {fetchPreviewAcctResult(params)}}
                        importFile={(params) => {fetchImportAcctResult(params)}}
                        templateLink={ () => { this.handleAccResultTemplateLink()}}
                        renderFormComponent={() => this.renderFormComponent()} 
                        visiable={visiable} 
                        onCancel={() => { this.props.onCancel() }} 
                    />
                }
                {
                    selectFieldVisible && <SelectFieldModal 
                        id={this.props.id}
                        visible={selectFieldVisible}
                        fieldData={this.props.fieldData}
                        onAdd={(fieldDate) => {
                            this.handleAdd(fieldDate)
                        }}
                        onCancel={() => {
                            this.setState({
                                selectFieldVisible: false
                            })
                        }}
                    />
                }
            </div>
        )
    }
}