import TargetingTooltip from "@/pages/launchSystemV3/components/TargetingTooltip"
import { Popover, Tooltip } from "antd"
import React from "react"
import style from './index.less'
import { CloseOutlined, CopyOutlined, FormOutlined } from "@ant-design/icons"

interface Props {
    targeting: any
    geoLocationList?: any,
    modelList?: any
    onModify?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
    onClear?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
    onCopy?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
}
const DataItem: React.FC<Props> = ({ targeting, onModify, onClear, onCopy, geoLocationList, modelList }) => {


    return <Popover
        placement="right"
        overlayInnerStyle={{ maxWidth: 350, maxHeight: 350, overflow: 'hidden', overflowY: 'auto' }}
        mouseEnterDelay={0.5}
        content={<TargetingTooltip
            targetingName={targeting?.targetingName}
            data={targeting}
            geoLocationList={geoLocationList}
            modelList={modelList}
        />}
    >
        <div className={style.dataItem}>
            <span className={style.targetingName}>{targeting?.targetingName}</span>
            <Tooltip title="根据地域一键生成多个定向">
                <CopyOutlined
                    className={style.edit}
                    onClick={(e) => {
                        e.stopPropagation()
                        e.preventDefault()
                        onCopy?.(e)
                    }}
                />
            </Tooltip>
            <Tooltip title="修改当前">
                <FormOutlined
                    className={style.edit}
                    onClick={(e) => {
                        e.stopPropagation()
                        e.preventDefault()
                        onModify?.(e)
                    }}
                />
            </Tooltip>
            <Tooltip title="删除">
                <CloseOutlined
                    className={style.close}
                    onClick={(e) => {
                        e.stopPropagation()
                        e.preventDefault()
                        onClear?.(e)
                    }}
                />
            </Tooltip>
        </div>
    </Popover>
}

export default React.memo(DataItem)