import { ExclamationCircleOutlined, TagOutlined } from '@ant-design/icons';
import { List, Modal, Typography, Popconfirm, Row, Col, Popover, Button } from 'antd';
import { usePageInfoVersionList } from 'editorSrc/api/pageInfoVersionList';
import React, { useEffect } from 'react';
import styled from 'styled-components';
import { history } from 'umi';

interface IVersionListProps {
    data: any,
    onHistory:any
}

const VersionList: React.FC<IVersionListProps> = (props) => {
console.log(props, "阿里斯顿久了")
  const content = (
    <Box>
      <List
        size="small"
        dataSource={props?.data}
        renderItem={(item) => {
          const id = item?._id.slice(13)
          return (
            <List.Item>
              <Row style={{ width: '100%' }}>
                <Col span={8}>{id}</Col>
                <Col span={10}>{`${item?.created_at}`}</Col>
                <Col span={6}>
                  <Popconfirm
                    title="当前页面会替换为历史版本，是否继续?"
                    onConfirm={() => {
                      props?.onHistory(item._id)
                    }}
                  >
                    <Typography.Link>还原到该版本</Typography.Link>
                  </Popconfirm>
                </Col>
              </Row>
            </List.Item>
          );
        }}
      />
    </Box>
  );

  return (
    <Popover
      placement="bottom"
      title={`版本记录(${props?.data?.length || 0}/20)`}
      content={content}
      trigger="click"
    >
      <Button type="primary" ghost style={{ marginRight: '12px' }}>
        <TagOutlined />
        版本记录
      </Button>
    </Popover>
  );
};

const Box = styled.div`
  /* padding: 0 32px; */
  height: 200px;
  width: 380px;
  overflow-y: scroll;
`;

export default VersionList;