import React from 'react';
import { Row, Col } from 'neatui';
import { Button, Timeline as AntdTimeline } from 'antd';
import xhr from 'SERVICE/xhr';
import './index.scss';
import BaseComponent from 'COMPONENT/common/BaseComponent';
import { withRouter } from 'react-router-dom';
import { success, error } from 'UTIL/notification';
import { isArray, getSearchParams, parseData2Url, parseFixedParameter } from 'UTIL/util';
import SearchBar from 'COMPONENT/container/SearchBar';
import moment from 'moment';
import 'moment/locale/zh-cn';
import projectConfig from 'CONFIG/projectConfig.json';

moment.locale('zh-cn');

const localHost = projectConfig.localhost || [];
localHost.push('localhost');

class Timeline extends BaseComponent {
    constructor(props, context) {
        super(props, context);
        this.env = localHost.indexOf(window.location.hostname) > -1 ? 'local.' : '';
        const { getInstance } = props;
        if (typeof getInstance === 'function') {
            getInstance(this);
        }
        this.searchParams = getSearchParams();
        this.config = this.props.config;
        this.notInit = (this.config.basic && this.config.basic.notInit) || false;
        this.state = {
            searchForm: {},
            detailData: [],
            p2c: false
        };
    }

    componentDidMount() {
        if (!this.state.p2c && !this.notInit) this.fetchDataHandler();
    }

    parentToChildren = (params) => {
        this.setState({
            p2c: true
        }, () => {
            this.fetchDataHandler(JSON.parse(JSON.stringify(params || {})));
        });
    }

    resetHandler = () => {
        this.setState({
            detailData: [],
            p2c: false
        });
    }

    getSearchData = (url, params) => {
        const mine = this;
        const { searchForm } = mine.props;
        
        let searchParams = mine.searchParams || {};
        if (mine.config.basic.isNeedLocationSearch && isArray(mine.config.basic.isNeedLocationSearch)) {
            searchParams = {};
            for (let i = 0; i < mine.config.basic.isNeedLocationSearch.length; i+=1) {
                const key = mine.config.basic.isNeedLocationSearch[i];
                searchParams[key] = mine.searchParams[key];
            }
        }
        return parseData2Url({
                ...parseFixedParameter(mine.config.fixedParameter),
                ...parseFixedParameter(mine.config.basic.fixedParameter),
                ...searchParams,
                ...searchForm,
                ...mine.state.searchForm,
                ...(params || {})
            }, url, mine.config.basic.accept, mine.config.basic.urlParams);
    }

    fetchDataHandler = (params) => {
        const mine = this;
        const { data, url } = mine.getSearchData(mine.config.basic[`${this.env}url`], params);
		if (url) {
			xhr({
				url,
				method: mine.config.basic.method || 'get',
				data,
				type: 'json',
			    contentType: mine.config.basic.contentType,
                notSwitchArrToStr: mine.config.basic.notSwitchArrToStr
			}).then((rs) => {
				if (rs[projectConfig.codeKey] === projectConfig.code) {
                    let detailData = [];
                    if (mine.config.basic.list) detailData = rs.data[mine.config.basic.list] || [];
                    else detailData = rs.data || [];
                    mine.setState({
                        detailData
                    });
				} else {
					error(rs[projectConfig.msg]);
				}
			});
		}
    };

    exportDataHandler = () => {
        const mine = this;
        const { type, method='get' } = mine.config.export;
        const { data, url } = mine.getSearchData(mine.config.export[`${this.env}url`], {});
        if (type === 'attachment') {
            const searchFormArr = [];
            Object.keys(data).forEach((key) => {
                searchFormArr.push(`${key}=${data[key]}`);
            });
            if (method === 'get' || method === 'GET') {
                window.open(`${url}?${searchFormArr.join('&')}`)
            } else {
                $.ajax({
                    url,
                    method,
                    data,
                    type: 'json',
                    success: (response, status, request) => {
                        if (response.code === 400) {
                            error(response[projectConfig.msg]);
                        } else {
                            const disp = request.getResponseHeader('Content-Disposition');
                            if (disp && disp.search('attachment') !== -1) {
                                const formStr = searchFormArr.join('&');
                                const form = $(`<form method="POST" action="${url}?${formStr}">`);
                                form.append($('<input type="hidden" name="filename">'));
                                $('body').append(form);
                                form.submit();
                            }
                        }
                    }
                });
            }
        }
    }

