import React, { useEffect, useState, useRef, useMemo } from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Drawer, Descriptions, Card, Table, Timeline, Button, Space } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import TimelineItem from 'antd/lib/timeline/TimelineItem';

// 评论
function HistoryDrawer(props) {
  const {
    flowDetail,
    visible,
    onClose,
    version,
    loading,
    dispatch,
    versionTree,
    onChangeVersion,
  } = props;
  const columns = useMemo(() => {
    return [
      {
        title: '名称',
        render: item => (
          <div style={{ color: '#9b9b9b' }}>
            {item.version_no ? `${item.version_name}.${item.version_no}` : item.version_name}
          </div>
        ),
      },
      {
        title: '业务节点',
        width: '20%',
        render: item => {
          let node = flowDetail.Nodes.find(cur => cur.Id == item.template_node_id);
          return <span style={{ color: '#9b9b9b' }}>{node?.label ? node.label : '-'}</span>;
        },
      },
      {
        title: '提交人',
        width: '20%',
        render: item => {
          return (
            <span style={{ color: '#9b9b9b' }}>
              {item.AuthorInfo?.UserName ? item.AuthorInfo?.UserName : '-'}
            </span>
          );
        },
      },
      {
        title: '操作',
        width: '20%',
        render: item =>
          item.id != version.id && (
            <a
              onClick={() => {
                onChangeVersion(item);
                onClose();
              }}
            >
              加载
            </a>
          ),
      },
    ];
  }, [version]);

  const TimeLineItemRender = item => {
    let time = item.c_time ? item.c_time.split('T')[0] : '-';
    let node = flowDetail.Nodes.find(cur => cur.Id == item.template_node_id);
    return (
      <TimelineItem>
        <Space>
          <a
            onClick={() => {
              onChangeVersion(item);
              onClose();
            }}
          >
            {item.version_no ? `${item.version_name}.${item.version_no}` : item.version_name}
          </a>
          <span>{node?.label ? node.label : '-'}</span>
          <span>提交人: {item.AuthorInfo?.UserName ? item.AuthorInfo?.UserName : '-'}</span>
          <span>时间: {time}</span>
        </Space>
      </TimelineItem>
    );
  };

  return (
    <Drawer
      width={600}
      title="历史版本"
      mask={false}
      placement="right"
      onClose={onClose}
      visible={visible}
    >
      {/* <Table columns={columns} dataSource={versionTree} bordered={false} /> */}
      <Timeline>{versionTree.map(item => TimeLineItemRender(item))}</Timeline>
    </Drawer>
  );
}
export default connect(({ detail, xflow, user, loading }) => ({
  comment: detail.comment,
  userList: user.list,
  bomComment: detail.bomComment,
  flowDetail: xflow.flowDetail,
  loading: loading,
}))(HistoryDrawer);