Uighur-Recognition-Web/src/pages/VideoAnalysis/components/ImageWithPopover.tsx

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

interface ImageWithPopoverProps {
  src: string;
  involved: any;
  indexId: any;
  handleInvolved: (value: any,index: any) => void;
  time: any;
}

const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({ src, involved, indexId, handleInvolved,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',marginBottom: 4 }} 
        icon={<InfoCircleOutlined style={{ color: '#FAAD14',fontSize: 12}} />}
        onClick={()=>{
        //   setInvolved(true)
          handleInvolved(1, indexId);
          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(0, indexId);
            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}
      />
      <Popover
        placement="right"
        content={content}
        trigger="click"
        style={{ width: 104, height: 64 }}
        color="rgba(0, 0, 0, 0.6)"
        overlayInnerStyle={{ width: 104, height: 68, padding: 4, borderRadius: 2 }}
        open={open}
        onOpenChange={handleOpenChange}
      >
        <Button
          style={{ position: 'absolute', bottom: 30, right: 0 }}
          type="text"
          icon={<EllipsisOutlined style={{ color: '#fff', fontSize: 24, transform: 'rotate(90deg)' }} />}
        />
      </Popover>
      <div style={{height: 30,textAlign: 'center',lineHeight: '30px',fontWeight: 500,color: '#333'}}>{moment(time).format('YYYY-MM-DD hh:mm:ss')}</div>
      {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 ImageWithPopover;