ad-manage/src/pages/launchSystemNew/components/targetingPopover/index.tsx

import { useAjax } from "@/Hook/useAjax"
import { getTagsList } from "@/services/launchAdq/global"
import { getsysTargetingInfo } from "@/services/launchAdq/targeting"
import { Popover, Spin } from "antd"
import React, { useState } from "react"
import TargetingTooltip from "../targetingTooltip"
import style from './index.less'


/**
 * 表格查看信息
 * @returns 
 */
interface Props {
    id: number
}
const TargetingPopover: React.FC<Props> = (props) => {

    /***************************/
    const { id } = props
    const [visible, setVisible] = useState<boolean>(false)
    const [geoLocationList, setGeoLocationList] = useState<any>({}) // 所有地域列表
    const [modelList, setModelList] = useState<any>({})  // 所有品牌手机

    const tagsList_REGION = useAjax((params) => getTagsList(params))
    const tagsList_MODEL = useAjax((params) => getTagsList(params))
    const getsysTargeting = useAjax((params) => getsysTargetingInfo(params))
    /***************************/

    const handleVisibleChange = (newVisible: boolean) => {
        setVisible(newVisible)
        if (id && newVisible) {
            getsysTargeting.run(id)
            tagsList_REGION.run({ type: 'REGION' }).then(res => {
                if (res) {
                    setGeoLocationList(() => (res as any[])?.reduce((prev: any, cur: { id: number }) => {
                        prev[cur.id] = cur
                        return prev
                    }, {}))
                }
            })
            tagsList_MODEL.run({ type: 'DEVICE_BRAND_MODEL' }).then(res => {
                if (res) {
                    setModelList(() => (res as any[])?.reduce((prev: any, cur: { id: number }) => {
                        prev[cur.id] = cur
                        return prev
                    }, {}))
                }
            })
        }
    }

    return <Popover
        content={<Spin spinning={getsysTargeting.loading || tagsList_MODEL.loading || tagsList_REGION.loading}>
            <div className={style.popover}>
                {getsysTargeting?.data && <>
                    <div>定向名称: <span>{getsysTargeting?.data?.targetingName}</span></div>
                    <div>定向描述: <span>{getsysTargeting?.data?.description}</span></div>
                    <TargetingTooltip data={getsysTargeting?.data} geoLocationList={geoLocationList} modelList={modelList} />
                </>}
            </div>
        </Spin>}
        // title="定向"
        trigger="click"
        placement="left"
        visible={visible}
        onVisibleChange={handleVisibleChange}
    >
        <a style={{ color: '#1890ff', fontSize: 12 }}>查看定向</a>
    </Popover>
}

export default React.memo(TargetingPopover)