import React , { useEffect , useState } from 'react';
import { TPMIndexHOC} from '../../modules/tpm/TPMIndexHOC';
import { Timeline, Carousel } from 'antd';
import { getImageUrl } from 'educoder';
import CountUp from 'react-countup';
import axios from 'axios';
import './AboutUs.scss';
import subititle from './image/subtitle.png';
import achievements from './image/achievements.png';
import earth from './image/earth.png';
import computer from './image/computer.png';
import position from './image/position.png';
import quan1 from './image/quan1.png';
import quan2 from './image/quan2.png';
import fun1 from './image/fun1.png';
import fun2 from './image/fun2.png';
import fun3 from './image/fun3.png';
import fun4 from './image/fun4.png';
import fun5 from './image/fun5.png';

function AboutUs(){
  const countUpProps = {
    redraw: true,
    start: 0,
    duration: 2,
    suffix: "+"
  };
  const [selectTitle, setSelectTitle] = useState(1);
  //用于刷新组件
  const [flush, setFlush] = useState(false);
  //合作单位
  const [units, setUnits] = useState([]);

  useEffect(()=>{
    //添加浏览器滚动监听事件
    window.addEventListener('scroll', scrollListener);
    //请求topics.json接口获取合作单位信息
    axios.get(`/topics.json`, { params: { topic_type: "cooperator", limit: 20, group_size: 5}}).then(response=>{
      response && setUnits(response.data.topics);
    });
    return ()=>window.removeEventListener('scroll', scrollListener);
  },[])

  function scrollListener(e){
    const top = e.srcElement.scrollingElement.scrollTop;
    //回到顶部时导航栏选中【关于我们】
    top < 555 && setSelectTitle(1);
    if (top > 2800 && top< 4000){
      setFlush(true);
    }else{
      setFlush(false);
    }
  }

  return(
    <div className="aboutUs_body">
      <div className="aboutUs_head df">
        <p className="head_title">GitLink 确实开源</p>
        <p className="head_cont font-20 mt36">新一代开源创新服务平台，让您的创意在这里释放</p>
      </div>
      <div className="aboutUs_title df">
        <a className={selectTitle === 1 ? "active" : ""} href="#value1" onClick={() => setSelectTitle(1)}>关于我们</a>
        <a className={selectTitle === 2 ? "active" : ""} href="#value2" onClick={() => setSelectTitle(2)}>平台统计</a>
        <a className={selectTitle === 3 ? "active" : ""} href="#value3" onClick={() => setSelectTitle(3)}>加入我们</a>
        <a className={selectTitle === 4 ? "active" : ""} href="#value4" onClick={() => setSelectTitle(4)}>合作单位</a>
      </div>
      <div className="aboutUs">
        <a id="value1" className="mao"></a>
        {/* 关于我们 */}
        <div className="about_us">
          <div className="au_bg">
            <div className="au_title">关于我们</div>
            {/* 简介 */}
            <div className="au_cont subt df">
              <div className="cont1_introduction">
                <p className="subtitle">简介</p>
                <div className="font-16">GitLink（确实开源）是CCF官方指定的开源创新服务平台，旨在以“为开源创新服务”为使命，以“成为开源创新的汇聚地”为愿景，秉承“创新、开放、协作、共享”的价值观，致力于为大规模开源开放协同创新助力赋能，打造创新成果孵化和新工科人才培养的开源创新生态！</div>
              </div>
              <img src={subititle} className="subtitleImg"></img>
            </div>
          </div>
          {/* 确实开源   一脉传承 */}
          <div className="au_cont inherit pl30">
            <p className="subtitle">确实开源&nbsp;&nbsp;一脉传承</p>
            <div>本世纪以来，随着软件创新需求和应用规模的飞速增长，软件开发队伍、开发资源、可信评估呈现出规模化、开放化、持续化的新特点，软件开发活动面临协同难、复用难、评估难的制约，经典的工程化软件开发方法面临严峻挑战，严重影响了软件开发效率和质量的提升。在此背景下，国防科技大学联合国内多所知名高校、科研机构和软件企业，围绕开源创新开展了持续性探索，构建形成了以Trustie（确实）为代表的一系列开源创新服务基础设施。自2006年以来，Trustie经过三个阶段的演化发展，于2021年迎来全面升级：在中国计算机学会（CCF）的带领指导下，共同推进产学研用深度融合，共筑新一代开源创新服务平台GitLink！</div>
            <div className="inherit_items">
              <img src={quan1} className="quan1Img"/>
              <img src={quan2} className="quan2Img"/>
              <Timeline>
                <Timeline.Item dot={<i className="iconfont icon-a-yuanquan2x font-20"></i>}>
                  <div className="timeline_cont">
                    <p>Trustie 1.0阶段（2006年-2014年）</p>
                    <div>国防科技大学、北京大学、北京航空航天大学、中国科学院软件研究所等单位合作开展了基于网络的软件开发群体化方法与技术研究，揭示了以大众化协同开发、开放式资源共享、持续性可信评估为核心的互联网大规模协同机理，与软件开发工程化方法相结合，系统地提出了基于网络的软件开发群体化方法，并于2008年发布了可信的国家软件资源共享与协同生产环境（简称“Trustie v1.0”，中文简称“确实”），重点解决大规模软件协同开发、可信评估、运行监控和持续演化等问题。</div>
                  </div>
                </Timeline.Item>
                <Timeline.Item dot={<i className="iconfont icon-a-yuanquan2x"></i>}>
                  <div className="timeline_cont">
                    <p>Trustie 2.0阶段（2014年-2020年）</p>
                    <div>在科技部项目的持续资助下，国防科技大学联合国内多所知名高校、科研机构和软件企业，致力于系统研究新型软件开发方法，为开源生态建设提供方法指导和实践指南，支撑科教领域原始创新成果的开源孵化和开源人才培养，并于2014年发布了面向软件创新和教育的开源社区Trustie v2.0，重点探索协作开发社区、知识分享社区、应用服务社区等“大外围”软件涉众的联接，以及基于开源大数据的智能化开发等技术。</div>
                  </div>
                </Timeline.Item>
                <Timeline.Item dot={<i className="iconfont icon-a-yuanquan2x"></i>}>
                  <div className="timeline_cont">
                    <p>Trustie 3.0阶段 (2020年至今)</p>
                    <div>Trustie在已有的技术积累基础上，进一步联合国内高等院校、科研机构、产业企业和开源组织等，在中国计算机学会（CCF）的带领指导下，共同推进产学研用深度融合，致力于联接互联网海量群智资源，探索开源创新成果开放与共享、开源生态协作与共建的新模式和新方法，升级形成了新一代开源创新服务平台GitLink，力图破解软件开发群智范式背后的本质机理，建立面向“大外围”开放创新的群智激发与汇聚关键机制，实现面向大规模软件涉众的稳态群智激发与汇聚。</div>
                  </div>
                </Timeline.Item>
              </Timeline>
            </div>
          </div>

          {/* 特色功能  确实给力 */}
          <div className="feature_function_bg">
            <div className="au_cont">
              <p className="au_title">特色功能&nbsp;&nbsp;确实给力</p>
              <table><tr>
                <td>
                  <div className="feat_func_cont">
                    <div className="feat_fun_img"><img src={fun1} /></div>
                    <div>
                      <p>分布式协作开发</p>
                      <div>支持在线文件编辑、&nbsp;&nbsp;<br />分支管理、贡献统计、<br />仓库复刻、合并请求&nbsp;&nbsp;&nbsp;</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div className="feat_func_cont">
                    <div className="feat_fun_img"><img src={fun2} /></div>
                    <div>
                      <p>一站式过程管理</p>
                      <div>支持疑修、里程碑、&nbsp;&nbsp;&nbsp;<br />通知提醒、标签归档、Wiki文档、组织管理&nbsp;&nbsp;&nbsp;</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div className="feat_func_cont">
                    <div className="feat_fun_img"><img src={fun3} /></div>
                    <div>
                      <p>高效流水线运维</p>
                      <div>提供轻量级工作流引擎<br />并支持自定义配置、&nbsp;&nbsp;&nbsp;<br/>静态扫描、制品构建&nbsp;&nbsp;&nbsp;</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div className="feat_func_cont">
                    <div className="feat_fun_img"><img src={fun4} /></div>
                    <div>
                      <p>多层次代码分析</p>
                      <div>支持代码溯源分析、&nbsp;&nbsp;&nbsp;<br />许可证风险分析、开源漏洞检测和加固建议&nbsp;&nbsp;&nbsp;</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div className="feat_func_cont">
                    <div className="feat_fun_img"><img src={fun5} /></div>
                    <div>
                      <p>多维度用户画像</p>
                      <div>支持开发活动统计、&nbsp;&nbsp;&nbsp;<br />贡献日历、能力建模、<br />角色与专业定位分析&nbsp;&nbsp;&nbsp;</div>
                    </div>
                  </div>
                </td>
              </tr></table>
            </div>
          </div>

          {/* 成果作用，确实有效 */}
          <div className="au_cont df pl30">
            <img src={achievements} className="achievementsImg"></img>
            <div className="cont1_achievements">
              <p className="subtitle ml0">成果作用&nbsp;&nbsp;确实有效</p>
              <div>GitLink（确实开源）为我国创新型软件产业发展提供了关键技术支撑和实践指南，为各类开源创新活动以及我国军地开源社区建设提供了有效支撑，为推动开源创新发展和创新人才培养发挥了重要作用。<br/>通过10多年的发展，GitLink平台显著提升了大型软件企业软件生产能力，支持了我国航空、航天、国防等多个关键领域的可信软件生产，为包括新一代人工智能启智社区、ARM绿色计算社区、科技部云计算与大数据木兰社区、科技委可控开源创造行动红山社区等的建设提供关键技术支撑，为我国关键领域开源社区生态建设发挥了重要作用！</div>
            </div>
          </div>
        </div>

        {/* 平台统计 */}
        <div className="about_us statistics">
          <a id="value2" className="mao"></a>
          <div className="au_title">平台统计</div>
          <p>联接海量群智资源，汇聚优秀开源组织，孵化优质创新成果</p>
          <img src={earth} className="earthImg"/>
          <div className="statistics_cont df">
            <div>
              <CountUp {...countUpProps} start={0} end={50000} />
              <p>开发者</p>
            </div>
            <div>
              <CountUp {...countUpProps} end={1000} />
              <p>组织</p>
            </div>
            <div>
              <CountUp {...countUpProps} end={1400000} />
              <p>仓库</p>
            </div>
          </div>
        </div>

        {/* 加入我们 */}
        <div className="join_us_bg">
          <a id="value3" className="mao"></a>
          <div className="au_cont">
            <div className="au_title">加入我们</div>
            <p className="subtitle">探索你的未来</p>
            <p>GitLink团队在寻找新的小伙伴，期待着您的加入，让我们一起为开源创新贡献力量！</p>
            <img src={computer} className="joinUsImg"/>
            {/* 轮播图 */}
            <Carousel autoplay easing="none">
              <div className="df">
                <div className="position">
                  <p className="df"><img src={position} /><span className="ml10">前端开发工程师</span></p>
                  <div>
                    1、全日制本科及以上学历，5年以上Web前端开发经验，熟练使用Gulp、Webpack等构建工具；<br />
                    2、熟练掌握VUE或React编程；有前端模块化、组件化、自动化开发经验者优先；<br />
                    3、精通jQuery、Ajax、Json等技术，对VUE，NodeJs等技术有所涉及；<br />
                    4、熟悉前端开发技术(HTML5、JS、JSON、XHTML、CSS3、ES6)，了解各项技术的相关标准，并严格按照标准进行开发。<br />
                  </div>
                </div>
                <div className="position right">
                  <p className="df"><img src={position} /><span className="ml10">后端开发工程师</span></p>
                  <div>
                    1、全日制本科及以上学历，计算机、软件工程相关专业者优先；<br />
                    2、3年以上Java开发相关经验，扎实的Java编程基础，参与过1个以上大/中型高并发、高性能系统架构设计、开发和调优；<br />
                    3、熟练掌握Spring、SpringBoot、Spring MVC、MyBatis等开源框架，掌握MVC框架模式及BS架构；<br />
                    4、精通SQL，熟练使用MySQL、Oracle等数据库，并具有一定的SQL优化能力；熟悉Redis、MongoDB等常用NoSQL解决方案，了解各自的优缺点以及使用场景者优先。<br />
                  </div>
                </div>
              </div>
              <div className="df">
                <div className="position">
                  <p className="df"><img src={position} /><span className="ml10">软件测试工程师</span></p>
                  <div>
                    1、熟悉主流开发技术框架，具备软件工程的基本知识；<br />
                    2、熟练掌握各种测试理论和测试技术，精通测试过程设计和用例设计方法；<br />
                    3、熟悉性能测试、自动化测试、安全测试其中一种或多种测试工具；（LoadRunner、Jmeter、Selenium、QTP、Robot、Firebug、AppScan，PyCharm等），熟练运用工具从事过相关测试工作；<br />
                    4、熟悉掌握一种编程语言（Java/Python/C++等）；<br />
                    5、熟悉Oracle/MySQL数据库，并能熟练编写SQL语句，熟练常用Linux命令；<br />
                    6、有整体质量意识，测试管理经验。<br />
                  </div>
                </div>
                <div className="position right">
                  <p className="df"><img src={position} /><span className="ml10">产品经理</span></p>
                  <div>
                    1、计算机或相关专业本科以上学历；3年以上工作经验；<br />
                    2、熟悉开源软件项目的管理流程，了解软件需求的调研方法，具备需求分析能力；<br />
                    3、能以专业的方式向客户提供技术咨询，良好的方案设计能力和文字功底；<br />
                    4、具备良好的交流、沟通和表达能力，良好的方案演示和介绍技巧；<br />
                    5、了解互联网产品的基本思路及基础方法论，能够基于数据提出产品优化策略；<br />
                    6、承受较强的工作压力，强烈的团队合作意识与工作责任心；<br />
                    7、有良好人际交往能力，工作积极主动，自信心强，有较强的学习能力。<br />
                  </div>
                </div>
              </div>
            </Carousel>
            <p className="delivery">简历投递邮箱：zengyt#csxjy.com.cn 曾先生  (用@符号替换#)</p>
          </div>
        </div>

        {/* 合作单位 */}
        <div className="unit">
          <a id="value4" className="mao"></a>
          <div className="au_title">合作单位</div>
          <table>
            {units && units.map(group =>{
              return (
                <tr>
                  {group.map(item =>{
                    return(
                      <td><a href={item.url} target="_blank"><img src={getImageUrl(item.image)}></img></a></td>
                    )
                  })}
                </tr>
              )
            })}
          </table>
        </div>
      </div>
    </div>  
  )
}
export default TPMIndexHOC(AboutUs);