import React, { useCallback, useEffect } from 'react';
import { Flex, Layout } from 'antd';
import HeaderLeft from '../complates/HeaderLeft'
import HeaderRight from '../complates/HeaderRight'
import Introduction from '../complates/Introduction'
import ProcessFlow from '../complates/ProcessFlow'
import Example from '../complates/Examples'
import CheckeredQuery from '../complates/CheckeredQuery'
import Contact from '../complates/Contact'
import Sidebar from '../complates/Sidebar'
import Compare from '../complates/Compare';

const { Header, Footer, Content } = Layout;
const headerStyle = {
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#fff',
    display: "flex",
    padding: "0 100px",
    justifyContent: "space-between",
    position: "fixed",
    width: '100%',
    zIndex: "100",
};

const contentStyle = {
    marginTop: 64,
    backgroundColor: '#fff',
};
const footerStyle = {
    padding: "100px 0px 0px"
};

const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '100%',
};
function Home() {
    const onResize = useCallback(() => {
        var wH = window.innerHeight; // 当前窗口的高度
        var wW = window.innerWidth; // 当前窗口的宽度
        var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
        var rem = wW * whdef;
        var html
        if (wW > 1400) {
            rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
            html = document.documentElement;
            html.style.fontSize = rem + "px"; //适用于PC网站
        }

        else {
            rem = 1400 * whdef;
            html = document.documentElement;
            html.style.fontSize = rem + "px";
        }
    }, [])

    useEffect(() => {
        window.addEventListener('resize', onResize);
        return (() => {
            window.removeEventListener('resize', onResize)
        })
    }, [])
    return (
        <Flex gap="middle" wrap>
            <Layout style={layoutStyle}>
                <Header style={headerStyle}>
                    <HeaderLeft />
                    <HeaderRight />
                </Header>
                <Content style={contentStyle}>
                    <div id="Introduction">
                        <Introduction />
                    </div>
                    <div id="ProcessFlow">
                        <ProcessFlow />
                    </div>
                    <div id="Example">
                        <Example />
                    </div>
                    <div id="CheckeredQuery">
                        <CheckeredQuery />
                    </div>
                    <div id="Compare">
                        <Compare />
                    </div>
                    <Sidebar />
                </Content>
                <Footer style={footerStyle}>
                    <div id="Contact">
                        <Contact />
                    </div>
                </Footer>
            </Layout>
        </Flex>
    );
}

export default Home;