import React from "react";
import Layout from "../Layout";
import { Image, Row, Col, Divider, } from "antd";
import SolutiontHomeImg from '../static/web/org/bsns/17.jpg';
import {
    CheckCircleTwoTone,
} from '@ant-design/icons';
import { BtnTips, ColLeft, ColRight } from "./Product";
import ChartImg from '../static/web/solution/chart.png';
import './style/solution.less';

export const HeaderImg = () => <div className="prduct_container">
    <div className="prduct_background" />
    <Image
        src={SolutiontHomeImg}
        preview={false}
        width='100%'
        height='470px'
    />
    <div className="image_text">
        <div className="text_value" style={{ width: '32%' }}>
            <p>多类型解决方案一体化解决连锁行业经营难点</p>
            <p></p>
        </div>
    </div>
</div>

const Solution = () => {
    const advantageList = (name) => <Col span={5} className='advantage_detail'>
        <div className="advantage_detail_1"></div>
        <div className="advantage_detail_2">{name}</div>
        <Divider style={{
            borderColor: '#03BB7A',
            minWidth: "80%",
            width: '80%',
        }} />
        <div className="advantage_detail_3">
            {new Array(3).fill(null).map((_, i) => <p key={i}>
                <CheckCircleTwoTone twoToneColor='#58BE70' />
                <span>占位占位占位占位占位占位</span>
            </p>)}
        </div>
    </Col>

    return (<>
        <Layout>
            {<HeaderImg />}
            <div className="core_advantage">
                <Row justify='center'>
                    <span className="core_title">经营过程中的痛点</span>
                </Row>
                <Row justify='space-around'>
                    {advantageList('门店管理')}
                    {advantageList('人员管理')}
                    {advantageList('考勤管理')}
                    {advantageList('业绩人效')}
                </Row>
            </div>
            {BtnTips('解决方案')}
            <div className="chart_solution">
                <div className="title">图表化数据解决方案</div>
                <Row justify='space-around'>
                    <Image src={ChartImg} />
                    <Image src={ChartImg} />
                </Row>
            </div>
            <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>
        </Layout>
    </>)
};

export default Solution;