import React from 'react'
import { connect } from 'dva'
import { DatePicker, Input, Select } from 'antd'
import moment from 'moment'
import './index.less'
const { Option } = Select
const { RangePicker } = DatePicker

class ListFilter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fetch: false
        }
    }

    componentDidMount() {
        const { model } = this.props;
        const { filterItem } = model;
        filterItem.type === 'enum' && this.fetchData(filterItem);
    }

    generateFilterItem = () => {
        const { modelName, model, dispatch, onChangeFilterItem, onChangeFilterValue } = this.props;
        const { filterItems, filterItem } = model;

        return <Select 
            showArrow={filterItems.length > 1}
            disabled={filterItems.length === 1}
            value={filterItem.name}
            style={{ width: 100 }}
            onChange={value => {
                let item = filterItems.find(i => i.name === value);
                modelName && dispatch({ type: modelName + '/setFilterItem', item });
                if(typeof onChangeFilterItem === 'function') {
                    onChangeFilterItem(item)
                    onChangeFilterValue('');
                }
            }}
        >
            {filterItems.map(t => <Option key={t.name}  value={t.name}>{t.label}</Option>)}
        </Select>
    }

    generateFilterValue = () => {
        const { modelName, model, dispatch, onChangeFilterValue } = this.props;
        const { fetching } = this.state;
        const { filterItem, filterLabel } = model;
        const { type, name } = filterItem;

        if(type === 'date') {
            return <RangePicker  
                ranges={{
                    '今天': [moment().startOf('day'), moment().endOf('day')],
                    '本月': [moment().startOf('month'), moment().endOf('month')],
                    '上月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
                    '近半年': [moment().subtract(6, "months").startOf('day'), moment().endOf('day')],
                    '本年': [moment().startOf('year'), moment().endOf('year')],
                    '上年': [moment().subtract(1, "years").startOf('year'), moment().subtract(1, "years").endOf('year')],
                }}
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm:ss"
                onChange={e => {
                    //清空时间时
                    if(e.length === 0){
                        modelName && dispatch({ type: modelName + '/setFilterLabel', label: '' });
                        typeof onChangeFilterValue === 'function' && onChangeFilterValue('')
                    }
                }}
                onOk={e => {
                    //解析时间格式
                    let start = e[0]
                    let end = e[1]
                    let time = start._d.getTime() + "#" + end._d.getTime()
                    modelName && dispatch({ type: modelName + '/setFilterLabel', label: time });
                    typeof onChangeFilterValue === 'function' && onChangeFilterValue(time)

                }}
            >
            </RangePicker> 
        }else if(type === 'string') {
            return <Input
                style={{ width: 150 }}
                placeholder="请输入关键字"
                value={filterLabel}
                onChange={e => {
                    modelName && dispatch({ type: modelName + '/setFilterLabel', label: e.target.value });
                    typeof onChangeFilterValue === 'function' && onChangeFilterValue(e.target.value)
                }}
            />
        }else if(type === 'enum') {
            return <Select
                allowClear
                style={{ width: 150 }}
                value={model.filterLabel || null}
                loading={fetching}
                onChange={(value) => {
                    modelName && dispatch({ type: modelName + '/setFilterLabel', label: value ? value : '' });
                    typeof onChangeFilterValue === 'function' && onChangeFilterValue(value)
                }}
                onFocus={() => {
                    this.fetchData(filterItem)
                }}
            >
                {this.state['options-' + name] ? this.state['options-' + name].map(o => <Option key={o.name} value={o.name}>{o.label}</Option>) : null}
            </Select>
        }
    }

    fetchData = (filterItem) => {
        const { name, options } = filterItem;
        let list = this.state['options-' + name];
        if(!list || list.length === 0) {
            if(options instanceof Array) {
                let obj = {};
                obj['options-' + name] = options;
                this.setState(obj)
            }else if(typeof options === 'function') {
                this.setState({
                    fetching: true
                }, () => {
                    options().then(list => {
                        let obj = {
                            fetching: false
                        };
                        obj['options-' + name] = list;
                        this.setState(obj)
                    });
                });
            }
        }
    }

    render(){
        return <div className='list-filter'>
            {this.generateFilterItem()}
            {this.generateFilterValue()}
        </div>;
    }
}

export default connect()(ListFilter)