import React from "react";
import Layout from "../Layout";
import { Image, Row, Col, Divider, Button, Space } from "antd";
import ProductHomeImg from '../static/web/org/bsns/18.jpg';
import ProductFooterImg from '../static/web/org/bsns/3.jpg';
import {
    CheckCircleTwoTone,
    BarsOutlined,
    AppstoreOutlined,
    ShoppingOutlined,
    MenuOutlined,
} from '@ant-design/icons';
import ComputerImg from '../static/web/home/computer.png';
import { ToForm } from "./Menu";
import styled from 'styled-components';
import './style/product.less';

// 自定义样式组件
const MyDivider = styled.div`
  position: relative;
`;

const LeftLine = styled.div`
  position: absolute;
  height: 1px;
  width: calc(60%); 
  background-color: #fff; 
  top: 50%;
  right: 100%;
  margin-right:8px;
  transform-origin: right center;
  transform: rotate(-20deg); 
`;
const RightLine = styled.div`
position: absolute;
height: 1px;
width: calc(60%); 
background-color: #fff; 
top: 50%;
right: 100%;
margin-right:8px;
transform-origin: right center;
transform: rotate(20deg); 
`;

export const BtnTips = (title) => <div className="software_container">
    <div className="software_bcg">
        <div className="title">
            {title}
        </div>
        <div className="btn">
            <Row justify='space-between' style={{ alignItems: 'center', height: '100%' }}>
                <Col span={4}>
                    <Button type="primary" size="largre" className="divider_left">
                        主功能1
                    </Button>
                </Col>
                <Col span={4}>
                    <Space direction="vertical" size='large'>
                        <MyDivider>
                            <LeftLine />
                            <Button type="primary" size="largre">
                                主功能1
                            </Button>
                        </MyDivider>
                        <MyDivider>
                            <RightLine />
                            <Button type="primary" size="largre">主功能1</Button>
                        </MyDivider>
                    </Space>
                </Col>
                <Col span={4}>
                    <Space direction="vertical" size='large'>
                        <Button type="primary" size="largre">主功能1</Button>
                        <Button type="primary" size="largre">主功能1</Button>
                        <Button type="primary" size="largre">主功能1</Button>
                        <Button type="primary" size="largre">主功能1</Button>
                    </Space>
                </Col>
                <Col span={4}>
                    <Space direction="vertical" size='large'>
                        <Button type="primary" size="largre">主功能1</Button>
                        <Button type="primary" size="largre">主功能1</Button>
                        <Button type="primary" size="largre">主功能1</Button>
                        <Button type="primary" size="largre">主功能1</Button>
                        <Button type="primary" size="largre">主功能1</Button>
                    </Space>
                </Col>
            </Row>
        </div>
    </div>
</div>
export const ColLeft = () => <Col span={11}>
    <Image src={ComputerImg} preview={false} />
</Col>;
export const ColRight = () => <Col span={11} offset={2}>
    <Space direction="vertical" className='core_right'>
        <div className="title">功能名称</div>
        <Divider />
        <p>占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位</p>
        <p>占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位</p>
        <p>占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位</p>
        <ToForm />
    </Space>
</Col>;
export const SafeFooter = () => <div className="prduct_container">
    <div className="prduct_background" />
    <Image
        src={ProductFooterImg}
        preview={false}
        width='100%'
        height='470px'
    />
    <div className="image_text">
        <Row justify='space-around'>
            <Col className="left_text">
                <Space direction="vertical">
                    <p>安全可靠权威</p>
                    <p>多重保障体系，全面守护您的信息安全</p>
                    <span>ISO27001权威认证</span>
                    <span>银行级别AES256加密技术保存</span>
                    <span>信息安全管理体系认证</span>
                    <span>信息系统安全公安局三级备案</span>
                    <span>24小时实时监控预警</span>
                </Space>
            </Col>
            <Col className='right_text'>
                <span>安全可靠权威</span>
                <span>客户成功助力</span>
                <span>20年行业背书</span>
            </Col>
        </Row>
    </div>
</div>
const LightList = [
    <BarsOutlined className="advantage_detail_1" />,
    <AppstoreOutlined className="advantage_detail_1" />,
    <ShoppingOutlined className="advantage_detail_1" />,
    <MenuOutlined className="advantage_detail_1" rotate={90} />,
]

const ProductHome = () => {
    return (<>
        <Layout>
            <div className="main">
                <div className="prduct_container">
                    <div className="prduct_background" />
                    <Image
                        src={ProductHomeImg}
                        preview={false}
                        width='100%'
                        height='470px'
                    />
                    <div className="image_text">
                        <div className="text_value">
                            <div>
                                <p>功能全面覆盖HR全业务流程</p>
                                <p>基于全新互联网技术打造一站式人力资源管理软件,以大数据、云计算等技术为核心能力,通过sass软件进行前端标准化或定制化展现,后端开放、数据融合,协助企业打造一体化、敏捷化、轻量化的人力资源管理系统,助力企业人力资源管理标准化、智能化、数据化!</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="lightspot_container">
                    <div className="light_title">产品亮点</div>
                    <Row style={{ marginBottom: 80 }} justify='space-around'>
                        {new Array(4).fill(null).map((_, i) =>
                            <Col span={4} className='advantage_detail' key={i}>
                                {LightList[i]}
                                <Divider style={{
                                    borderColor: '#03BB7A',
                                    minWidth: "80%",
                                    width: '80%',
                                }} />
                                <div className="advantage_detail_3">
                                    <p>
                                        <CheckCircleTwoTone twoToneColor='#58BE70' />
                                        <span>占位占位占位占位占位占位</span>
                                    </p>
                                    <p>
                                        <CheckCircleTwoTone twoToneColor='#58BE70' />
                                        <span>占位占位占位占位占位占位</span>
                                    </p>
                                    <p>
                                        <CheckCircleTwoTone twoToneColor='#58BE70' />
                                        <span>占位占位占位占位占位占位</span>
                                    </p>
                                </div>
                            </Col>
                        )}
                    </Row>
                </div>
                {BtnTips('全新智能化管理软件')}
                <div className="core_function">
                    <div className="core_title">六大核心功能打造一体化管理软件</div>
                    {new Array(6).fill(null).map((_, i) => {
                        if (i % 2 === 0) {
                            return <div key={i} style={{ backgroundColor: '#fff' }}>
                                <div className="core_container">
                                    <Row>
                                        <ColLeft />
                                        <ColRight />
                                    </Row>
                                </div>
                            </div>
                        } else {
                            return <div className="core_container" key={i}>
                                <Row>
                                    <ColRight />
                                    <ColLeft />
                                </Row>
                            </div>
                        }
                    })}
                </div>
                <SafeFooter />
            </div>
        </Layout>
    </>)
};

export default ProductHome;