import React from "react";
import Layout from "./Layout";
import { Image, Space, Row, Col, Button, Divider, Tabs, Carousel } from "antd";
import HomeImage from './static/web/home/home.jpg';
import {
  CheckCircleTwoTone, UserOutlined, AccountBookOutlined, CheckCircleOutlined,
  LineChartOutlined, PartitionOutlined, LeftCircleFilled, RightCircleFilled,
  AlertOutlined, BarsOutlined,
} from '@ant-design/icons';
import ComputerSrc from './static/web/home/computer.png';
import LogoSrc from "./static/web/home/logo.png";
import MoneySrc from './static/web/org/bsns/4.jpg';
import MeetingSrc8 from './static/web/org/bsns/8.jpg';
import MeetingSrc9 from './static/web/org/bsns/9.jpg';
import MeetingSrc10 from './static/web/org/bsns/10.jpg';
import MeetingSrc11 from './static/web/org/bsns/11.jpg';
import { useNavigate } from "react-router-dom";
import { ToForm } from "./component/Menu";
import "./App.less";

const style = {
  textAlign: 'center',
}
const items = [UserOutlined, AccountBookOutlined,
  CheckCircleOutlined, LineChartOutlined, PartitionOutlined]
  .map((Icon, i) => {
    const id = String(i + 1);
    return {
      label: (
        <span>
          <Icon style={{ color: '#58BE70' }} />
          功能名称
        </span>
      ),
      key: id,
      children: (
        <>
          <div className="requirement_title_name">
            名称占位占位
          </div>
          <Row>
            <Col span={12}>
              <p>功能介绍占位功能介绍占位功能介绍占位功能介绍占位功能介绍占位功能介绍占位功能介绍占位功能介绍占位功能介绍占位功能介绍占位功能介绍占位功能介绍占位功能介绍占位</p>
              <div className="requirement_more">
                <Button>查看更多</Button>
                <ToForm />
              </div>
            </Col>
            <Col span={12}>
              <Image src={ComputerSrc} width={520} height={230} preview={false} />
            </Col>
          </Row>
        </>
      ),
    };
  });
const image_items = new Array(5).fill(null);
const getItem = (index) => {
  return image_items.map((_, i) => (
    <Col key={i} span={4} offset={i === 0 ? 0 : 1} className='choice_img_item'>
      <Image preview={false} src={LogoSrc} />
    </Col>
  ))
};
const CarouselItem = image_items.map((_, index) => (
  <div key={index}>
    <Row justify='space-around'>
      {getItem(index)}
    </Row>
  </div>
));
const ImgList = (props) => <Col span={7}>
  <Image src={MoneySrc} width={'100%'} height={200} preview={false} />
  <div className="choice_radius">
    <img className="mdsrc" src={LogoSrc} alt="" />
  </div>
  <div className="choice_us_detail">
    <p>墨刀</p>
    <p>案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位案例占位</p>
    <Button size='large' onClick={props.onClick}>查看更多</Button>
  </div>
</Col>
export const ImgMap = (props) => <Row className="choice_us" style={{ width: '80%', margin: '0 auto' }} justify='space-between'>
  <ImgList onClick={props.onClick} />
  <ImgList onClick={props.onClick} />
  <ImgList onClick={props.onClick} />
</Row>
export const FootImg = () => <div className="foot_img">
  <Image preview={false} src={MeetingSrc10} />
  <div className="foot_background">
    <div className="foot_text">
      <p>为企业量身定做的管理软件</p>
      <p>已有<span>1700</span>人获取专属定制方案</p>
    </div>
    <ToForm />
  </div>
</div>
export const AdvantageTitle = () => <Row
  className="home_advantage"
  justify='space-around'
>
  <Col span={4} style={style}>
    <Space direction="vertical">
      <h2>20年</h2>
      <p>核心团队行业深耕近</p>
    </Space>
  </Col>
  <Col span={4} style={style}>
    <Space direction="vertical">
      <h2>100万</h2>
      <p>服务用户累计</p>
    </Space>
  </Col>
  <Col span={4} style={style}>
    <Space direction="vertical">
      <h2>500人</h2>
      <p>双研发中心团队人数</p>
    </Space>
  </Col>
  <Col span={4} style={style}>
    <Space direction="vertical">
      <h2>106%</h2>
      <p>年续费率高达</p>
    </Space>
  </Col>
</Row>

