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

const DateTabItem = props => {
    const {store, tabInfo, idx} = props;
    const {selectedDateTabKey, getData} = store;

    const onClickHandle = () => {
        store.selectedDateTabKey = tabInfo.key;
        const current = new moment();
        switch(tabInfo.key){
            case '0':
                store.selectedDate = current.format('YYYY-MM-DD');
                break;
            case '1':
                store.selectedDate = current.subtract(1, 'days').format('YYYY-MM-DD');
                break;
            case '2':
                store.selectedDate = current.format('YYYY-MM');
                break;
        }
        getData();
    }

    return (
        <div key={idx} className={`item ${selectedDateTabKey == tabInfo.key ? 'active' : ''}`} 
            onClick={onClickHandle}>
            {tabInfo.title}
        </div>
    )
}

@observer
export default class SearchBar extends Component{
    onTabChangeHandle = key => {
        
    }

    onCheckBoxChangeHandle = v => {
        const {store} = this.props;
        store.showSignInfo = (v == 1);
    }

    onRefreshHandle = () => this.props.store.getData(true);

    render(){
        const {store} = this.props;
        const {dateTabDatas, selectedDateTabKey, showSignInfo, datePickerProps} = store;

        return (
            <div className='searchBar'>
                {
                    dateTabDatas && dateTabDatas.map((t, i) => {
                        const comProps = {tabInfo: t, idx: i};
                        return (
                            <DateTabItem ecId={`${this && this.props && this.props.ecId || ''}_DateTabItem@tws6np@${i}`} {...this.props} {...comProps} />
                        )
                    })
                }
                <div className='item'>
                    <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@kplf0z`} {...datePickerProps} />
                    <i className="icon-coms-Refresh cursor-pointer refresh" onClick={this.onRefreshHandle} />
                </div>
                <div className='item'>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@8xdsyt`} onChange={this.onCheckBoxChangeHandle} value={showSignInfo ? 1 : 0} content={getLabel('516948', '显示移动端考勤记录')} />
                </div>
            </div>
        )
    }
}