import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {WeaCheckbox, WeaSelect, WeaBrowser, WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class DisplaySetting extends Component{
    render(){
        const {
			store
        } = this.props;
        const {shiftBrowserProps, setBrowser, storage, onSelectChangeHandle, onSelectAllChangeHandle, onBrowserChangeHandle} = store;
        const {displaySetting} = storage;
        const {groups, serial = []} = displaySetting || {};
        

        return (
            <div className='displaySetting'>
                {
                    (groups || []).map((group, i) => {
                        let {groupname, options, value} = group;
                        const isSelectAll = ((value || '').length == 0 ? false : (options.length == value.split(',').length));
                        let hasAttendanceSerial = false;
                        options = options.map((op, index) => {
                            if(op.key === 'attendanceSerial'){
                                const t = op.showname;
                                if(value.indexOf('attendanceSerial') > -1){
                                    hasAttendanceSerial = true;
                                    return {
                                        ...op,
                                        showname: (
                                            <span title={t}>
                                                <span>{t}</span>
                                                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@807ery@${index}`}
                                                    ref={dom => setBrowser(dom)}
                                                    {...shiftBrowserProps}
                                                    title={getLabel('24803','班次')}
                                                    inputStyle={{ width: 200 }}
                                                    onChange={onBrowserChangeHandle}
                                                    replaceDatas={serial}
                                                    >
                                                    <span style={{marginLeft: '10px', color: '#4D7AD8'}}>{getLabel('500494','选择显示班次')}</span>
                                                </WeaBrowser>
                                            </span>
                                        )
                                    }
                                }
                                return op;
                            }
                            return op;
                        })
                        return (
                            <div key={i}>
                                {
                                    groups.length > 1 && <div className='tbCell'>{groupname}</div>
                                }
                                <div className='tbCell'>
                                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@zunsci@${i}`} content={getLabel('556','全选')} onChange={v => onSelectAllChangeHandle(v, i)} value={isSelectAll} />
                                </div>
                                <div className='tbCell'>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2xjqui@${i}`} detailtype='2' options={options} value={value} onChange={v => onSelectChangeHandle(v, i, hasAttendanceSerial)} />
                                </div>
                            </div>
                        )
                    })
                }
			</div>
        )
    }
}