import { useAjax } from "@/Hook/useAjax"
import { BidModeEnum, BidStrategyEnum, OptimizationGoalEnum, PromotedObjectType, SiteSetEnum } from "@/services/launchAdq/enum"
import { getSysAdgroupsInfo } from "@/services/launchAdq/localAd"
import { Popover, Spin } from "antd"
import React, { useState } from "react"
import style from '../targetingPopover/index.less'

interface Props {
    id: number,
    name: string
}

/**
 * 表格查看广告基本信息
 * @returns 
 */
const AdPopover: React.FC<Props> = (props) => {

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

    const getSysAdgroups = useAjax((params) => getSysAdgroupsInfo(params))
    /*************************/


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

    return <Popover
        content={<Spin spinning={getSysAdgroups.loading}>
            <div className={`${style.popover} ${style.aStyle}`}>
                {getSysAdgroups?.data && <>
                    <div>广告名称: <span>{getSysAdgroups?.data?.adgroupName}</span></div>
                    <div>推广目标: <span>{PromotedObjectType[getSysAdgroups?.data?.promotedObjectType as keyof typeof PromotedObjectType]}</span></div>
                    <div>广告版位: <span>{getSysAdgroups?.data?.siteSet?.map((item: string) => SiteSetEnum[item as keyof typeof SiteSetEnum]).toString()}</span></div>
                    <div>投放日期: <span>{getSysAdgroups?.data?.endDate ? getSysAdgroups?.data?.beginDate + '~' + getSysAdgroups?.data?.endDate : getSysAdgroups?.data?.beginDate + '~' + '长期投放'}</span></div>
                    <div>出价方式: <span>{BidModeEnum[getSysAdgroups?.data?.bidMode as keyof typeof BidModeEnum]}</span></div>
                    <div>优化目标: <span>{OptimizationGoalEnum[getSysAdgroups?.data?.optimizationGoal as keyof typeof OptimizationGoalEnum]}</span></div>
                    <div>出价类型: <span>{getSysAdgroups?.data?.smartBidType === 'SMART_BID_TYPE_CUSTOM' ? '手动出价' : '自动出价'}</span></div>
                    <div>出价策略: <span>{BidStrategyEnum[getSysAdgroups?.data?.bidStrategy as keyof typeof BidStrategyEnum]}</span></div>
                    <div>广告出价: <span>{getSysAdgroups?.data?.bidAmount}</span></div>
                    <div>广告日预算: <span>{getSysAdgroups?.data?.dailyBudget || '不限'}</span></div>
                </>}
            </div>
        </Spin>}
        // title="定向"
        trigger="click"
        placement="left"
        open={visible}
        onOpenChange={handleVisibleChange}
    >
        {/* 查看广告 */}
        <a style={{ color: '#1890ff', fontSize: 12 }}>{name || id}</a>
    </Popover>
}

export default React.memo(AdPopover)