import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {WeaDatePicker, WeaAuth, WeaUpload, WeaLocaleProvider} from 'ecCom';
import {Button} from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Bar extends Component{
    render(){
        const {store} = this.props;
        const {searchDate, setSearchDate, getBatchShiftScheduleFrom, batchShiftScheduleFromParams, holidaySetting, importExcel, exportExcel, showHasNotAccount, showAll, multiDelete, multiDeleteSchedule} = store;
        return (
            <div className='btnBar'>
                <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@vh47xd`}
                    arrow
                    date={searchDate}
                    type="month"
                    style={{marginRight: 10}}
                    onChange={setSearchDate}
                    />
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tblcc7`} type='primary' onClick={holidaySetting}>{getLabel('505580', "节假日设置")}</Button>
                <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@bzsfj1`}
                    uploadUrl='/api/doc/upload/uploadFile'
                    category='string'
                    limitType='xls,xlsx'
                    maxFilesNumber={1}
                    onChange = {
                        (ids, list) => {
                            importExcel(ids[0]);
                        }
                    } >
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x08ajm`} type="primary">{getLabel('500461','导入排班')}</Button>
                </WeaUpload>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bygt0b`} type='primary' onClick={exportExcel}>{getLabel('500462','导出排班')}</Button>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qra8nt`} type='primary' disabled={multiDelete} onClick={multiDeleteSchedule}>{getLabel('500463','批量删除排班')}</Button>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9rd9ca`} type='primary' onClick={getBatchShiftScheduleFrom}>{getLabel('500473','批量排班')}</Button>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zlunbm`} size="small" style={{ height: '28px' }} onClick={showAll} title={showHasNotAccount ? getLabel('31504','显示无账号人员') : getLabel('500013','不显示无账号人员')}>
                    <span>
                    {
                        showHasNotAccount ?
                        <i className='icon-coms-ShowNoAccount' style={{ color: '#2DB7F5' }} /> 
                        : 
                        <i className='icon-coms-NoAccountNoDisplay' style={{ color: '#8A8A8A' }} />
                    }
                    </span>
                </Button>
                {
                    batchShiftScheduleFromParams.visible && <WeaAuth ecId={`${this && this.props && this.props.ecId || ''}_WeaAuth@ni8izr`} {...batchShiftScheduleFromParams} modalClassName='scheduleSetting-auth'/>
                }
            </div>
        )
    }
}