import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {WeaNewScroll, WeaFormItem, WeaSelect, WeaLocaleProvider} from 'ecCom';
import { i18n } from '../../public/i18n';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class CycleSetting extends Component{
    constructor(props){
        super(props);
        this.state = {
            options: [
                {
                    key: "1",
                    showname: getLabel('125899','继续排班'),
                    selected: true
                },
                {
                    key: "2",
                    showname: getLabel('125837','取消排班'),
                }
            ],
            value: '1',
        }
    }

    onClickHandle = serial => {
        const {store, target, date, record, hide } = this.props;
        const data = {
           serial,
           date
        }
        if(record != null)
            Object.assign(data, {
                resourceid: record.resourceid
            });
        store.onCycleClick([data], target, this.state.value === '1'); 
        hide && hide();
    }

    onSelectChangeHandle = (v, showname) => {
        this.setState({value: v})
        this.props.onSelectHandle && this.props.onSelectHandle();
    }

    render(){
        const {store, target ,onSelectHandle} = this.props;
        const {onSelectChangeHandle} = store;
        const serialInfo = store.toJS(store.serialInfo);
        let lbl;
        switch(target){
            case 'resource':
                lbl = <div className='tips text-elli' title={getLabel('500464','按周期排班当月班期')}>{getLabel('500465','当月排班')}</div>;
                break;
            default:
                lbl = <div className='tips text-elli' title={getLabel('500466','从该天开始周期排班至月底')}>{getLabel('500466','从该天开始周期排班至月底')}</div>;
                break;
        }

        return (
            <div className='tabPane tabPane-dialog'>
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@uaj9yv`} height={'100%'}>
                    <div className='daySetting'>
                        {lbl}
                        <div className='holiday'>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@f3f9vo`}
                                label={getLabel('500436','')}
                                labelCol={{span: 8}}
                                wrapperCol={{span: 16}}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@pbldpi`} {...this.state} onChange={this.onSelectChangeHandle}/>
                            </WeaFormItem>
                        </div>
                        <div className='holiday'>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7uph9o`} 
                                label={i18n.label[529182]()}
                                labelCol={{span: 8}}
                                wrapperCol={{span: 16}}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@xnsa7f`} options={this.state.options} onChange={val => {
                                    onSelectHandle && onSelectHandle()
                                    onSelectChangeHandle(val,'2')
                                }}/>
                            </WeaFormItem>
                        </div>
                        <div className='holiday'>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@aoulv1`} 
                                label={i18n.label[529183]()}
                                labelCol={{span: 8}}
                                wrapperCol={{span: 16}}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@cetuqm`}  options={this.state.options} onChange={val => {
                                    onSelectHandle && onSelectHandle()
                                    onSelectChangeHandle(val,'3')
                                }}/>
                            </WeaFormItem>
                        </div>
                        {
                            serialInfo.map(serial => <div className='item text-elli' title={serial.name} style={{background: serial.bgColor}} onClick={() => this.onClickHandle(serial.serial)}>{serial.name}</div>)
                        }
                    </div>
                </WeaNewScroll>
            </div>
        )
    }
}