ad-manage/src/pages/launchSystemV3/adMonitorListV3/adExpandedRowRender.tsx

import useEcharts from "@/Hook/useEcharts"
import { GetColumnTrendProps, getAdgroupDetailsApi } from "@/services/adMonitor/adMonitor"
import { Card, Descriptions, Empty, Select, Space, Spin, Typography } from "antd"
import React, { useEffect, useMemo, useState } from "react"
import { useModel } from "umi"
import '../../launchSystemNew/adq/ad/index.less'
import { useAjax } from "@/Hook/useAjax"
import { BidModeEnum, BidStrategyEnum, OptimizationGoalEnum } from "@/services/launchAdq/enum"
import TimeSeriesLook from "../../launchSystemNew/adq/ad/timeSeriesLook"
import { ADGROUP_STATUS } from "../adqv3/const"


const AdExpandedRowRender: React.FC<{ data: any, scrollLeft: number, width?: number }> = ({ data, scrollLeft, width = 0 }) => {

    const { getColumnTrendV3 } = useModel('useAdMonitor.useMonitor')
    const getAdgroupDetails = useAjax((params) => getAdgroupDetailsApi(params), { formatResult: true })
    const [queryColumnTrend, setQueryColumnTrend] = useState<GetColumnTrendProps>({ accountId: data.account_id, adgroupId: data.adgroup_id, trendColumns: ['view', 'cost'], timeUnit: 'hour' })
    const { LineMonitor } = useEcharts()
    const [lineDis, setLineDis] = useState<any[]>([])

    useEffect(() => {
        getAdgroupDetails.run({ accountId: data.account_id, adgroupId: data.adgroup_id })
    }, [data])

    useEffect(() => {
        getCTList()
    }, [queryColumnTrend])

    const getCTList = () => {
        getColumnTrendV3.run(queryColumnTrend).then(res => {
            if (res?.data) {
                let spendData: any = { legendName: '花费' }
                let exposureData: any = { legendName: '曝光次数' }
                res?.data?.forEach((item: { day: string, trend_unit: string, view: string, cost: string }) => {
                    spendData[item?.trend_unit] = item?.cost
                    exposureData[item?.trend_unit] = item?.view
                });
                setLineDis(() => [spendData, exposureData])
            }
        })
    }

    const AdContent = useMemo(() => {
        if (getAdgroupDetails?.data?.data) {
            const { adgroupName, bidAmount, bidMode, optimizationGoal, systemStatus, targetingTranslation, timeSeries, firstDayBeginTime, dailyBudget, bidStrategy,
            } = getAdgroupDetails?.data?.data
            return <Spin spinning={getAdgroupDetails.loading}>
                <Descriptions column={2} size="small" colon={false}>
                    <Descriptions.Item labelStyle={{ width: 100, flex: '0 0 auto' }} label="广告名称">
                        <div style={{ width: (width - 20) / 4 }}>
                            <Typography.Text ellipsis={{ tooltip: true }}>{adgroupName}</Typography.Text>
                        </div>
                    </Descriptions.Item>
                    <Descriptions.Item labelStyle={{ width: 100 }} label="状态">
                        {ADGROUP_STATUS[systemStatus as keyof typeof ADGROUP_STATUS] || '--'}
                    </Descriptions.Item>
                    <Descriptions.Item labelStyle={{ width: 100 }} label="出价">{`${BidModeEnum[bidMode as keyof typeof BidModeEnum]} ${bidAmount}元/${bidMode === 'BID_MODE_CPM' ? '千次曝光' : bidMode === 'BID_MODE_CPC' ? '点击' : OptimizationGoalEnum[optimizationGoal as keyof typeof OptimizationGoalEnum]}`}</Descriptions.Item>
                    <Descriptions.Item label="投放时间" labelStyle={{ width: 100 }}>{<TimeSeriesLook timeSeries={timeSeries} />}</Descriptions.Item>
                    <Descriptions.Item label="定向" labelStyle={{ width: 100, flex: '0 0 auto' }} span={2}><div style={{ width: '98%' }}>
                        <Typography.Paragraph ellipsis={{ tooltip: true, rows: 2 }}>{targetingTranslation}</Typography.Paragraph>
                    </div></Descriptions.Item>
                    <Descriptions.Item label="首日开始时间" labelStyle={{ width: 100 }}>{firstDayBeginTime}</Descriptions.Item>
                    <Descriptions.Item label="日预算" labelStyle={{ width: 100 }}>{dailyBudget}</Descriptions.Item>
                    <Descriptions.Item label="出价策略" labelStyle={{ width: 100 }}>{BidStrategyEnum[bidStrategy as keyof typeof BidStrategyEnum]}</Descriptions.Item>
                </Descriptions>
            </Spin>
        }
        return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
    }, [getAdgroupDetails?.data?.data, getAdgroupDetails.loading])

    return <div style={{ width: width - 20, left: scrollLeft }} className="expandContent">
        <Card
            className="detail_card"
            hoverable
            style={{ width: (width - 20) / 2 }}
        >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px 0' }}>
                <strong>广告</strong>
                <Space align="center">
                    <span style={{ fontSize: 10, color: '#999' }}>刷新时间:{getAdgroupDetails?.data?.reqTime}</span>
                    <a onClick={() => getAdgroupDetails.refresh()} style={{ fontSize: 14 }}>刷新</a>
                </Space>
            </div>
            <div style={{ padding: 16 }}>
                {AdContent}
            </div>
        </Card>
        <Card
            className="detail_card"
            hoverable
            style={{ width: (width - 20) / 2 }}
        >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px 0' }}>
                <strong>趋势</strong>
                <Space align="center">
                    <Select
                        size="small"
                        value={queryColumnTrend.timeUnit}
                        style={{ width: 78 }}
                        onChange={(e) => {
                            setQueryColumnTrend({ ...queryColumnTrend, timeUnit: e })
                        }}
                    >
                        <Select.Option value="day">天</Select.Option>
                        <Select.Option value="hour">小时</Select.Option>
                        <Select.Option value="minute">5min</Select.Option>
                    </Select>
                    <span style={{ fontSize: 10, color: '#999' }}>刷新时间:{getColumnTrendV3?.data?.reqTime}</span>
                    <a onClick={() => getCTList()} style={{ fontSize: 14 }}>刷新</a>
                </Space>
            </div>
            <div style={{ width: '100%', height: 260, textAlign: 'center' }}>
                {getColumnTrendV3?.loading ? <Spin /> : <LineMonitor style={{ width: '100%', height: 260 }} series smooth data={lineDis} />}
            </div>
        </Card>
    </div>
}

export default React.memo(AdExpandedRowRender)