import { useAjax } from "@/Hook/useAjax"
import { getSysAdcreativeInfo } from "@/services/launchAdq/creative"
import { EyeOutlined } from "@ant-design/icons"
import { Popover, Spin } from "antd"
import React, { useState } from "react"
import AdcreativeCol from "../../launchManage/createAd/adcreativeCol"
import style from '../targetingPopover/index.less'


interface Props {
    id: number,
    name: string
}
/**
 * 表格查看创意基本信息
 * @returns 
 */
const AdcreativePopover: React.FC<Props> = (props) => {

    /*************************/
    const { id, name } = props
    const [visible, setVisible] = useState<boolean>(false)

    const getSysAdcreative = useAjax((params) => getSysAdcreativeInfo(params))
    /*************************/

    const handleVisibleChange = (newVisible: boolean) => {
        setVisible(newVisible)
        if (id && newVisible) {
            getSysAdcreative.run(id)
        }
    }

    return <Popover
        content={<Spin spinning={getSysAdcreative.loading}>
            <div className={`${style.popover} ${style.aStyle}`}>
                {getSysAdcreative?.data && <AdcreativeCol data={getSysAdcreative?.data} />}
            </div>
        </Spin>}
        trigger="click"
        placement="left"
        visible={visible}
        onVisibleChange={handleVisibleChange}
    >
        {/* 查看创意 */}
        <a style={{ color: '#1890ff', fontSize: 12 }}>{name || id}</a>
    </Popover>
}

export default React.memo(AdcreativePopover)