import {
    WeaError,
    WeaTimePicker,
    WeaInputNumber,
    WeaSelect,
} from 'ecCom'
import { i18n } from '../../public/i18n';

export default class OvertimeRule extends React.Component {
    render() {
        const {
            datas,
            onChange,
            groupType,
            ruleType,
            onAdd,
            onDel,
            onRef,
            rowConfigs,
            startDelIndex,
            className,
            width = 400,
            hasBtn = true,
            onBlur,
            errorTip = i18n.label['528763']()
        } = this.props

        return (
            <div className={`overtimeCompensation ${className}`} style={{width}}>
                {datas.map( (data,index) => {
                    return (
                        <p>
                            {rowConfigs.map(c => {
                                const {label,key} = c
                                const value = data[key]

                                if (label) {
                                    return <span>{label}</span>
                                }else{
                                    if ([ 'time','startTime','endTime'].includes(key) ) {
                                        return (
                                            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@g9yk4m@${index}`} 
                                               tipPosition='bottom'
                                               ref={ref => onRef(ref,index,groupType)}
                                               error={data.errorTip || errorTip}
                                               className='overtimeError'
                                            >
                                                <WeaTimePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaTimePicker@7r87bg@${index}`} value={value} disabled={data.disabled} onBlur={val => onBlur(val,index,key,groupType,ruleType)} onChange={val => onChange(val,index,key,groupType,ruleType)} viewAttr={data.viewAttr ? data.viewAttr : '3'}/>
                                            </WeaError>
                                        )
                                    }
                                    if ([ 'work','overtime'].includes(key) ) {
                                         return (
                                            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@5r5w3n@${index}`} 
                                               tipPosition='bottom'
                                               ref={ref => onRef(ref,index,groupType)}
                                               error={data.errorTip || errorTip}
                                               className='overtimeError'
                                            >
                                              <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@8njdes@${index}`} value={value} disabled={data.disabled} onBlur={val => onBlur(val,index,key,groupType,ruleType)} onChange={val => onChange(val,index,key,groupType,ruleType)} min={0} precision={2} viewAttr={3}/>
                                            </WeaError>
                                        )
                                    }
                                    if ([ 'startType','endType'].includes(key) ) {
                                        const options = [
                                            {
                                                key: "0",
                                                selected: false,
                                                showname: "今日"
                                              },
                                              {
                                                key: "1",
                                                selected: false,
                                                showname: "次日"
                                              },
                                        ];
                                        return (
                                            <WeaSelect 
                                                options={options}
                                                value={value} 
                                                disabled={data.disabled} 
                                                style={{ width: 60 }}
                                                onChange={val => onChange(val,index,key,groupType,ruleType)}
                                            />
                                        )
                                    }
                                    return (
                                        <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@wjwedz@${index}`} 
                                           tipPosition='bottom'
                                           ref={ref => onRef(ref,index,ruleType)}
                                           error={data.errorTip || errorTip}
                                           className='overtimeError'
                                        >
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@02ctex@${index}`} value={value} disabled={data.disabled} onBlur={val => onBlur(val,index,key,groupType,ruleType)} onChange={val => onChange(val,index,key,groupType,ruleType)} min={0} precision={2}  viewAttr={3}/>
                                        </WeaError>
                                    )
                                }
                            })}
                            {
                                (index >= startDelIndex && datas.length > 1 && hasBtn ) && <span className='del' onClick={() => onDel(index, groupType,ruleType)}>{i18n.label.delete()}</span> 
                            }                           
                        </p>
                    )
                })}
                {
                    hasBtn && (
                        <span>
                            <i className="icon-coms-Add-to-o" />
                            <span onClick={() => onAdd(groupType,ruleType)}>{i18n.label['388877']()}</span>
                        </span>
                    )
                }
                
            </div>
        );
    }
}