| 
					
				 | 
			
			
				@@ -0,0 +1,359 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import React, { useEffect, useRef, 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 { useModel } from "umi" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { formatBytes, formatSecondsToTime, groupBy } from "@/utils/utils" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import SelectGroupSearch from "./selectGroupSearch" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import './global.less' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import '../../tencentAdPutIn/index.less' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { showFieldList } from "./const" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { EyeOutlined, SortAscendingOutlined } from "@ant-design/icons" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { useSize } from "ahooks" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import PlayVideo from "./playVideo" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import Lazyimg from "react-lazyimg-component" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const { Text, Paragraph } = Typography; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+/** 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ * 选择账户组媒体素材 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ * @param param0  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ * @returns  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ */ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num, defaultParams, checkedFolderList, setCheckedFolderList, sortData, setSortData, showField, setShowField, accountCreateLogs }) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    /*****************************************/ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const { getAllUserAccount } = useModel('useLaunchAdq.useAdAuthorize') 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const ref = useRef<HTMLDivElement>(null); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const size = useSize(ref); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    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 [ownerAccountId, setOwnerAccountId] = useState<number>() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const [previewData, setPreviewData] = useState<{ visible: boolean, url?: string }>({ visible: false }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const getPageRemoteImageDataList = useAjax((params) => getPageRemoteImageDataListApi(params)) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    /*****************************************/ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // 根据内容宽度计算列数 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    useEffect(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (size?.width) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let rowNum = Math.floor((size?.width - 26) / 220) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            setRowNum(rowNum || 1) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, [size?.width]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // 处理全选按钮状态 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    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) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            getAllUserAccount.run().then(res => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (res?.data?.length) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    const list = accountCreateLogs.map(item => item.accountId) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    const selectAccountList = res.data.filter((item: { accountId: any }) => list.includes(item.accountId)) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    const groupAccount = groupBy(selectAccountList, (item) => item.groupId, true) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    const GrounpArray = Object.keys(groupAccount).map(function (group) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        return groupAccount[group]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    if (GrounpArray.length === 1) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        setOwnerAccountId(GrounpArray?.[0]?.[0]?.authMainAccountId || GrounpArray?.[0]?.[0]?.accountId) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } else if (GrounpArray.length === 2 && groupAccount?.['undefined']?.length === 1) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        const undefinedAccount = groupAccount?.['undefined'][0].accountId 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        let authMainAccountId: any 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        Object.keys(groupAccount).forEach(key => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            if (key !== 'undefined') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                authMainAccountId = groupAccount[key][0].authMainAccountId 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        if (undefinedAccount === authMainAccountId) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            setOwnerAccountId(authMainAccountId) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            setOwnerAccountId(-1) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        setOwnerAccountId(-1) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, [accountCreateLogs]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    useEffect(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (ownerAccountId) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let params = { ...searchParams, ...defaultParams, ...queryParams, ownerAccountId } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (sortData?.sortField) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                params = { ...params, ...sortData } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            getPageRemoteImageDataList.run(params) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, [queryParams, defaultParams, searchParams, sortData, showField, ownerAccountId]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // 选择 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const onCheckboxChange = (checked: boolean, item: any) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let newCheckedFolderList: any[] = JSON.parse(JSON.stringify(checkedFolderList)) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (checked) { // 选中 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            newCheckedFolderList.push({ ...item, id: item.image_id || item.video_id, material_type: defaultParams.materialType, oss_url: item.preview_url, materialType: 1 }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } else { // 取消 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let id = item.image_id || item.video_id 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            newCheckedFolderList = newCheckedFolderList.filter(i => i.id !== id) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        setCheckedFolderList(newCheckedFolderList) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    return <Spin spinning={getAllUserAccount.loading} wrapperClassName={'select_group_spin'}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <div className={style.select_cloudNew_layout}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            {ownerAccountId ? <> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                {/* 搜索 */} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <SelectGroupSearch 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    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 }))) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                } 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 }))) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                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} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        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>「排序-{showFieldList.find(item => item.value === sortData.sortField)?.label}-{sortData.sortType ? '正序' : '倒序'}」</Text>} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                </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={showFieldList} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        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={showFieldList.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} ref={ref}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        {getPageRemoteImageDataList?.data?.records?.length > 0 ? <Checkbox.Group value={checkedFolderList?.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?.map(item => item.id).includes(id) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                    const disabled = 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.create_time': 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                            return <Paragraph key={field} style={{ fontSize: 12, marginBottom: 1 }}>创建时间:{item?.create_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 }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    }} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </Card> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </> : ownerAccountId === -1 ? <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(SelectGroupCloudNew) 
			 |