const App = () => {
  const navigator = useNavigate();
  const ToDetail = (value) => {
    navigator('/case/detail', { state: value });
  }
  const SlickButtonFix = ({ currentSlide, slideCount, children, ...props }) => (
    <span {...props}>{children}</span>
  );
  const MoreButton = (name) => (
    <div className="core_more">
      <Button>查看更多</Button>
      <ToForm />
    </div>
  );
  const AdvantageList = [
    { icon: <BarsOutlined className="advantage_detail_1" rotate={180} />, title: '功能全面 业务流程全覆盖' },
    { icon: <AlertOutlined className="advantage_detail_1" />, title: '开放兼容，多软件互联' },
    { icon: <UserOutlined className="advantage_detail_1" />, title: '24小时售后服务' },
  ]
  return (<>
    <Layout>
      <div className="home_container">
        <div className="home_background" />
        <Image
          src={HomeImage}
          preview={false}
          width='100%'
          height='470px'
        />
        <div className="image_text">
          <Row>
            <Col span={22} offset={2}>
              <Space
                direction="vertical"
                size='small'
              >
                <h1>一体化sass管理软件</h1>
                <p>功能全面</p>
                <p>覆盖管理全流程</p>
                <p>连接HR、财务、业务、库存消除信息</p>
                <p>轻量化快速部署</p>
                <p>即买即用</p>
                <ToForm className='free_try' />
              </Space>
            </Col>
          </Row>
        </div>
      </div>
      <AdvantageTitle />
      <div className="core_advantage">
        <Row justify='center'>
          <span className="core_title">核心优势</span>
        </Row>
        <Row justify='space-around'>
          {new Array(3).fill(null).map((_, i) =>
            <Col span={6} className='advantage_detail' key={i}>
              {AdvantageList[i].icon}
              <div className="advantage_detail_2">{AdvantageList[i].title}</div>
              <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 className="core_more">
          <Button>查看更多</Button>
          <ToForm />
        </div>
      </div>
      <div className="core_requirement">
        <div className="requirement_title" style={{ magin: 0, padding: '50px auto' }}>满足经营管理核心需求</div>
        <div className="card-container">
          <Tabs type="card" items={items} />
        </div>
      </div>
      <div className="solution">
        <p>满足多种行业的解决方案</p>
        <div className="solution_contain">
          <Tabs type="card"
            items={new Array(7).fill(null).map((_, i) => {
              const id = String(i + 1);
              return {
                label: `行业名称`,
                key: id,
                children: <>
                  <div className="industry_detail">
                    <p>制造/化工/能源</p>
                    <p>行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位行业占位</p>
                    <div className="industry_more">
                      <Button>查看更多</Button>
                      <ToForm />
                    </div>
                    <p>相关案例</p>
                    <Space size='large'>
                      {new Array(4).fill(null).map((_, i) => (
                        <Image key={i} width={150} preview={false} height={91} src={LogoSrc} />
                      ))}
                    </Space>
                  </div>
                </>,
              };
            })}
            tabPosition='left' />
        </div>
      </div>
      <div className="choice_container">
        <div className="requirement_title" style={{ marginTop: 0 }}>都有他们选择了我们</div>
        <ImgMap onClick={() => ToDetail(Math.floor(Math.random() * 20) + 1)} />
        <Row justify='center' className="choice_img">
          <Col span={20}>
            <Carousel arrows={true}
              prevArrow={<SlickButtonFix>
                <LeftCircleFilled />
              </SlickButtonFix>}
              nextArrow={<SlickButtonFix>
                <RightCircleFilled />
              </SlickButtonFix>}
              dots={false}>
              {CarouselItem}
            </Carousel>
          </Col>
        </Row>
        {MoreButton()}
        <div className="new_title">新闻资讯</div>
        <Row className="news_container">
          <Col span={12}>
            <div className="news_left_title">媒体报道</div>
            <Carousel autoplay dots={false}>
              <div> <Image src={MeetingSrc8} preview={false} className="news_left_img" /></div>
              <div> <Image src={MeetingSrc9} preview={false} className="news_left_img" /></div>
              <div> <Image src={MeetingSrc10} preview={false} className="news_left_img" /></div>
              <div> <Image src={MeetingSrc11} preview={false} className="news_left_img" /></div>
            </Carousel>
          </Col>
          <Col span={11} offset={1}>
            <div className="news_right_title">
              <span>产品动态</span>
              <span>查看更多</span>
            </div>
            {new Array(5).fill(null).map((_, i) => (
              <div className="new_right_content" key={i}>
                <span>更新迭代</span>
                <span>01-10</span>
              </div>
            ))}
            <Divider style={{
              margin: '9px 0',
              borderTop: '3px solid #58BE70',
            }} />
            <div className="news_right_title">
              <span>新闻动态</span>
              <span>查看更多</span>
            </div>
            {new Array(5).fill(null).map((_, i) => (
              <div className="new_right_content" key={i}>
                <span>更新迭代</span>
                <span>01-10</span>
              </div>
            ))}
          </Col>
        </Row>
        {MoreButton()}
      </div>
      <FootImg />
    </Layout>
  </>)
}

export default App;