ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/SelectAccount/index.tsx

import Selector from "@/pages/launchSystemNew/launchManage/createAd/selector"
import React, { useEffect, useState } from "react"
import style from './index.less'
import { Button, Input, message, Modal, Select, Table, Tag, Tooltip, Typography } from "antd";
import { CloseCircleFilled } from "@ant-design/icons";
import { getGroupListApi, getAccountListApi } from "@/services/launchAdq/subgroup";
import { useAjax } from "@/Hook/useAjax";
import { getAccountAssetsGroupListAllApi } from "@/services/adqV3/global";
import { getAllUserAccountApi } from "@/services/launchAdq/adAuthorize";
import { arraysHaveSameValues, groupBy } from "@/utils/utils";
import { DELIVERY_MODE_ENUM } from "../../const";
import '../../index.less'
const { Text } = Typography;

interface Props {
    setAccountCreateLogs: React.Dispatch<React.SetStateAction<PULLIN.AccountCreateLogsProps[]>>
    accountCreateLogs: PULLIN.AccountCreateLogsProps[]
    setOwnerAccountId: React.Dispatch<React.SetStateAction<number | undefined>>
    ownerAccountId: number | undefined
    deliveryMode?: keyof typeof DELIVERY_MODE_ENUM
    mType?: string,
    putInType?: 'NOVEL' | 'GAME'
    onChange?: (value?: any[], isClear?: boolean) => void
    dynamicGroup?: any[]
}
/**
 * 选择账户
 * @returns 
 */
