import React from 'react';
import { Layout } from 'antd';
import { connect } from 'dva';
import ViewLayout from './viewLayout';
import ConfigSider from './configSider';
import FilterBar from './filterBar';

const { Header, Content, Sider } = Layout;

const isMobile = function() {
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)))
        return true;
    else
        return false;
};
const esMobile = isMobile();

class DashboardDesignerContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            contentSize: {
                scroll: false,
                width: 0,
                height: 0,
            },
        };
        this.contentRef=React.createRef();
    }

    componentDidMount() {
        this.refreshContentSize();
        window.addEventListener("resize", this.refreshContentSize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.refreshContentSize);
    }

    /**
     * 重设容器宽度
     */
    refreshContentSize = () => {
        let viewLayoutEl = this.contentRef.current;
        let viewContentEl = viewLayoutEl.getElementsByClassName('dashboard-viewcontent')[0];
        let _scroll = viewContentEl.scrollHeight > viewContentEl.clientHeight;
        let padding = 0;
        let width = viewContentEl.offsetWidth - padding * 2 - ( _scroll ? ( esMobile ? 4 : 10) : 2); // 有滚动条时需要减去滚动条的宽度
        let height = viewContentEl.offsetHeight - padding * 2;
        
        this.setState({
            contentSize: {
                width,
                height,
                _scroll
            },
        });
    }

    render() {
        const { dashboardDesigner, isOwner, isShareView, isShareKeyView, isViewMode, afterRefresh } = this.props;
        const { dataSources, editMode, filters, relationColumns } = dashboardDesigner;
        const { contentSize } = this.state;

        return <Layout className={`content${esMobile ? ' es-mobile' : ''}`}>
            <Content className={`dashboard-content${(isShareView || isShareKeyView || isViewMode) ? ' nomargin' : ''}`}>
                <Layout className='content-layout'>
                    {isOwner && editMode && !isShareView && !isShareKeyView && !isViewMode && <Sider className={`config-sider${ (isOwner && editMode) ? '' : ' config-sider-closed' }`} width={(isOwner && editMode && !isShareView && !isShareKeyView && !isViewMode) ? 200 : 0}>
                        <ConfigSider/>
                    </Sider>}
                    {/**
                        这里直接用main标签而不用antd组件是为了让ref能够定位到对应的dom元素
                    */}
                    <main ref={this.contentRef} className='viewlayout ant-layout-content'>
                        {(editMode || (filters && filters.length > 0) )&& <Header>
                            <FilterBar
                                filters={filters}
                                contentSize={contentSize}
                                esMobile={esMobile}
                                isOwner={isOwner}
                                editMode={editMode}
                                isShareView={isShareView}
                                isShareKeyView={isShareKeyView}
                                isViewMode={isViewMode}
                                afterRefresh={afterRefresh}
                                dataSources={dataSources}
                                relationColumns={relationColumns}
                            />
                        </Header>}
                        <ViewLayout isOwner={isOwner} isShareView={isShareView} isShareKeyView={isShareKeyView} isViewMode={isViewMode} contentSize={contentSize} editMode={editMode} esMobile={esMobile}/>
                    </main>
                </Layout>
            </Content>
        </Layout>
    }
}

export default connect(({ dashboardDesigner }) => ({ dashboardDesigner }))(DashboardDesignerContent);