forgeplus-react/src/factory/components/Resource2/index.jsx

import React, { useEffect, useRef, useState, forwardRef } from 'react';
import './index.scss';
import lessonsStandard1 from '../../../images/factory/lessons-standard-1.webp'
import lessonsStandard2 from '../../../images/factory/lessons-standard-2.webp'
import lessonsStandard3 from '../../../images/factory/lessons-standard-3.webp'
import { Link } from 'react-router-dom';
import KFIcon from '../../../components/KFIcon';
import back1 from '../../../images/factory/back1.png'
import '../../common.scss'
import { getSourceList, httpUrl } from '../../api';
import { factoryZoneId, docId, standardId, lessonId, manualId } from '../../../constants/factory'
import { downloadFunc } from '../../../forge/Utils/utils'
import { Carousel } from 'antd';

const iconList = [lessonsStandard1, lessonsStandard2, lessonsStandard3]

const Resource2 = forwardRef(({ zoneId }, ref) => {
  const [isVisible, setIsVisible] = useState(false);
  const [standardList, setStandardList] = useState([]);
  const [manualList, setManualList] = useState([]);
  const [docList, setDocList] = useState([]);
  const [chapterList, setChapterList] = useState([]);
  const carouselEL = useRef(null);
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setIsVisible(true);
        observer.disconnect();
      }
    }, { threshold: 0.1 });
    getStandard()
    getManualList()
    getDocList()
    getLessonList()

    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => observer.disconnect();
  }, []);

  const getStandard = () => {
    getSourceList({ id: factoryZoneId, keywords: standardId }).then(res => {
      const rows = []
      res.data.rows.forEach(e => {
        let extendData = {}
        if (e.extendData) {
          extendData = JSON.parse(e.extendData)
        }
        rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
      });
      setStandardList(rows.slice(0, 3));
    });
  }

  const getManualList = () => {
    getSourceList({ id: factoryZoneId, keywords: manualId }).then(res => {
      const rows = []
      res.data.rows.forEach(e => {
        let extendData = {}
        if (e.extendData) {
          extendData = JSON.parse(e.extendData)
        }
        rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
      });
      setManualList(rows.slice(0, 3));
    });
  }

    const getDocList = () => {
    getSourceList({ id: factoryZoneId, keywords: docId }).then(res => {
      const rows = []
      res.data.rows.forEach(e => {
        let extendData = {}
        if (e.extendData) {
          extendData = JSON.parse(e.extendData)
        }
        rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
      });
      setDocList(rows.slice(0, 2));
    });
  }

  const getLessonList = () => {
    getSourceList({ id: factoryZoneId, keywords: lessonId }).then(res => {
      const rows = []
      res.data.rows.forEach(e => {
        let extendData = {}
        if (e.extendData) {
          extendData = JSON.parse(e.extendData)
        }
        rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
      });
      // setLesson(rows[0]);
      getChapterList(rows[0].name)
    });
  };

  const getChapterList = (id) => {
    getSourceList({ id: factoryZoneId, keywords: id }).then(res => {
      const rows = []
      res.data.rows.forEach(e => {
        let extendData = {}
        if (e.extendData) {
          extendData = JSON.parse(e.extendData)
        }
        rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
      });
      setChapterList(rows);
    });
  };

  return (
    <div
      className={`factory-resource2 factory-module ${isVisible ? 'animate-active' : ''}`}
      ref={ref}
    >
      <h1 className="module-title">学习专区，多样资源服务工厂应用</h1>
      <div className="resource2-content">
        <div className="resource2-content-left">
          <h3>在线课程</h3>
          <p>全景智治贯通需求到交付，敏捷可视管控风险，打造高效可信软件生产新范式，赋能研发跃迁</p>
          <div className="left-content">
            {
              chapterList.slice(0, 2).map((item, index) => {
                return <div className="left-item" key={index}>
                  <img src={item.extendDataHeadImg || back1} alt="" />
                  <div className="item-info">
                    <h4 title={ item.name }>{item.name}</h4>
                    <p title={ item.summary }>{item.summary}</p>
                    <button className="shiny-button" onClick={() => { window.open(item.extendDataUrl) }}>查看详情</button>
                  </div>
                </div>
              })
            }
          </div>

        </div>
        <div className="resource2-content-right">
          <div className="standard">
            <Carousel autoplay ref={carouselEL} dots={false}>
              {manualList.map(item => {
                return <div className="standard-item">
                  <div className="standard-info">
                    <h3 title={ item.name }>{item.name}</h3>
                    <p title={ item.summary }>{item.summary}</p>
                    <button className="shiny-button" onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>立即下载</button>
                  </div>
                  <img className="standard-img" src={item.extendDataHeadImg} alt="" />
                </div>
              })}
            </Carousel>

          </div>
          <div className="manual">
            <h3>文档资料</h3>
            <div className="manual-content">
              <ul>
                {docList.map((item, index) => (
                  <li key={index} className={`activity-item-v2 df activity-section-item ${current === index ? 'activity-section-item-active' : ''}`} onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>
                    <span className="title-border-to-right-icon">{item.name}</span>
                  </li>
                ))}
              </ul>
              <Carousel autoplay ref={carouselEL} dots={false} afterChange={setCurrent}>
                {docList.map(item => {
                  return <div className="manual-item">
                    <img className="manual-img" src={item.extendDataHeadImg} alt="" />
                  </div>
                })}
              </Carousel>
            </div>
          </div>
        </div>
      </div>
      <div className="standard2">
        <h3>标准规范</h3>
        <div className="standard2-content">
          {
            standardList.map((item,index) => {
              return <div className="standard-item" key={index}>
                <img src={ iconList[index] } alt="" />
                <div className="standard-item-head">
                  <Link to={`/softwareFactory/lessons/${ item.id }`}><h4 title={ item.name }>{item.name}</h4><KFIcon type="icon-icon_blackarrow_hover" font={40} /></Link>
                </div>
                <p title={ item.summary }>{item.summary}</p>
              </div>
            })
          }
        </div>
      </div>
      <Link to="/softwareFactory/lessons" className="resource2-more">探索更多资源<KFIcon type="icon-icon_blackarrow_hover" font={40} /></Link>
    </div>
  );
});

export default Resource2;