/* eslint-disable import/no-anonymous-default-export */
import { React, useState } from 'react';
import { Row, Col, Carousel, Grid } from 'antd';
import './index.css';

const colc = { xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 },
  col = { xs: 24, sm: 24, md: 24, lg: 8, xl: 7, xxl: 6 },
  cold = { xs: 24, sm: 24, md: 12, lg: 8, xl: 8, xxl: 8 },
  cols = { xs: 24, sm: 24, md: 24, lg: 16, xl: 17, xxl: 18 };

function spArr(arr, num) {
  let newArr = [];
  for (let i = 0; i < arr.length; ) {
    newArr.push(arr.slice(i, (i += num)));
  }
  return newArr;
}
const { useBreakpoint } = Grid;

const arrs = [
    {
      title: '图文档生命周期管理',
      desc: '企业研发、生产、制造等过程中所产生的各类型二维、三维机械结构图纸、工艺图纸、模具图纸，以及电子设计EDA的原理图和封装图、嵌入式的程序代码等文件都能在PLM中统一分类组织、共享、使用和采用文控体系要求的规则进行管理，被授予权限的用户可以方便地查阅、借用、修改、发布、归档这些文档。',
    },
    {
      title: '物料管理',
      desc: '建立企业级的标准物料库和零部件库，实现产品物料的快速选配；在PLM中用户可以灵活分类、定义不同的物料类型，建立各种物料、零部件的信息模型。',
    },
    {
      title: '产品结构管理',
      desc: '产品配罝管理是建立在企业已有规范的、完备定义的产品、零部件族模型的基础上，通过建立产品、零部件族内在的配置规则，利用零部件之间参数与条件相互约束的关系，经过规则运算后得出符合条件的产品BOM结构和相应的零部件。',
    },
    {
      title: '项目管理',
      desc: '实现产品研发过程中多个职能团队的高效协作、数据整合和对项目全生命周期的技术管控，进而建立起最优秀的项目研发管理体系，从而全面提升企业产品创新能力和技术管理水平。项目模板定义、项目跟踪与监控、项目统计、项目知识库。',
    },
    {
      title: '产品配置管理',
      desc: '企业可以生产出满足用户个性化需求的产品，减少从定单到发货的时间，增强对生产过程的控制能力，提高产品质量，同时提供更多的产品种类供客户选择。根据客户需求输入配置参数，快速选配出符合要求的产品BOM，实现动态智能化产品设计，大幅加快产品设计效率，缩短产品交付周期。',
    },
    {
      title: '设计变更管理',
      desc: '完全支持CMII管理规范，贯彻严谨规范的设计变更管理理念，涵盖从问题报告（PR）、变更请求（ECR）、 变更通知（ECN）、变更操作实施（ECO）的全过程应用。各种作为变更对象的受控资料（如图纸、技术文档、产品BOM、物料等）通过严谨规范的评审流程组织更改。',
    },
  ],
  arres = [
    {
      title: '技术部',
      desc: '加快产品改型设计（设计重用）系统自动维护编码（解放人工维护）图纸自动生成BOM（解放靠人汇总）加快图纸审签，无需打印签字跑腿',
    },
    {
      title: '生产部',
      desc: '直接浏览设计图纸及作业指导书提前查询设计及工艺进展生产部可从图纸中统计各类报表，方便采购部采购，方便仓库发料和车间领料',
    },
    {
      title: '文职部',
      desc: '支持所有人员在线浏览2D/3D图及办公文件对供应商开放最新产品共享文件目录形成企业统一的文件获取平台，方便各部门获取正确版本文件及进行内部邮件收发，实现内部数据安全及高效流转，共享质量体系得已落地推行、快速追溯',
    },
    {
      title: '高管层',
      desc: '各部门业务流程清晰掌握工作及项目进度文件集中共享及安全获取',
    },
    {
      title: '工艺部',
      desc: '建立企业工艺资料库提高工艺的规范化、标准化、工艺质量支持设计BOM到工艺BOM转换为ERP提供完整的数据基础',
    },
    {
      title: '文控部',
      desc: '系统自动维护图纸归档、发放、变更、回收收发记录报表智能统计加快工作效率及保障文件版本准确',
    },
  ];

