import React from 'react';
import { Row, Col, Button } from 'neatui';
import xhr from 'SERVICE/xhr';
import './index.scss';
import { success, error } from 'UTIL/notification';
import BaseComponent from 'COMPONENT/common/BaseComponent';
import { withRouter } from 'react-router-dom';
import projectConfig from 'CONFIG/projectConfig.json';

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

class Board 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.config = this.props.config;
        this.state = {
            loading: false,
            dataSource: {}
        };
    }

    componentDidMount() {
        this.fetchDataHandler();
    }

    parentToChildren = (params) => {
        this.fetchDataHandler(params);
    }

    fetchDataHandler = (params) => {
        const mine = this;
        const url = mine.config.basic[`${this.env}url`];
        xhr({
            url,
            method: mine.config.basic.method || 'get',
            data: {
                ...(mine.config.basic.fixedParameter || {}),
                ...(mine.props.searchForm || {}),
                ...(params || {})
            },
            contentType: mine.config.basic.contentType,
            notSwitchArrToStr: mine.config.basic.notSwitchArrToStr,
            type: 'json',
            complete: () => {
                mine.setState({
                    loading: false
                });
            }
        }).then((rs) => {
            if (rs[projectConfig.codeKey] === projectConfig.code) {
                mine.setState({
                    dataSource: rs.data
                });
            } else {
                error(rs[projectConfig.msg]);
            }
        });
    }

    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 content = this.config.basic.content ? this.config.basic.content : {
                "name": {
                    "label": ""
                },
                "mark": {
                    "label": ""
                },
                "value": {
                    "label": ""
                },
                "valueMark": {
                    "label": ""
                },
                "desc": {
                    "key": ""
                }
            };
        return (<div className="mb-10 board section" style={this.config.basic.style || {}}>
                    {
                        !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> : ''
                    }
                    <Row style={{ height: '100%' }}>
                        <Col size="24">
                            <Row style={{ height: '100%' }}>
                                {
                                    content.name.key || content.name.label ? <Col className="board-name" style={content.name.style || {}}>{(
                                    (content.name.template || '').indexOf('%{variable}') < 0 ?
                                    `${content.name.template || ''}%{variable}` : content.name.template
                                    ).replace('%{variable}', content.name.key ? this.state.dataSource[content.name.key] || '' : content.name.label || '')}</Col> : ''
                                }
                                {
                                    content.mark.key || content.mark.label ? <Col className="board-mark" style={content.mark.style || {}}>{(
                                    (content.mark.template || '').indexOf('%{variable}') < 0 ?
                                    `${content.mark.template || ''}%{variable}` : content.mark.template
                                    ).replace('%{variable}', content.mark.key ? this.state.dataSource[content.mark.key] || '' : content.mark.label || '')}</Col> : ''
                                }
                            </Row>
                        </Col>
                        <Col size="24">
                            <Row style={{ height: '100%' }}>
                                <Col>
                                    <Row>
                                        {
                                            content.valueMark.key || content.valueMark.label ? <Col className="board-valueMark" size="24" style={content.valueMark.style || {}}>{(
                                            (content.valueMark.template || '').indexOf('%{variable}') < 0 ?
                                            `${content.valueMark.template || ''}%{variable}` : content.valueMark.template
                                            ).replace('%{variable}', content.valueMark.key ? this.state.dataSource[content.valueMark.key] || '' : content.valueMark.label || '')}</Col> : ''
                                        }
                                        {
                                            content.value.key || content.value.label ? <Col className="board-value" size="24" style={content.value.style || {}}>{(
                                            (content.value.template || '').indexOf('%{variable}') < 0 ?
                                            `${content.value.template || ''}%{variable}` : content.value.template
                                            ).replace('%{variable}', content.value.key ? this.state.dataSource[content.value.key] || '' : content.value.label || '')}</Col> : ''
                                        }
                                    </Row>
                                </Col>
                                {
                                    content.desc.key || content.desc.label ? <Col className="board-desc" style={content.desc.style || {}}>{(
                                    (content.desc.template || '').indexOf('%{variable}') < 0 ?
                                    `${content.desc.template || ''}%{variable}` : content.desc.template
                                    ).replace('%{variable}', content.desc.key ? this.state.dataSource[content.desc.key] || '' : content.desc.label || '')}</Col> : ''
                                }
                            </Row>
                        </Col>
                    </Row>
                </div>);
    }
}

export default withRouter(Board);