import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { WeaSearchGroup, WeaSelect, WeaCheckbox, WeaFormItem, WeaHelpfulTip } from 'ecCom'
import { i18n } from '../../public/i18n';

//编号流水规则
@observer
export default class NumberFlowRule extends Component {
    render() {
        const { store: { numberFlowRuleStore } } = this.props

        return (
            <div className='numberFlowRule'>
                <WeaSearchGroup 
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@0i7014`} 
                    title={i18n.label.flowcodeRule()} 
                    showGroup 
                    center
                    children={
                        <FlowRuleSwitch ecId={`${this && this.props && this.props.ecId || ''}_FlowRuleSwitch@xe5mc9`} store={numberFlowRuleStore}/>
                    }
                />
            </div>
        );
    }
}

@observer
class FlowRuleSwitch extends Component {
    componentWillUnmount() {
        const { store: { closeSwitch } } = this.props
        closeSwitch()
    }

    render() {
        const { store: { flowRuleSwitchDatas } } = this.props
        return (
            <div>
                { flowRuleSwitchDatas.map( data => {
                    const { key, label, checked, options, value, onCheck, onSelect,helpfulTip } = data
                    return (
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@aa4zei@${key}`}
                            label={label}
                            ratio1to2
                        >
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@unl4ad@${key}`} display='switch' value={checked} onChange={val => onCheck(val,key)}/>
                            { (checked == '1' && options.length > 0 )&& <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@uomnx4@${key}`} detailtype='3' options={options} value={value} onChange={val => onSelect(val,key)}/>}
                            <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@ngkrvc@${key}`} title={helpfulTip} placement='bottomLeft'/>
                        </WeaFormItem>
                    )
                }) }
            </div>
        );
    }
}