import * as React from "react";
// import { Component } from "react";
import {
  Header,
  Footer,
  SideMenu,
  Carouseee,
  ProductCollection,
  Bussiness,
} from "../../components";
import styles from "./home.module.css";
import { productList1, productList2, productList3 } from "./mockups";
import sideImage1 from "../../assets/images/sider_2019_02-04-2.png";
import sideImage2 from "../../assets/images/sider_2019_02-04.png";
import sideImage3 from "../../assets/images/sider_2019_12-09.png";
import { Row, Col, Typography } from "antd";

export class HomePage extends React.Component {
  // constructor(props: HomePageProps) {
  //     super(props);
  //     this.state = { :  };
  // }
  render() {
    return (
      <>
        <Header />
        {/* 页面内容 */}
        <div className={styles["page-content"]}>
          <Row style={{ marginTop: 20 }}>
            <Col span={6}>
              <div>
                <SideMenu />
              </div>
            </Col>
            <Col span={18}>
              <div>
                <Carouseee />
              </div>
            </Col>
          </Row>

          <ProductCollection
            title={
              <Typography.Title level={3} type="warning">
                爆款推荐
              </Typography.Title>
            }
            sideImage={sideImage1}
            products={productList1}
          />
          <ProductCollection
            title={
              <Typography.Title level={3} type="danger">
                新品上市
              </Typography.Title>
            }
            sideImage={sideImage2}
            products={productList2}
          />
          <ProductCollection
            title={
              <Typography.Title level={3} type="success">
                国内游推荐
              </Typography.Title>
            }
            sideImage={sideImage3}
            products={productList3}
          />
          <Bussiness />
        </div>

        <Footer />
      </>
    );
  }
}