import React, {useEffect, useState} from "react";
import { Timeline, Icon } from 'antd';

function ProductRecord({ workReord, getRecordView, PdtData }) {
  const [ page, setPage ] = useState(1)
  useEffect(() => {
    setPage(1)
  },[PdtData.ID])
  const handleLoadMore = () => {
    getRecordView(PdtData.ID, page + 1, 10);
    setPage(page + 1);
  }
  console.log(page);
  const colors = ['green', '#2452F0', 'red', 'green', '#2452F0', '#2452F0', 'green', '#2452F0', 'green', '#2452F0', '#2452F0', '#2452F0'];
  const icons = ['read', 'check-square', 'issues-close', 'read', 'check-square', 'login', 'down-square', 'check-square', 'check-circle', 'check-square', 'check-square', '', 'check-square'];
  return <Timeline
    mode="alternate"
    pending=" "
    pendingDot={<span onClick={handleLoadMore}>
      {Math.ceil(workReord.TotalCount / 10) > page ? "点击加载更多" : ""}
    </span>}>
    {
      (workReord.Data || []).map((item) => {
        return <Timeline.Item
          key={item.ID}
          //color={colors[item.OPRATE_TYPE]}
          dot={<Icon type={icons[item.OPRATE_TYPE]} style={{ fontSize: '16px', color: colors[item.OPRATE_TYPE] }} />}>
          [{item.CREATE_TIME}]{item.OPRATE_DESC}
        </Timeline.Item>
      })
    }
  </Timeline>
}

export default ProductRecord;