    switchData = (data, config) => {
        if (typeof(config) === 'string') {
            return data[config];
        }
        if (config.switchtype === 'timestamp') {
            if (data[config.key]) return moment(data[config.key]).format(config.format || 'YYYY-MM-DD HH:mm:ss');
        }
        return data[config.key];
    }

    parseData = (source, config) => {
        const { template, rules, ruleundefind } = (config || {});
        let temStr = template || '';
        for (let i = 0; i < (rules || []).length; i += 1) {
            let srcStr = '';
            if (typeof(rules[i]) === 'string') {
                srcStr = source[rules[i]] || ruleundefind;
            } else {
                srcStr = source[rules[i].key];
                if (rules[i].switchtype === 'timestamp') {
                    srcStr = srcStr ? moment(srcStr).format(rules[i].format || 'YYYY-MM-DD HH:mm:ss') : ruleundefind;
                }
            }
            temStr = temStr.replace('#{key}', srcStr);
        }
        return temStr;
    };

    getDetailContent = () => {
        const mine = this;
        const { detailData = [] } = mine.state;
        const { line, mode } = mine.config.basic;
        return (<AntdTimeline mode={mode}>
            {
                detailData.map(item => <AntdTimeline.Item label={ this.switchData(item, line.label) } color={ item[line.color] }>
                    { this.parseData(item, line) }
                </AntdTimeline.Item>)
            }
        </AntdTimeline>);
    }

    switchJsOrJson = (data) => {
        xhr({
            url: '/local/api/switchJsOrJson',
            method: 'post',
            data,
            type: 'json'
        }).then((rs) => {
            if (rs[projectConfig.codeKey] === projectConfig.code) {
                success('格式转换成功!');
            } else {
                error(rs[projectConfig.msg]);
            }
        });
    }
    
    render() {
        const { detailData } = this.state;
        return (
            <Row className="mb-10 detail-list">
                <Col>
                    <div className={this.config.nbg ? '' : 'section'}>
                        {
                            !this.props.notModify && this.env === 'local.' ? <Button
                                variant="contained" color="info"
                                size="small"
                                style={{"height": "auto", "float": "right"}}
                                onClick={() => {
                                    this.switchJsOrJson({
                                        path: this.props.path,
                                        uuid: this.config.uuid
                                    })
                                }}>toJS</Button> : ''
                        }
                        <div className="tool-bar">
                            {
                                this.config.filter && this.config.filter.length > 0 ? <SearchBar
                                    filter={this.config.filter || []}
                                    search={this.fetchDataHandler}
                                    searchFormData={this.state.searchForm}
                                ></SearchBar> : ''
                            }
                        </div>
                        {
                            (this.config.name || this.config.export) ? <div className="table-action" style={{
                                height: '54px',
                                lineHeight: '54px',
                                padding: '0 5px'
                            }}>
                                {
                                    this.config.name ? <span style={{fontSize: 16, fontWeight: 'bold'}}>{ this.config.name }</span> : ''
                                }
                                {
                                    this.config.name && this.config.description ? <span style={{ marginLeft: 12 }}>({ this.config.description })</span> : ''
                                }
                                {
                                    this.config.export && detailData.length > 0 ? <Button
                                        variant="contained" color={this.config.export.primary || 'primary'}
                                        onClick={this.exportDataHandler}
                                        style={{ float: 'right', marginLeft: '10px', marginRight: '10px' }}
                                    >导出数据</Button> : ''
                                }
                            </div> : ''
                        }
                        { this.getDetailContent() }
                    </div>
                </Col>
            </Row>
        );
    }
}

export default withRouter(Timeline);