const SelectAccount: React.FC<Props> = ({ putInType, accountCreateLogs, setAccountCreateLogs, onChange, dynamicGroup, deliveryMode, mType }) => {

    /***********************************/

    const [visible, setVisible] = useState<boolean>(false)
    const [assetSharingDeta, setAssetSharingDeta] = useState<{ authMainAccountId: number, groupId: number }>() // 资产共享组
    const [dataSource, setDataSource] = useState<any[]>([])
    const [options, setOptions] = useState<any[]>([])
    const [selectedRows, setSelectedRows] = useState<any[]>([])
    const [mediaTypeGroupIds, setMediaTypeGroupIds] = useState<number[]>([])
    const [loading, setLoading] = useState<boolean>(false)
    const [inputAccountList, setInputAccountList] = useState<string[]>([])
    const [tipsVisible, setTipsVisible] = useState<boolean>(false)

    const getGroupList = useAjax(() => getGroupListApi())
    const getAccountAssetsGroupListAll = useAjax((params) => getAccountAssetsGroupListAllApi(params))
    const getAllUserAccount = useAjax(() => getAllUserAccountApi())
    /***********************************/

    // 判断选择的账号是否在同一个资产组，允许选择云端素材的关键
    const getauthMainAccountData = (accountCreateLogs: PULLIN.AccountCreateLogsProps[]) => {
        console.log('---->', getAllUserAccount?.data)
        if (getAllUserAccount?.data?.length && accountCreateLogs?.length) {
            const list = accountCreateLogs.map(item => item.accountId)
            const selectAccountList = getAllUserAccount.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) {
                return { authMainAccountId: GrounpArray?.[0]?.[0]?.authMainAccountId || GrounpArray?.[0]?.[0]?.accountId, isSelectRemote: true }
            } 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) {
                    return { authMainAccountId: authMainAccountId, isSelectRemote: true }
                } else {
                    return { authMainAccountId: -1, isSelectRemote: false }
                }
            } else {
                return { authMainAccountId: -1, isSelectRemote: false }
            }
        } else {
            return { authMainAccountId: undefined, isSelectRemote: false }
        }
    }

    useEffect(() => {
        if (visible && accountCreateLogs?.length) {
            setSelectedRows(accountCreateLogs)
        }
    }, [accountCreateLogs, visible])

    useEffect(() => {
        if (putInType) {
            // 获取账户组
            getGroupList.run()
            // 获取资产共享组
            getAccountAssetsGroupListAll.run({})
            // 账户
            getAllUserAccount.run().then(res => {
                if (res) {
                    let options = res?.filter((item: any) => putInType === 'NOVEL' ? ['NOVEL', 'NOVEL_IAA'].includes(item.adUnitType) : putInType === 'GAME' ? ['GAME', 'GAME_IAA'].includes(item.adUnitType) : false)
                    setOptions(options || [])
                    setDataSource(options || [])
                }
            })
        }
        return () => {
            document.body.style.overflow = 'auto';
        }
    }, [putInType])

    /** 获取分组里账号 */
    const getGroupAccountList = (ids: number[]) => {
        setMediaTypeGroupIds(ids)
        setAssetSharingDeta(undefined)
        if (ids.length > 0) {
            setLoading(true)
            let data = ids.map(id => getAccountListApi(id))
            Promise.all(data).then(res => {
                setLoading(false)
                if (res?.length > 0 && res.every((item: { code: number }) => item.code === 200)) {
                    let userArr: any[] = []
                    res.forEach((item: { data: { adAccountList: { accountId: number, id: number }[] } }) => {
                        item.data.adAccountList.forEach(acc => {
                            let obj = userArr.find((item: { accountId: number }) => item.accountId === acc.accountId)
                            if (!obj) {
                                userArr.push(acc.accountId)
                            }
                        })
                    })
                    setDataSource(options.filter(item => userArr.includes(item.accountId)))
                } else {
                    message.error('操作异常')
                }
            })
        } else {
            setDataSource(options)
        }
    }

    const handleOk = (isClear: boolean) => {
        document.body.style.overflow = 'auto';
        onChange?.(selectedRows, isClear)
        setSelectedRows([])
        setInputAccountList([])
        setMediaTypeGroupIds([])
        setAssetSharingDeta(undefined)
        setVisible(false)
        setTipsVisible(false)
    }

    const handleCancel = () => {
        document.body.style.overflow = 'auto';
        setSelectedRows([])
        setInputAccountList([])
        setMediaTypeGroupIds([])
        setAssetSharingDeta(undefined)
        setVisible(false)
    }

    return <div className={style.selectAccount}>
        <div className={style.selectAccount_row} style={{ zIndex: visible ? 1000 : 1 }}>
            <Selector
                label={visible ? '选择账户' : '媒体账户'}
                style={visible ? { borderColor: '#1890ff' } : {}}
                titleStyle={visible ? { borderColor: '#1890ff', color: '#1890ff' } : {}}
            >
                <div
                    className={style.selectAccount_select}
                    onClick={() => {
                        document.body.style.overflow = 'hidden';
                        setVisible(true)
                    }}
                >
                    <div className={style.selectAccount_select_content}>
                        {(visible && selectedRows.length > 0) ? <>
                            <Tag
                                closable
                                color="#F5F5F5"
                                key={selectedRows[0].accountId}
                                className={style.content_tag}
                                onClose={() => {
                                    setSelectedRows(selectedRows.slice(1))
                                }}
                            >{selectedRows[0].accountId}</Tag>
                            {selectedRows?.length > 1 && <Tooltip
                                color="#FFF"
                                title={<span style={{ color: '#000' }}>
                                    {selectedRows?.filter((_, index) => index !== 0)?.map((item) => <Tag
                                        color="#F5F5F5"
                                        className={style.content_tag}
                                        key={item.accountId}
                                        closable
                                        onClose={() => {
                                            setSelectedRows(selectedRows?.filter(item1 => item1.accountId !== item.accountId))
                                        }}
                                    >{item.accountId}</Tag>)}</span>
                                }
                            >
                                <Tag color="#F5F5F5" className={style.content_tag}>+{selectedRows.length - 1}</Tag>
                            </Tooltip>}
                        </> : (!visible && accountCreateLogs?.length > 0) ? <>
                            <Tag
                                closable
                                color="#F5F5F5"
                                className={style.content_tag}
                                key={accountCreateLogs[0].accountId}
                                onClose={() => {
                                    setAccountCreateLogs(accountCreateLogs.slice(1))
                                }}
                            >{accountCreateLogs[0].accountId}</Tag>
                            {accountCreateLogs?.length > 1 && <Tooltip
                                color="#FFF"
                                title={<span style={{ color: '#000' }}>
                                    {accountCreateLogs?.filter((_, index) => index !== 0)?.map((item) => <Tag
                                        className={style.content_tag}
                                        color="#F5F5F5"
                                        key={item.accountId}
                                        closable
                                        onClose={() => {
                                            setAccountCreateLogs(accountCreateLogs?.filter(item1 => item1.accountId !== item.accountId))
                                        }}
                                    >{item.accountId}</Tag>)}</span>
                                }
                            >
                                <Tag color="#F5F5F5" className={style.content_tag}>+{accountCreateLogs.length - 1}</Tag>
                            </Tooltip>}
                        </> : <Text type="secondary">请选择媒体账户</Text>}
                    </div>
                    {visible}
                    {((visible && selectedRows.length > 0) || (!visible && accountCreateLogs?.length > 0)) && <a className={style.clear} onClick={(e) => {
                        e.stopPropagation()
                        if (visible) {
                            setSelectedRows([])
                        } else {
                            setAccountCreateLogs([])
                        }
                    }}><CloseCircleFilled /></a>}
                </div>
            </Selector>
            {visible && <div className={style.selectAccount_list}>
                <div className={style.selectAccount_list_header}>
                    <Input.TextArea
                        rows={1}
                        autoSize={{ minRows: 1, maxRows: 1 }}
                        placeholder="账户/备注(多个，,空格换行)"
                        style={{ width: 200 }}
                        allowClear
                        onChange={e => {
                            let input = e.target.value
                            let newInput: string[] = input ? input?.split(/[,，\n\s]+/ig).filter((item: any) => item) : []
                            setInputAccountList(newInput)
                        }}
                    />
                    <Select
                        mode="multiple"
                        style={{ minWidth: 200 }}
                        placeholder="快捷选择媒体账户组"
                        maxTagCount={1}
                        allowClear
                        filterOption={(input: any, option: any) => {
                            return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
                        }}
                        value={mediaTypeGroupIds}
                        onChange={(e) => { getGroupAccountList(e) }}
                    >
                        {getGroupList?.data && getGroupList?.data?.map((item: any) => <Select.Option value={item.groupId} key={item.groupId}>{item.groupName}</Select.Option>)}
                    </Select>
                    <Select
                        allowClear
                        showSearch
                        placeholder="账户资产共享组"
                        filterOption={(input: any, option: any) => {
                            return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
                        }}
                        style={{ width: 145 }}
                        value={assetSharingDeta?.groupId}
                        onChange={(_, option) => {
                            setMediaTypeGroupIds([])
                            if (option) {
                                let assetSharingDeta = { groupId: option.value, authMainAccountId: option.authMainAccountId }
                                setAssetSharingDeta({ groupId: option.value, authMainAccountId: option.authMainAccountId })
                                setDataSource(options?.filter((item: { accountId: number; groupId: number }) => assetSharingDeta?.groupId ? (item.accountId?.toString() === assetSharingDeta?.authMainAccountId?.toString() || item?.groupId?.toString() === assetSharingDeta?.groupId?.toString()) : true))
                            } else {
                                setAssetSharingDeta(undefined)
                                setDataSource(options)
                            }
                        }}
                    >
                        {getAccountAssetsGroupListAll?.data?.map((item: { accountId: any; authMainAccountId: number; id: number; accountGroupName: string }) => <Select.Option value={item.accountId} authMainAccountId={item.authMainAccountId} key={item.id}>{item.accountGroupName}({item.authMainAccountId})</Select.Option>)}
                    </Select>
                </div>
                <div className={style.selectAccount_list_table}>
                    <Table
                        size={'small'}
                        bordered
                        dataSource={dataSource.filter(item => inputAccountList?.length > 0 ? inputAccountList?.some(val => item.accountId?.toString().toLowerCase()?.includes(val) || item?.remark?.toString().toLowerCase()?.includes(val)) : true)}
                        rowKey={'accountId'}
                        scroll={{ y: 220 }}
                        pagination={{
                            pageSize: 50,
                            showTotal: total => `总共 ${total} 账户`
                        }}
                        loading={getAllUserAccount.loading || loading}
                        columns={[
                            {
                                title: '账号',
                                dataIndex: 'accountId',
                                key: 'accountId',
                                width: 80,
                                align: 'center',
                                render(value) {
                                    return <span style={{ fontSize: 12 }}>{value}</span>
                                }
                            },
                            {
                                title: '企业',
                                dataIndex: 'corporationName',
                                key: 'corporationName',
                                width: 180,
                                ellipsis: true,
                                render(value) {
                                    return <span style={{ fontSize: 12 }}>{value}</span>
                                }
                            },
                            {
                                title: '企业标识',
                                dataIndex: 'corporationLicence',
                                key: 'corporationLicence',
                                width: 150,
                                ellipsis: true,
                                render(value) {
                                    return <span style={{ fontSize: 12 }}>{value}</span>
                                }
                            },
                            {
                                title: '备注',
                                dataIndex: 'remark',
                                key: 'remark',
                                ellipsis: true,
                                render(value) {
                                    return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                                }
                            },
                        ]}
                        rowSelection={{
                            selectedRowKeys: selectedRows.map(item => item.accountId),
                            onSelect: (record: { accountId: number }, selected: boolean) => {
                                if (selected) {
                                    selectedRows.push({ ...record })
                                    setSelectedRows([...selectedRows])
                                } else {
                                    let newSelectAccData = selectedRows.filter((item: { accountId: number }) => item.accountId !== record.accountId)
                                    setSelectedRows([...newSelectAccData])
                                }
                            },
                            onSelectAll: (selected: boolean, selectedRowss: { accountId: number }[], changeRows: { accountId: number }[]) => {
                                if (selected) {
                                    let newSelectAccData = [...selectedRows]
                                    changeRows.forEach((item: { accountId: number }) => {
                                        let index = newSelectAccData.findIndex((ite: { accountId: number }) => ite.accountId === item.accountId)
                                        if (index === -1) {
                                            let data: any = { ...item }
                                            newSelectAccData.push(data)
                                        }
                                    })
                                    setSelectedRows([...newSelectAccData])
                                } else {
                                    let newSelectAccData = selectedRows.filter((item: { accountId: number }) => {
                                        let index = changeRows.findIndex((ite: { accountId: number }) => ite.accountId === item.accountId)
                                        if (index !== -1) {
                                            return false
                                        } else {
                                            return true
                                        }
                                    })
                                    setSelectedRows([...newSelectAccData])
                                }
                            }
                        }}
                    />
                </div>
                <div className={style.selectAccount_list_footer}>
                    <Button className={style.resetCss} onClick={handleCancel}>取消</Button>
                    <Button
                        className={style.resetCss}
                        type="primary"
                        style={{ marginLeft: 8 }}
                        onClick={() => {
                            if (accountCreateLogs?.length && arraysHaveSameValues(accountCreateLogs.map(item => item.accountId), selectedRows.map(item => item.accountId))) {
                                handleCancel()
                                return
                            }
                            let authMainAccountId: any
                            let isY = false
                            // 1.判断是否有账户组素材 有的话 获取账户组ID
                            if (dynamicGroup && dynamicGroup?.length > 0) {
                                if (deliveryMode && mType) {
                                    if (dynamicGroup.some((item: any) => {
                                        if (deliveryMode === 'DELIVERY_MODE_CUSTOMIZE') {
                                            if (['short_video', 'video'].includes(mType) && (item?.video_id?.materialType || item?.short_video1?.materialType) === 1) {
                                                authMainAccountId = item?.video_id?.accountId || item?.short_video1?.accountId
                                                return true
                                            } else if (['image_list'].includes(mType) && item?.image_list?.some((list: any) => {
                                                if (list?.materialType === 1) {
                                                    authMainAccountId = list?.accountId
                                                    return true
                                                } else {
                                                    return false
                                                }
                                            })) {
                                                return true
                                            } else if (['element_story'].includes(mType) && item?.element_story?.some((list: any) => {
                                                if (list?.materialType === 1) {
                                                    authMainAccountId = list?.accountId
                                                    return true
                                                } else {
                                                    return false
                                                }
                                            })) {
                                                return true
                                            } else if (['image'].includes(mType) && item?.image_id?.materialType === 1) {
                                                authMainAccountId = item?.image_id?.accountId
                                                return true
                                            } else {
                                                return false
                                            }
                                        } else {
                                            if (item?.list?.some((list: any) => {
                                                if (Array.isArray(list) && list.some((l: any) => {
                                                    if (l.materialType === 1) {
                                                        authMainAccountId = l?.accountId
                                                        return true
                                                    } else {
                                                        return false
                                                    }
                                                })) {
                                                    return true
                                                } else if (list.materialType === 1) {
                                                    authMainAccountId = list?.accountId
                                                    return true
                                                } else {
                                                    return false
                                                }
                                            })) {
                                                return true
                                            } else {
                                                return false
                                            }
                                        }
                                    })) {
                                        isY = true
                                    }
                                } else {
                                    message.error('请联系管理员')
                                }
                            }

                            if (isY && authMainAccountId) {
                                // 2.有的话判断 判断账户是否为一组
                                console.log('authMainAccountId---->', authMainAccountId, getauthMainAccountData(selectedRows))
                                const authMainData = getauthMainAccountData(selectedRows)
                                if (authMainData.isSelectRemote && authMainData.authMainAccountId === authMainAccountId) {
                                    handleOk(false)
                                } else {
                                    setTipsVisible(true)
                                }
                                // 3.是的话 判断是以前那组吗
                            } else {
                                handleOk(false)
                            }
                        }}
                    >确定</Button>
                </div>
            </div>}
        </div>
        {visible && <div className={style.selectAccount_mask}></div>}
        {tipsVisible && <Modal
            title={<strong>提示</strong>}
            open={tipsVisible}
            onCancel={() => {
                setTipsVisible(false)
            }}
            onOk={() => handleOk(true)}
            className="modalResetCss"
            okText="清空"
            cancelText="留下来修改账户"
        >选择的素材有账户组素材，但是与当前账户不匹配，是否使用当前账号清空素材？</Modal>}
    </div>
}

export default React.memo(SelectAccount)