import React, { useState, useEffect } from "react";
import CourseInformationItem from "./CourseInformationItem";
import { Empty } from "antd";

// 课程目录
const CourseInformation = ({ courseItems, onChildData, currentPlatform }) => {
    console.log("%c Line:7 🍏 currentPlatform", "color:#b03734", currentPlatform);
  const [sortedCourses, setSortedCourses] = useState([]);

  useEffect(() => {
    console.log("%c Line:10 🍻 courseItems", "color:#b03734", courseItems);

    // 按照 updateTime 进行降序排序
    const sortedData = courseItems.map((item, index) => {
      item = { ...item, index: index };
      return item;
    });
    // const sortedData = [...courseItems];
    setSortedCourses(sortedData);
    console.log("课程目录数据", sortedData);
  }, [courseItems]);
  const handleChildData = (data) => {
    console.log(data);
    onChildData(data);
  };

  return (
    <div className="">
      <div className="px-5 flex items-center justify-between font-bold text-gray-500 text-sm py-2 border-b border-gray-300">
        <div className="w-20">序号</div>
        <div className="w-1/2">资料名称</div>
        {['FPlatformEnum.webOnWin','FPlatformEnum.webOnMac','FPlatformEnum.web'].includes(currentPlatform) &&  <div className="w-1/4">操作</div>}
      </div>
      {sortedCourses.length === 0 && (
        <Empty description={false} style={{ height: "100%" }} />
      )}
      {sortedCourses.map((course) => (
        <CourseInformationItem
          key={course.Code}
          course={course}
          onChildData={handleChildData}
          currentPlatform={currentPlatform}
        />
      ))}
    </div>
  );
};

export default CourseInformation;
