|  | @@ -0,0 +1,348 @@
 | 
											
												
													
														|  | 
 |  | +import React, { useEffect, useState } from "react"
 | 
											
												
													
														|  | 
 |  | +import style from './index.less'
 | 
											
												
													
														|  | 
 |  | +import { Button, Card, Checkbox, Divider, Empty, Form, message, Pagination, Popover, Radio, Result, Select, Space, Spin, Typography, Image } from "antd"
 | 
											
												
													
														|  | 
 |  | +import { useAjax } from "@/Hook/useAjax"
 | 
											
												
													
														|  | 
 |  | +import { getPageRemoteImageDataListApi } from "@/services/adqV3/cloudNew"
 | 
											
												
													
														|  | 
 |  | +import { formatBytes, formatSecondsToTime, groupBy } from "@/utils/utils"
 | 
											
												
													
														|  | 
 |  | +import SelectGroupSearch from "./selectGroupSearch"
 | 
											
												
													
														|  | 
 |  | +import './global.less'
 | 
											
												
													
														|  | 
 |  | +import '../../tencentAdPutIn/index.less'
 | 
											
												
													
														|  | 
 |  | +import { showField1List } from "./const"
 | 
											
												
													
														|  | 
 |  | +import { EyeOutlined, SortAscendingOutlined } from "@ant-design/icons"
 | 
											
												
													
														|  | 
 |  | +import PlayVideo from "./playVideo"
 | 
											
												
													
														|  | 
 |  | +import Lazyimg from "react-lazyimg-component"
 | 
											
												
													
														|  | 
 |  | +import { useLocalStorageState } from "ahooks"
 | 
											
												
													
														|  | 
 |  | +import SyncCloudSc from "./syncCloudSc"
 | 
											
												
													
														|  | 
 |  | +import { checkAccountUnitApi, getUserAccountListApi } from "@/services/launchAdq/adAuthorize"
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +const { Text, Paragraph } = Typography;
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +/**
 | 
											
												
													
														|  | 
 |  | + * 选择业务单元素材
 | 
											
												
													
														|  | 
 |  | + * @param param0 
 | 
											
												
													
														|  | 
 |  | + * @returns 
 | 
											
												
													
														|  | 
 |  | + */
 | 
											
												
													
														|  | 
 |  | +const SelectGroupUnitNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num, defaultParams, checkedFolderList, setCheckedFolderList, accountCreateLogs, putInType, active }) => {
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    /*****************************************/
 | 
											
												
													
														|  | 
 |  | +    const [rowNum, setRowNum] = useState<number>(0)
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    const [checkFolderAll, setCheckFolderAll] = useState<boolean>(false);
 | 
											
												
													
														|  | 
 |  | +    const [indeterminateFolder, setIndeterminateFolder] = useState<boolean>(false);
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    const [queryParams, setQueryParams] = useState<Omit<CLOUDNEW.GetPageRemoteImageDataListProps, 'materialType'>>({ pageNum: 1, pageSize: 20 })
 | 
											
												
													
														|  | 
 |  | +    const [searchParams, setSearchParams] = useState<Partial<Omit<CLOUDNEW.GetPageRemoteImageDataListProps, 'materialType'>>>({})
 | 
											
												
													
														|  | 
 |  | +    const [unitAccountId, setUnitAccountId] = useState<number>()
 | 
											
												
													
														|  | 
 |  | +    const [previewData, setPreviewData] = useState<{ visible: boolean, url?: string }>({ visible: false })
 | 
											
												
													
														|  | 
 |  | +    const [sortData, setSortData] = useLocalStorageState<{ sortField: string | undefined, sortType: boolean }>('sort-data-unit', { sortField: undefined, sortType: false });
 | 
											
												
													
														|  | 
 |  | +    const [showField, setShowField] = useLocalStorageState<string[]>('show-field-unit', ['material.create_time', 'material_data_day.cost', 'material_data_day.ctr', 'material_data_day.conversions_rate', 'material_data_day.dynamic_creative_count']);
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    const getPageRemoteImageDataList = useAjax((params) => getPageRemoteImageDataListApi(params))
 | 
											
												
													
														|  | 
 |  | +    const checkAccountUnit = useAjax((params) => checkAccountUnitApi(params))
 | 
											
												
													
														|  | 
 |  | +    /*****************************************/
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    // 根据内容宽度计算列数
 | 
											
												
													
														|  | 
 |  | +    useEffect(() => {
 | 
											
												
													
														|  | 
 |  | +        let rowNum = Math.floor(1350 / 220)
 | 
											
												
													
														|  | 
 |  | +        setRowNum(rowNum || 1)
 | 
											
												
													
														|  | 
 |  | +    }, [])
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    // 处理全选按钮状态
 | 
											
												
													
														|  | 
 |  | +    useEffect(() => {
 | 
											
												
													
														|  | 
 |  | +        let data: any[] = getPageRemoteImageDataList?.data?.records || []
 | 
											
												
													
														|  | 
 |  | +        let dataIds = data.map(item => item.image_id || item.video_id)
 | 
											
												
													
														|  | 
 |  | +        let selectIds = checkedFolderList.map(item => item.id)
 | 
											
												
													
														|  | 
 |  | +        if (selectIds.length === 0 || dataIds.length === 0) {
 | 
											
												
													
														|  | 
 |  | +            setCheckFolderAll(false)
 | 
											
												
													
														|  | 
 |  | +            setIndeterminateFolder(false);
 | 
											
												
													
														|  | 
 |  | +        } else if (dataIds.every((element) => selectIds.includes(element))) {
 | 
											
												
													
														|  | 
 |  | +            setCheckFolderAll(true)
 | 
											
												
													
														|  | 
 |  | +            setIndeterminateFolder(false);
 | 
											
												
													
														|  | 
 |  | +        } else if (dataIds.some((element) => selectIds.includes(element))) {
 | 
											
												
													
														|  | 
 |  | +            setCheckFolderAll(false)
 | 
											
												
													
														|  | 
 |  | +            setIndeterminateFolder(true);
 | 
											
												
													
														|  | 
 |  | +        } else {
 | 
											
												
													
														|  | 
 |  | +            setCheckFolderAll(false)
 | 
											
												
													
														|  | 
 |  | +            setIndeterminateFolder(false);
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +    }, [checkedFolderList, getPageRemoteImageDataList?.data?.records])
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    useEffect(() => {
 | 
											
												
													
														|  | 
 |  | +        if (accountCreateLogs?.length) {
 | 
											
												
													
														|  | 
 |  | +            checkAccountUnit.run(accountCreateLogs.map(item => item.accountId)).then(res => {
 | 
											
												
													
														|  | 
 |  | +                setUnitAccountId(res?.adUnitAccountId)
 | 
											
												
													
														|  | 
 |  | +            })
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +    }, [accountCreateLogs])
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    useEffect(() => {
 | 
											
												
													
														|  | 
 |  | +        if (unitAccountId) {
 | 
											
												
													
														|  | 
 |  | +            let params = { ...searchParams, ...defaultParams, ...queryParams, ownerAccountId: unitAccountId }
 | 
											
												
													
														|  | 
 |  | +            if (sortData?.sortField) {
 | 
											
												
													
														|  | 
 |  | +                params = { ...params, ...sortData }
 | 
											
												
													
														|  | 
 |  | +            }
 | 
											
												
													
														|  | 
 |  | +            getPageRemoteImageDataList.run(params)
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +    }, [queryParams, defaultParams, searchParams, sortData, showField, unitAccountId])
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    // 选择
 | 
											
												
													
														|  | 
 |  | +    const onCheckboxChange = (checked: boolean, item: any) => {
 | 
											
												
													
														|  | 
 |  | +        let newCheckedFolderList: any[] = JSON.parse(JSON.stringify(checkedFolderList))
 | 
											
												
													
														|  | 
 |  | +        if (active || active === 0) {
 | 
											
												
													
														|  | 
 |  | +            if (checked) { // 选中
 | 
											
												
													
														|  | 
 |  | +                newCheckedFolderList[active] = { ...item, id: item.image_id || item.video_id, material_type: defaultParams.materialType, oss_url: item.preview_url, materialType: 1, isUnit: true }
 | 
											
												
													
														|  | 
 |  | +            } else { // 取消
 | 
											
												
													
														|  | 
 |  | +                message.warning('请选择其他图片替换')
 | 
											
												
													
														|  | 
 |  | +                return
 | 
											
												
													
														|  | 
 |  | +            }
 | 
											
												
													
														|  | 
 |  | +        } else {
 | 
											
												
													
														|  | 
 |  | +            if (checked) { // 选中
 | 
											
												
													
														|  | 
 |  | +                newCheckedFolderList.push({ ...item, id: item.image_id || item.video_id, material_type: defaultParams.materialType, oss_url: item.preview_url, materialType: 1, isUnit: true })
 | 
											
												
													
														|  | 
 |  | +            } else { // 取消
 | 
											
												
													
														|  | 
 |  | +                let id = item.image_id || item.video_id
 | 
											
												
													
														|  | 
 |  | +                newCheckedFolderList = newCheckedFolderList.filter(i => i.id !== id)
 | 
											
												
													
														|  | 
 |  | +            }
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +        setCheckedFolderList(newCheckedFolderList)
 | 
											
												
													
														|  | 
 |  | +    };
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    return <Spin spinning={checkAccountUnit.loading} wrapperClassName={'select_group_spin'}>
 | 
											
												
													
														|  | 
 |  | +        <div className={style.select_cloudNew_layout}>
 | 
											
												
													
														|  | 
 |  | +            {unitAccountId ? <>
 | 
											
												
													
														|  | 
 |  | +                {/* 搜索 */}
 | 
											
												
													
														|  | 
 |  | +                <SelectGroupSearch
 | 
											
												
													
														|  | 
 |  | +                    type={defaultParams.materialType}
 | 
											
												
													
														|  | 
 |  | +                    onSearch={(value) => { setSearchParams(value) }}
 | 
											
												
													
														|  | 
 |  | +                />
 | 
											
												
													
														|  | 
 |  | +                <Card
 | 
											
												
													
														|  | 
 |  | +                    style={{ height: '100%', flex: '1 0', overflow: 'hidden' }}
 | 
											
												
													
														|  | 
 |  | +                    bodyStyle={{ padding: 0, overflow: 'auto hidden', height: '100%' }}
 | 
											
												
													
														|  | 
 |  | +                    className="cardResetCss buttonResetCss"
 | 
											
												
													
														|  | 
 |  | +                    bordered
 | 
											
												
													
														|  | 
 |  | +                >
 | 
											
												
													
														|  | 
 |  | +                    <div className={style.cloudNew}>
 | 
											
												
													
														|  | 
 |  | +                        <div className={style.material} style={{ height: '100%' }}>
 | 
											
												
													
														|  | 
 |  | +                            <div className={style.operates}>
 | 
											
												
													
														|  | 
 |  | +                                <div className={style.left_bts}>
 | 
											
												
													
														|  | 
 |  | +                                    <Checkbox
 | 
											
												
													
														|  | 
 |  | +                                        onChange={(e) => {
 | 
											
												
													
														|  | 
 |  | +                                            let newCheckedFolderList: any[] = JSON.parse(JSON.stringify(checkedFolderList))
 | 
											
												
													
														|  | 
 |  | +                                            const data: any[] = getPageRemoteImageDataList?.data?.records
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +                                            if (e.target.checked) { // 全选
 | 
											
												
													
														|  | 
 |  | +                                                const selectIds = newCheckedFolderList.map(item => item.id)
 | 
											
												
													
														|  | 
 |  | +                                                const remainData = data.filter(item => {
 | 
											
												
													
														|  | 
 |  | +                                                    const id = item.image_id || item.video_id
 | 
											
												
													
														|  | 
 |  | +                                                    return !selectIds.includes(id)
 | 
											
												
													
														|  | 
 |  | +                                                })
 | 
											
												
													
														|  | 
 |  | +                                                const remainDataLength = remainData.length
 | 
											
												
													
														|  | 
 |  | +                                                const remainNum = num - newCheckedFolderList.length
 | 
											
												
													
														|  | 
 |  | +                                                if (remainNum > remainDataLength) {
 | 
											
												
													
														|  | 
 |  | +                                                    newCheckedFolderList.push(...remainData.map(i => ({ ...i, material_type: defaultParams.materialType, id: i.image_id || i.video_id, oss_url: i.preview_url, materialType: 1, isUnit: true })))
 | 
											
												
													
														|  | 
 |  | +                                                } else {
 | 
											
												
													
														|  | 
 |  | +                                                    newCheckedFolderList.push(...remainData.splice(0, remainNum).map(i => ({ ...i, material_type: defaultParams.materialType, id: i.image_id || i.video_id, oss_url: i.preview_url, materialType: 1, isUnit: true })))
 | 
											
												
													
														|  | 
 |  | +                                                }
 | 
											
												
													
														|  | 
 |  | +                                                newCheckedFolderList = Array.from(new Set(newCheckedFolderList.map(item => JSON.stringify(item)))).map(item => JSON.parse(item));
 | 
											
												
													
														|  | 
 |  | +                                            } else { // 取消全选
 | 
											
												
													
														|  | 
 |  | +                                                const dataIds = data.map(item => item.image_id || item.video_id)
 | 
											
												
													
														|  | 
 |  | +                                                newCheckedFolderList = newCheckedFolderList.filter(i => !dataIds.includes(i.id))
 | 
											
												
													
														|  | 
 |  | +                                            }
 | 
											
												
													
														|  | 
 |  | +                                            setCheckedFolderList(newCheckedFolderList)
 | 
											
												
													
														|  | 
 |  | +                                        }}
 | 
											
												
													
														|  | 
 |  | +                                        disabled={checkedFolderList?.length >= num || !!active || active === 0}
 | 
											
												
													
														|  | 
 |  | +                                        indeterminate={indeterminateFolder}
 | 
											
												
													
														|  | 
 |  | +                                        checked={checkFolderAll}
 | 
											
												
													
														|  | 
 |  | +                                    >全选</Checkbox>
 | 
											
												
													
														|  | 
 |  | +                                    <span>已选 <span style={{ color: '#1890FF' }}>{checkedFolderList?.length || 0}</span>/{num} 个素材</span>
 | 
											
												
													
														|  | 
 |  | +                                    {checkedFolderList.length > 0 && <a style={{ color: 'red' }} onClick={() => setCheckedFolderList([])}>清除所有</a>}
 | 
											
												
													
														|  | 
 |  | +                                    {sortData?.sortField && <Text>「排序-{showField1List.find(item => item.value === sortData.sortField)?.label}-{sortData.sortType ? '正序' : '倒序'}」</Text>}
 | 
											
												
													
														|  | 
 |  | +                                    {/* 同步素材 */}
 | 
											
												
													
														|  | 
 |  | +                                    <SyncCloudSc
 | 
											
												
													
														|  | 
 |  | +                                        accountId={unitAccountId}
 | 
											
												
													
														|  | 
 |  | +                                    />
 | 
											
												
													
														|  | 
 |  | +                                </div>
 | 
											
												
													
														|  | 
 |  | +                                <div className={style.left_bts}>
 | 
											
												
													
														|  | 
 |  | +                                    <Popover
 | 
											
												
													
														|  | 
 |  | +                                        content={<div style={{ width: 320 }}>
 | 
											
												
													
														|  | 
 |  | +                                            <Form
 | 
											
												
													
														|  | 
 |  | +                                                labelCol={{ span: 5 }}
 | 
											
												
													
														|  | 
 |  | +                                                labelAlign="left"
 | 
											
												
													
														|  | 
 |  | +                                                colon={false}
 | 
											
												
													
														|  | 
 |  | +                                            >
 | 
											
												
													
														|  | 
 |  | +                                                <Form.Item label={<strong>展示指标</strong>}>
 | 
											
												
													
														|  | 
 |  | +                                                    <Select
 | 
											
												
													
														|  | 
 |  | +                                                        placeholder="选择展示指标"
 | 
											
												
													
														|  | 
 |  | +                                                        showSearch
 | 
											
												
													
														|  | 
 |  | +                                                        filterOption={(input, option) =>
 | 
											
												
													
														|  | 
 |  | +                                                            (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
 | 
											
												
													
														|  | 
 |  | +                                                        }
 | 
											
												
													
														|  | 
 |  | +                                                        mode="multiple"
 | 
											
												
													
														|  | 
 |  | +                                                        options={showField1List}
 | 
											
												
													
														|  | 
 |  | +                                                        value={showField}
 | 
											
												
													
														|  | 
 |  | +                                                        onChange={(value) => {
 | 
											
												
													
														|  | 
 |  | +                                                            if (value.length > 6) {
 | 
											
												
													
														|  | 
 |  | +                                                                message.warn('最多只能选择6个指标')
 | 
											
												
													
														|  | 
 |  | +                                                                return
 | 
											
												
													
														|  | 
 |  | +                                                            }
 | 
											
												
													
														|  | 
 |  | +                                                            if (value.length < 1) {
 | 
											
												
													
														|  | 
 |  | +                                                                message.warn('最少选择1个指标')
 | 
											
												
													
														|  | 
 |  | +                                                                return
 | 
											
												
													
														|  | 
 |  | +                                                            }
 | 
											
												
													
														|  | 
 |  | +                                                            setSortData({ ...sortData, sortField: undefined })
 | 
											
												
													
														|  | 
 |  | +                                                            setShowField(value as any)
 | 
											
												
													
														|  | 
 |  | +                                                        }}
 | 
											
												
													
														|  | 
 |  | +                                                    />
 | 
											
												
													
														|  | 
 |  | +                                                </Form.Item>
 | 
											
												
													
														|  | 
 |  | +                                                <Form.Item label={<strong>排序</strong>}>
 | 
											
												
													
														|  | 
 |  | +                                                    <Space>
 | 
											
												
													
														|  | 
 |  | +                                                        <Select
 | 
											
												
													
														|  | 
 |  | +                                                            style={{ width: 125 }}
 | 
											
												
													
														|  | 
 |  | +                                                            placeholder="选择排序指标"
 | 
											
												
													
														|  | 
 |  | +                                                            showSearch
 | 
											
												
													
														|  | 
 |  | +                                                            filterOption={(input, option) =>
 | 
											
												
													
														|  | 
 |  | +                                                                (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
 | 
											
												
													
														|  | 
 |  | +                                                            }
 | 
											
												
													
														|  | 
 |  | +                                                            options={showField1List.filter(item => showField.includes(item.value) && item.value !== 'description')}
 | 
											
												
													
														|  | 
 |  | +                                                            value={sortData.sortField}
 | 
											
												
													
														|  | 
 |  | +                                                            allowClear
 | 
											
												
													
														|  | 
 |  | +                                                            onChange={(value) => {
 | 
											
												
													
														|  | 
 |  | +                                                                setSortData({ ...sortData, sortField: value as any })
 | 
											
												
													
														|  | 
 |  | +                                                            }}
 | 
											
												
													
														|  | 
 |  | +                                                        />
 | 
											
												
													
														|  | 
 |  | +                                                        <Radio.Group value={sortData.sortType} onChange={(e) => setSortData({ ...sortData, sortType: e.target.value })} buttonStyle="solid">
 | 
											
												
													
														|  | 
 |  | +                                                            <Radio.Button value={true}>正序</Radio.Button>
 | 
											
												
													
														|  | 
 |  | +                                                            <Radio.Button value={false}>倒序</Radio.Button>
 | 
											
												
													
														|  | 
 |  | +                                                        </Radio.Group>
 | 
											
												
													
														|  | 
 |  | +                                                    </Space>
 | 
											
												
													
														|  | 
 |  | +                                                </Form.Item>
 | 
											
												
													
														|  | 
 |  | +                                            </Form>
 | 
											
												
													
														|  | 
 |  | +                                        </div>}
 | 
											
												
													
														|  | 
 |  | +                                        trigger={['click']}
 | 
											
												
													
														|  | 
 |  | +                                        title={<strong>自定义展示指标与排序</strong>}
 | 
											
												
													
														|  | 
 |  | +                                        placement="bottomRight"
 | 
											
												
													
														|  | 
 |  | +                                    >
 | 
											
												
													
														|  | 
 |  | +                                        <Button icon={<SortAscendingOutlined />}>自定义展示指标与排序</Button>
 | 
											
												
													
														|  | 
 |  | +                                    </Popover>
 | 
											
												
													
														|  | 
 |  | +                                </div>
 | 
											
												
													
														|  | 
 |  | +                            </div>
 | 
											
												
													
														|  | 
 |  | +                            <div className={`${style.content} content_global`}>
 | 
											
												
													
														|  | 
 |  | +                                <Spin spinning={getPageRemoteImageDataList.loading}>
 | 
											
												
													
														|  | 
 |  | +                                    <div className={`${style.content_scroll} scroll`}>
 | 
											
												
													
														|  | 
 |  | +                                        {getPageRemoteImageDataList?.data?.records?.length > 0 ? <Checkbox.Group value={checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id)} style={{ width: '100%' }}>
 | 
											
												
													
														|  | 
 |  | +                                            <div className={style.content_scroll_div}>
 | 
											
												
													
														|  | 
 |  | +                                                {getPageRemoteImageDataList?.data?.records.map((item: any) => {
 | 
											
												
													
														|  | 
 |  | +                                                    let id = defaultParams.materialType === 'image' ? item.image_id : item.video_id
 | 
											
												
													
														|  | 
 |  | +                                                    const isSelect = checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id).includes(id)
 | 
											
												
													
														|  | 
 |  | +                                                    const disabled = (active || active === 0) ? false : (checkedFolderList.length >= num && !isSelect)
 | 
											
												
													
														|  | 
 |  | +                                                    return <div key={id} className={style.content_row} style={{ width: rowNum ? (1 / rowNum * 100) + '%' : 220 }}>
 | 
											
												
													
														|  | 
 |  | +                                                        <Card
 | 
											
												
													
														|  | 
 |  | +                                                            hoverable
 | 
											
												
													
														|  | 
 |  | +                                                            bodyStyle={{ padding: 0 }}
 | 
											
												
													
														|  | 
 |  | +                                                            style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
 | 
											
												
													
														|  | 
 |  | +                                                            className={`${style.content_col}`}
 | 
											
												
													
														|  | 
 |  | +                                                            cover={<div style={{ height: 120, padding: 0 }} className={style.content_cover}>
 | 
											
												
													
														|  | 
 |  | +                                                                <div className={style.checkbox}><Checkbox disabled={disabled} value={id} onChange={(e) => onCheckboxChange(e.target.checked, item)} /></div>
 | 
											
												
													
														|  | 
 |  | +                                                                {defaultParams.materialType === 'video' ? <div className={style.playr}>
 | 
											
												
													
														|  | 
 |  | +                                                                    <PlayVideo videoUrl={item.preview_url}>{(onPlay) => <img onClick={(e) => {
 | 
											
												
													
														|  | 
 |  | +                                                                        e.stopPropagation(); e.preventDefault()
 | 
											
												
													
														|  | 
 |  | +                                                                        onPlay()
 | 
											
												
													
														|  | 
 |  | +                                                                    }} src={require('../../../../../public/image/play.png')} alt="" />}</PlayVideo>
 | 
											
												
													
														|  | 
 |  | +                                                                </div> : <div className={style.imgPreview} onClick={(e) => {
 | 
											
												
													
														|  | 
 |  | +                                                                    e.stopPropagation()
 | 
											
												
													
														|  | 
 |  | +                                                                    setPreviewData({ visible: true, url: item.preview_url })
 | 
											
												
													
														|  | 
 |  | +                                                                }}>
 | 
											
												
													
														|  | 
 |  | +                                                                    <Space><EyeOutlined /><span>预览</span></Space>
 | 
											
												
													
														|  | 
 |  | +                                                                </div>}
 | 
											
												
													
														|  | 
 |  | +                                                                <div className={style.file_info}>
 | 
											
												
													
														|  | 
 |  | +                                                                    <div>{item.width}*{item.height}</div>
 | 
											
												
													
														|  | 
 |  | +                                                                    {defaultParams.materialType === 'video' && item.image_duration_millisecond && <div>{formatSecondsToTime(Math.floor(item.image_duration_millisecond / 1000))}</div>}
 | 
											
												
													
														|  | 
 |  | +                                                                </div>
 | 
											
												
													
														|  | 
 |  | +                                                                <Lazyimg
 | 
											
												
													
														|  | 
 |  | +                                                                    animateType="transition"
 | 
											
												
													
														|  | 
 |  | +                                                                    src={defaultParams.materialType === 'image' ? item.preview_url : item?.key_frame_image_url}
 | 
											
												
													
														|  | 
 |  | +                                                                    className={`${style.coverImg} lazy`}
 | 
											
												
													
														|  | 
 |  | +                                                                    animateClassName={['transition-enter', 'transition-enter-active']}
 | 
											
												
													
														|  | 
 |  | +                                                                />
 | 
											
												
													
														|  | 
 |  | +                                                            </div>}
 | 
											
												
													
														|  | 
 |  | +                                                            onClick={() => !disabled && onCheckboxChange(!isSelect, item)}
 | 
											
												
													
														|  | 
 |  | +                                                        >
 | 
											
												
													
														|  | 
 |  | +                                                            <div className={style.body}>
 | 
											
												
													
														|  | 
 |  | +                                                                <Text ellipsis strong style={{ flex: '1 0' }}>{item?.material_name}</Text>
 | 
											
												
													
														|  | 
 |  | +                                                                <Text style={{ fontSize: 12 }}>{formatBytes(item?.file_size)}</Text>
 | 
											
												
													
														|  | 
 |  | +                                                            </div>
 | 
											
												
													
														|  | 
 |  | +                                                            <Divider style={{ margin: '0 0 4px 0' }} />
 | 
											
												
													
														|  | 
 |  | +                                                            <div style={{ padding: '0 10px 6px' }}>
 | 
											
												
													
														|  | 
 |  | +                                                                {showField.map(field => {
 | 
											
												
													
														|  | 
 |  | +                                                                    switch (field) {
 | 
											
												
													
														|  | 
 |  | +                                                                        case 'material.created_time':
 | 
											
												
													
														|  | 
 |  | +                                                                            return <Paragraph key={field} style={{ fontSize: 12, marginBottom: 1 }}>创建时间:{item?.created_time}</Paragraph>
 | 
											
												
													
														|  | 
 |  | +                                                                        case 'material_data_day.cost':
 | 
											
												
													
														|  | 
 |  | +                                                                            return <Paragraph key={field} style={{ fontSize: 12, marginBottom: 1 }}>消耗:{(item?.cost === null || item?.cost === undefined) ? '--' : item?.cost}</Paragraph>
 | 
											
												
													
														|  | 
 |  | +                                                                        case 'material_data_day.order_pv':
 | 
											
												
													
														|  | 
 |  | +                                                                            return <Paragraph key={field} style={{ fontSize: 12, marginBottom: 1 }}>下单次数:{(item?.order_pv === null || item?.order_pv === undefined) ? '--' : item?.order_pv}</Paragraph>
 | 
											
												
													
														|  | 
 |  | +                                                                        case 'material_data_day.order_cost':
 | 
											
												
													
														|  | 
 |  | +                                                                            return <Paragraph key={field} style={{ fontSize: 12, marginBottom: 1 }}>下单成本:{(item?.order_cost === null || item?.order_cost === undefined) ? '--' : item?.order_cost}</Paragraph>
 | 
											
												
													
														|  | 
 |  | +                                                                        case 'material_data_day.ctr':
 | 
											
												
													
														|  | 
 |  | +                                                                            return <Paragraph key={field} style={{ fontSize: 12, marginBottom: 1 }}>点击率:{(item?.ctr === null || item?.ctr === undefined) ? '--' : (item?.ctr * 100).toFixed(2) + '%'}</Paragraph>
 | 
											
												
													
														|  | 
 |  | +                                                                        case 'material_data_day.conversions_rate':
 | 
											
												
													
														|  | 
 |  | +                                                                            return <Paragraph key={field} style={{ fontSize: 12, marginBottom: 1 }}>目标转化率:{(item?.conversions_rate === null || item?.conversions_rate === undefined) ? '--' : (item?.conversions_rate * 100).toFixed(2) + '%'}</Paragraph>
 | 
											
												
													
														|  | 
 |  | +                                                                        case 'material_data_day.adgroup_count':
 | 
											
												
													
														|  | 
 |  | +                                                                            return <Paragraph key={field} style={{ fontSize: 12, marginBottom: 1 }}>广告关联数:{(item?.adgroup_count === null || item?.adgroup_count === undefined) ? '--' : item?.adgroup_count}</Paragraph>
 | 
											
												
													
														|  | 
 |  | +                                                                        case 'material_data_day.dynamic_creative_count':
 | 
											
												
													
														|  | 
 |  | +                                                                            return <Paragraph key={field} style={{ fontSize: 12, marginBottom: 1 }}>创意关联数:{(item?.dynamic_creative_count === null || item?.dynamic_creative_count === undefined) ? '--' : item?.dynamic_creative_count}</Paragraph>
 | 
											
												
													
														|  | 
 |  | +                                                                        default:
 | 
											
												
													
														|  | 
 |  | +                                                                            return null
 | 
											
												
													
														|  | 
 |  | +                                                                    }
 | 
											
												
													
														|  | 
 |  | +                                                                })}
 | 
											
												
													
														|  | 
 |  | +                                                                {showField.includes('description') && <Paragraph style={{ fontSize: 12, marginBottom: 1 }} ellipsis={{ tooltip: true }}>备注:{item.description || '--'}</Paragraph>}
 | 
											
												
													
														|  | 
 |  | +                                                            </div>
 | 
											
												
													
														|  | 
 |  | +                                                        </Card>
 | 
											
												
													
														|  | 
 |  | +                                                    </div>
 | 
											
												
													
														|  | 
 |  | +                                                })}
 | 
											
												
													
														|  | 
 |  | +                                            </div>
 | 
											
												
													
														|  | 
 |  | +                                        </Checkbox.Group> : <div style={{ height: '100%', width: '100%', alignContent: 'center' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>}
 | 
											
												
													
														|  | 
 |  | +                                    </div>
 | 
											
												
													
														|  | 
 |  | +                                </Spin>
 | 
											
												
													
														|  | 
 |  | +                            </div>
 | 
											
												
													
														|  | 
 |  | +                            <div className={style.fotter}>
 | 
											
												
													
														|  | 
 |  | +                                <Pagination
 | 
											
												
													
														|  | 
 |  | +                                    size="small"
 | 
											
												
													
														|  | 
 |  | +                                    total={getPageRemoteImageDataList?.data?.total || 0}
 | 
											
												
													
														|  | 
 |  | +                                    showSizeChanger
 | 
											
												
													
														|  | 
 |  | +                                    showQuickJumper
 | 
											
												
													
														|  | 
 |  | +                                    pageSize={getPageRemoteImageDataList?.data?.size || 20}
 | 
											
												
													
														|  | 
 |  | +                                    current={getPageRemoteImageDataList?.data?.current || 1}
 | 
											
												
													
														|  | 
 |  | +                                    onChange={(page: number, pageSize: number) => {
 | 
											
												
													
														|  | 
 |  | +                                        setQueryParams({ ...queryParams, pageNum: page, pageSize })
 | 
											
												
													
														|  | 
 |  | +                                    }}
 | 
											
												
													
														|  | 
 |  | +                                    pageSizeOptions={[10, 15, 20, 50, 100]}
 | 
											
												
													
														|  | 
 |  | +                                />
 | 
											
												
													
														|  | 
 |  | +                            </div>
 | 
											
												
													
														|  | 
 |  | +                        </div>
 | 
											
												
													
														|  | 
 |  | +                    </div>
 | 
											
												
													
														|  | 
 |  | +                </Card>
 | 
											
												
													
														|  | 
 |  | +            </> : checkAccountUnit?.data ? <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
 | 
											
												
													
														|  | 
 |  | +                <Result
 | 
											
												
													
														|  | 
 |  | +                    title="警告"
 | 
											
												
													
														|  | 
 |  | +                    status="500"
 | 
											
												
													
														|  | 
 |  | +                    subTitle="选择的账户不在一个业务单元中或者没有加入业务单元"
 | 
											
												
													
														|  | 
 |  | +                />
 | 
											
												
													
														|  | 
 |  | +            </div> : undefined}
 | 
											
												
													
														|  | 
 |  | +        </div>
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +        {/* 预览 */}
 | 
											
												
													
														|  | 
 |  | +        {previewData.visible && <Image
 | 
											
												
													
														|  | 
 |  | +            width={200}
 | 
											
												
													
														|  | 
 |  | +            style={{ display: 'none' }}
 | 
											
												
													
														|  | 
 |  | +            preview={{
 | 
											
												
													
														|  | 
 |  | +                visible: previewData.visible,
 | 
											
												
													
														|  | 
 |  | +                src: previewData.url,
 | 
											
												
													
														|  | 
 |  | +                onVisibleChange: value => {
 | 
											
												
													
														|  | 
 |  | +                    setPreviewData({ visible: false })
 | 
											
												
													
														|  | 
 |  | +                },
 | 
											
												
													
														|  | 
 |  | +            }}
 | 
											
												
													
														|  | 
 |  | +        />}
 | 
											
												
													
														|  | 
 |  | +    </Spin>
 | 
											
												
													
														|  | 
 |  | +}
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +export default React.memo(SelectGroupUnitNew)
 |