export default () => {
  const [gntype, setgntype] = useState(1);
  const [jstype, setjstype] = useState(1);
  const changegntype = (e, val) => {
    console.log(val);
    setgntype(val);
  };
  const changejstype = (e, val) => {
    console.log(val);
    setjstype(val);
  };

  const screens = useBreakpoint();

  return (
    <div id="mesContainer">
      <img
        src={'https://ng-website.oss-cn-hangzhou.aliyuncs.com/assets/fac5.jpg'}
        alt=""
        style={{ width: '100%' }}
      />
      <div className="content">
        <h2 className="title">PLM产品生命周期管理系统</h2>
      </div>
      <div className="cpjs bgjs">
        <h3>系统介绍</h3>
        <p>
          PLM依托中国领先的产品技术及解决方案，有机的把产品生命周期相关的数据和业务整合起来，为企业提供了一整套全方位的数字化产品生命周期管理平台。通过图文档管理、物料管理、产品管理、流程管理、项目管理、协同办公等系统功能，支持从概念创意、设计、工艺、样机制作、生产制造、销售、维护到报废产品全生命周期各个阶段的信息创建、协同、应用和管理。{' '}
        </p>
      </div>
      <div className="cpjs content">
        <h3>解决问题</h3>
        <img
          style={{ width: '100%' }}
          src={
            'https://ng-website.oss-cn-hangzhou.aliyuncs.com/assets/solvepro.png'
          }
          alt=""
        />
      </div>
      <div className="yyal content">
        <h3>产品功能</h3>
        <div
          style={{
            width: '100%',
            height: '100%',
            padding: '2rem',
          }}
        >
          <Carousel
            autoplay
            dots={{
              className: 'diydots',
            }}
          >
            {spArr(
              arrs.map((it, i) => {
                it.picUrl = `https://ng-website.oss-cn-hangzhou.aliyuncs.com/assets/yui${
                  i + 1
                }.png`;
                return it;
              }),
              !screens.sm ? 1 : !screens.lg ? 2 : !screens.xl ? 3 : 3,
            ).map((it, i) => {
              return (
                <div key={it.picurl}>
                  <div className="spread">
                    {it.map((item, index) => {
                      return (
                        <div
                          className="proditem"
                          key={item.picUrl}
                          style={{ borderRadius: 8, overflow: 'hidden' }}
                        >
                          <img src={item.picUrl} alt="" />
                          <div className="placecontainer"></div>
                          <div className="textareacontainer">
                            <h3>{item.title}</h3>
                            <p>{item.desc}</p>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </Carousel>
        </div>
      </div>

      <div className="cpjs content">
        <h3>产品优势</h3>
        <Row gutter={36}>
          <Col {...colc}>
            <div className="cpys-text">
              <div>
                <h4>先进的技术框架</h4>
                <p>
                  三层体系结构，面向对象的技术和组件化的组织形式。采用继承、封装和多态三个特性设计系统。
                </p>
              </div>
              <div>
                <h4>基于大型数据库、支持海量用户和存储</h4>
                <p>
                  采用SQL数据库，将所有信息数据以文件的方式存储于电子仓库中，并经过加密处理。
                </p>
              </div>
              <div>
                <h4>广泛的系统集成技术</h4>
                <p>
                  与CAD/CAPP/ERP/MES/CRM/SRM/OA等系统无缝集成，将各系统中的共同信息提取出来，实现各个系统在数据级上的集成，保证数据一次性输入，多次重用。
                </p>
              </div>
            </div>
          </Col>
          <Col {...colc}>
            <img
              style={{ width: '100%' }}
              src={
                'https://ng-website.oss-cn-hangzhou.aliyuncs.com/assets/advance1.png'
              }
              alt=""
            />
          </Col>
        </Row>

        <Row gutter={36}>
          <Col {...colc}>
            <img
              style={{ width: '100%' }}
              src={
                'https://ng-website.oss-cn-hangzhou.aliyuncs.com/assets/advance2.png'
              }
              alt=""
            />
          </Col>
          <Col {...colc}>
            <div className="cpys-text" style={{ textAlign: 'right' }}>
              <div>
                <h4>强大的客户化技术</h4>
                <p>
                  先进的管理理念，支持并行工程与协同工作的研发管理体系，全面提升企业研发管理水平。支持个性化的定制开发，为企业定制工作流程、项目管理方式、编码规则等，增加系统的柔性。
                </p>
              </div>
              <div>
                <h4>七层数据安全体系全面管理企业知识财产</h4>
                <p>
                  多层安全控制机制，细致、周密地保护企业知识财富的绝对安全。实现全企业核心数据的“集中管理”、“权限控制”、“流程管控”、“操作追踪”等多重安全特性，令企业管理者高枕无忧！
                </p>
              </div>
            </div>
          </Col>
        </Row>
      </div>

      <div className="yyal content">
        <h3>实施效益</h3>
        <Row gutter={36} style={{ padding: '0 2rem' }}>
          <Col {...col}>
            <img
              style={{ width: '100%', margin: '0.5rem' }}
              src={
                'https://ng-website.oss-cn-hangzhou.aliyuncs.com/assets/xiaoyi.png'
              }
              alt=""
            />
          </Col>
          <Col
            {...cols}
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              padding: '2rem',
            }}
          >
            <Row gutter={36}>
              {arres.map((it, i) => {
                return (
                  <Col {...cold} key={i} style={{ marginBottom: '1.2rem' }}>
                    <h4 style={{ fontSize: '0.8rem' }}>{it.title}</h4>
                    <p style={{ fontSize: '0.6rem' }}>{it.desc}</p>
                  </Col>
                );
              })}
            </Row>
          </Col>
        </Row>
      </div>
    </div>
  );
};