import React, { useState } from 'react';
import { Image } from 'antd';
import { EyeOutlined } from '@ant-design/icons';
import moment from 'moment';


interface ImageSinglePopoverProps {
  src: string;
  involved: any;
  // handleInvolved: () => void;
  reload: any;
  time: any;
}

const ImageSinglePopover: React.FC<ImageSinglePopoverProps> = ({ src, involved, reload, time}) => {
  const [visible, setVisible] = useState(false);
  // const [open, setOpen] = useState(false);
  
  // 定义一个方法，用于生成自定义的遮罩层
  const generateMask = (text:any) => (
    <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
      <div style={{ display: 'flex', alignItems: 'center', fontSize: 12 }}>
        <EyeOutlined style={{ marginRight: 8, fontSize: 12 }} />
        <div>{text}</div>
      </div>
    </div>
  );
  // const content = (
  //   <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center',alignItems: 'center', height: 56}}>
  //     {/* <div>选项1</div>
  //     <div>选项2</div> */}
  //     <Button 
  //       type="text" 
  //       style={{ height:22, padding: 0,fontSize: 12,color: '#FFF' }} 
  //       icon={<InfoCircleOutlined style={{ color: '#FAAD14',fontSize: 12}} />}
  //       onClick={()=>{
  //       //   setInvolved(true)
  //         // handleInvolved();
  //         // reload()
  //         setOpen(false)
  //       }}
  //       >加入重点关注</Button>
  //     <Button 
  //       type="text" 
  //       style={{ height:22, padding: 0,fontSize: 12,color: '#FFF'  }} 
  //       icon={<CloseCircleOutlined style={{ color: '#E80D0D',fontSize: 12}} />}
  //       onClick={()=>{
  //       //   setInvolved(false)
  //           // handleInvolved();
  //           // reload()
  //           setOpen(false)
  //       }}
  //       >移除重点关注</Button>
  //   </div>
  // );
  const handleVisibleChange = (value: boolean) => {
    setVisible(value);
  };

  // const handleOpenChange = (value: boolean) => {
  //   setOpen(value);
  // };

  return (
    <div style={{ position: 'relative', boxSizing: 'border-box', width: 140, height: 170, marginRight: 12 }}>
      <Image
        style={{ borderRadius: 4 }}
        width={140}
        height={140}
        preview={{
          visible,
          src,
          onVisibleChange: handleVisibleChange,
          mask: generateMask("点击可预览大图"),
        }}
        src={src}
      />
      <div style={{height: 30,textAlign: 'center',lineHeight: '30px',fontWeight: 500,color: '#333'}}>{moment(time).format('YYYY-MM-DD hh:mm:ss')}</div>
      {/* <Popover
        placement="right"
        content={content}
        trigger="click"
        style={{ width: 104, height: 64 }}
        color="rgba(0, 0, 0, 0.6)"
        overlayInnerStyle={{ width: 104, height: 64, padding: 4, borderRadius: 2 }}
        open={open}
        onOpenChange={handleOpenChange}
      >
        <Button
          style={{ position: 'absolute', bottom: 8, right: 0 }}
          type="text"
          icon={<EllipsisOutlined style={{ color: '#fff', fontSize: 24, transform: 'rotate(90deg)' }} />}
        />
      </Popover> */}
      {involved === 1 && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            right: 0,
            width: 64,
            height: 24,
            background: '#FAAD14',
            borderRadius: '0px 4px 0px 4px',
            color: '#FFF',
            fontSize: 12,
            textAlign: 'center',
            lineHeight: '24px'
          }}
        >
          重点关注
        </div>
      )}
    </div>
  );
};

export default ImageSinglePopover;