import React from 'react'
import {Modal, Button, Icon } from 'antd'
import { WeaTextarea, WeaInput } from 'ecCom'
import { inject, observer } from 'mobx-react';
import ValidRuleEditModal from '../ledger/step5/ValidRuleEditModal';

@inject('salaryItemStore')
@observer
export default class FormalFormModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '',
            returnValue: ""
        }
        this.group = {};
        this.field = {};
        this.parameters = []
        this.referenceType = ""
    }

    componentWillMount() {
        const { salaryItemStore } = this.props;
        const { salaryAcctImportTemplateParam, setSearchFields, detailFormual } = salaryItemStore;
        setSearchFields([])
        if(this.props.formulaId) {
            detailFormual(this.props.formulaId).then(data => {
                this.setState({
                    value: data.formula
                })
                this.parameters = data.parameters
                this.referenceType = data.referenceType
                this.extendParam = data.extendParam
                if(this.extendParam && this.extendParam.length > 0) {
                    this.extendParam.replace("\'", "\"")
                    let extendParam = {}
                    try {
                        extendParam = JSON.parse(this.extendParam)
                    } catch (ex) {

                    }
                     
                    this.setState({
                        returnValue: extendParam.sqlReturnKey ? extendParam.sqlReturnKey : ""
                    })
                }
                let groupParams = {}
                if(this.referenceType == 'sql') {
                    groupParams = {'referenceType':'sql'}
                }
                salaryAcctImportTemplateParam(groupParams);
            })
        } else {
            let groupParams = {}
            if(this.props.valueType == "3") {
                groupParams = {'referenceType':'sql'}
            }
            salaryAcctImportTemplateParam(groupParams);
        }
    }

    // 多行文本编辑
    handleChange(value) {
        if(value && value.trim() == "") {
            this.parameters = []
        }
        this.setState({
            value
        })
        
    }

    // 获取光标位置
    getPositionForTextArea(ctrl) {
        let CaretPos = {
          start:0,
          end:0
        };
        if (ctrl.selectionStart) {// Firefox support
          CaretPos.start = ctrl.selectionStart;
        }
        if(ctrl.selectionEnd){
          CaretPos.end = ctrl.selectionEnd
        }
        return (CaretPos);
    }


    // 分组项被点击
    handleItemClick(item) {
        const { salaryItemStore } = this.props;
        const { formualSearchField } = salaryItemStore;
        this.group = item;
        let params = {}
        if(this.props.valueType == '3' || this.referenceType == "sql") {
            params = {
                extendParam: {
                    'referenceType':'sql'
                }
            }
        }
        formualSearchField(item.key, params)
    }

    // 保存
    handleSave() {
        const { salaryItemStore } = this.props;
        const { saveFormual } = salaryItemStore
        this.parameters = this.parameters.filter(item => this.state.value.indexOf(item.name) > -1)
        let params = {
            name:'公式1',
            description:'备注',
            module:'salary',
            useFor:'salaryitem',
            referenceType:'',
            returnType:'number',
            validateType:'number',
            extendParam:  this.state.returnValue &&  this.state.returnValue !== '' ? '{"sqlReturnKey":"'+this.state.returnValue+'"}' : "{}",
            formula: this.state.value,
            parameters: this.parameters,
            referenceType: this.referenceType == "" ? this.props.valueType == "2" ? "formula" : this.props.valueType == "3" ? "sql" : "" : this.referenceType
        }

        saveFormual(params).then(data => {
            this.props.onSaveFormal(data)
            this.props.onCancel()
        })
    }

    // 字段点击回调
    handleFieldClick(item) {
        this.field = item;
        let fieldName = "{"+this.group.value+"."+this.field.name+"}"
        
        let parameterItem = {
            name: item.name,
            fieldId: item.fieldId,
            fieldName: fieldName,
            fieldType: item.fieldType,
            source: item.source,
            orderIndex: this.parameters.length
        }
        this.parameters.push(parameterItem)
        this.setState({
            value: this.state.value + fieldName
        })
    }

    render() {
        const {salaryItemStore} = this.props;
        const { searchGroup, searchFields } = salaryItemStore
        const { value } = this.state;
        return (
            <Modal title="函数公式" visible={this.props.visible} 
            maskClosable={false}
            width={800} 
            footer={
                <Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>
            }
             onCancel={() => {this.props.onCancel()}}>
                 {
                    (this.props.valueType == "3" || this.referenceType == 'sql')  && <div style={{marginBottom: '10px', lineHeight: "30px"}}>
                    返回字段：<WeaInput style={{width: '150px'}} value={this.state.returnValue} onChange={(value) => {this.setState({returnValue: value})}} />
                    </div>
                }
                <div>
                    <WeaTextarea
                        ref={(input) => this.contentProps = input}
                        minRows={8}
                        maxRows={8}
                        value={value} onChange={(value) => this.handleChange(value)}
                        noResize={true}
                        style={{fontSize: "14px", lineHeight: 1.2}}
                    />
                </div>
                <div style={{display: "flex", height: "300px", marginTop: "10px" }}>
                    <div style={{flex: 1, height: "300px", overflowY: "scroll", padding: "10px", border: "1px solid rgb(217, 217, 217)", marginRight: '10px'}} >
                        <div>
                            <div style={{marginBottom: "10px", fontSize: "14px"}}>变量</div>
                            <div>
                                {
                                   searchGroup && searchGroup.map(item => {
                                       return <div style={{height: "25px", lineHeight: '25px', cursor: "pointer", overflow: "hidden"}} key={item.key} onClick={() => {this.handleItemClick(item)}}>
                                           {item.value}
                                            <Icon type="right" style={{float: "right", marginLeft: "10px", color: "#eee"}}/>
                                            <span style={{color: "#999", float: 'right'}}>{item.value} 的字段</span>
                                       </div>
                                   })
                                }
                            </div>
                        </div>
                    </div>
                    <div style={{flex: 1, height: "300px", overflowY: "scroll", border: "1px solid rgb(217, 217, 217)", padding: "10px"}}>
                            {
                               searchFields && searchFields.map(item => {
                                    return (
                                        <div style={{height: "25px", lineHeight: "25px", cursor: "pointer"}} key={item.fieldId} onClick={() => {this.handleFieldClick(item)}}>
                                            {item.name}
                                        </div>
                                    )
                                })
                            }
                    </div>
                </div>
               
            </Modal>
        )
    }
}