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, Col, Form, Input, message, Modal, Row, Select, Space, Table, Tag, Tooltip, Typography } from "antd";
import { CloseCircleFilled } from "@ant-design/icons";
import { getGroupListApi } from "@/services/launchAdq/subgroup";
import { useAjax } from "@/Hook/useAjax";
import { getAccountAssetsGroupListAllApi } from "@/services/adqV3/global";
import { getUserAccountListApi } 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 [form] = Form.useForm()
    const [visible, setVisible] = useState<boolean>(false)
    const [selectedRows, setSelectedRows] = useState<any[]>([])
    const [tipsVisible, setTipsVisible] = useState<boolean>(false)
    const [loading, setLoading] = useState<boolean>(false)
    const [queryForm, setQueryForm] = useState<{ accountIdList?: number[], adUnitTypeList?: string[], groupId?: number, remark?: string, sysGroupId?: number, pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 50 })

    const getGroupList = useAjax(() => getGroupListApi())
    const getAccountAssetsGroupListAll = useAjax((params) => getAccountAssetsGroupListAllApi(params))
    const getUserAccountList = useAjax((params) => getUserAccountListApi(params))
    /***********************************/

    const onFinish = (data: any) => {
        let oldQueryFrom = JSON.parse(JSON.stringify(queryForm))
        let params = { ...oldQueryFrom, ...data, pageNum: 1 }
        if (params?.accountIdList) {
            params.accountIdList = params?.accountIdList.split(/[,，\n\s]+/ig).filter((item: any) => item)
        } else {
            delete params?.accountIdList
        }
        setQueryForm(params)
    }

    // 判断选择的账号是否在同一个资产组，允许选择云端素材的关键
    const getauthMainAccountData = (accountCreateLogs: PULLIN.AccountCreateLogsProps[]): Promise<{ authMainAccountId?: number, isSelectRemote: boolean }> => {
        return new Promise((resolve) => {
            if (accountCreateLogs?.length) {
                setLoading(true)
                getUserAccountListApi({ adUnitTypeList: putInType === 'NOVEL' ? ['NOVEL', 'NOVEL_IAA', 'SKIT_IAA'] : ['GAME', 'GAME_IAA'], pageNum: 1, pageSize: 20000, accountIdList: accountCreateLogs.map(item => item.accountId) }).then(res => {
                    setLoading(false)
                    console.log('ppppp', res)
                    if (res?.data?.records?.length) {
                        const list = accountCreateLogs.map(item => item.accountId)
                        const selectAccountList = res.data.records.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 && !groupAccount['undefined']) {
                            resolve({ 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) {
                                resolve({ authMainAccountId: authMainAccountId, isSelectRemote: true })
                            } else {
                                resolve({ authMainAccountId: -1, isSelectRemote: false })
                            }
                        } else if (groupAccount?.['undefined']?.length === 1 && groupAccount?.['undefined']?.[0]?.isGroupMainAccount) {
                            resolve({ authMainAccountId: groupAccount?.['undefined']?.[0]?.accountId, isSelectRemote: true })
                        } else {
                            resolve({ authMainAccountId: -1, isSelectRemote: false })
                        }
                    }
                }).catch(() => {
                    setVisible(false)
                    resolve({ authMainAccountId: undefined, isSelectRemote: false })
                })
            } else {
                resolve({ authMainAccountId: undefined, isSelectRemote: false })
            }
        })
    }

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

    useEffect(() => {
        if (putInType && visible) {
            getUserAccountList.run({ adUnitTypeList: putInType === 'NOVEL' ? ['NOVEL', 'NOVEL_IAA', 'SKIT_IAA'] : ['GAME', 'GAME_IAA'], ...queryForm })
        }
    }, [putInType, queryForm, visible])

    useEffect(() => {
        if (putInType) {
            // 获取账户组
            getGroupList.run()
            // 获取资产共享组
            getAccountAssetsGroupListAll.run({})
        }
        return () => {
            document.body.style.overflow = 'auto';
        }
    }, [putInType])

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

    const handleCancel = () => {
        document.body.style.overflow = 'auto';
        setSelectedRows([])
        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}>
                    <Form layout="inline" className='queryForm' name="basicSelectAcc" form={form} onFinish={onFinish}>
                        <Row gutter={[0, 6]}>
                            <Col><Form.Item name='accountIdList'>
                                <Input.TextArea
                                    rows={1}
                                    autoSize={{ minRows: 1, maxRows: 1 }}
                                    placeholder="账户(多个，,空格换行)"
                                    style={{ width: 180 }}
                                    allowClear
                                />
                            </Form.Item></Col>
                            <Col><Form.Item name='remark'>
                                <Input
                                    placeholder="备注"
                                    style={{ width: 120 }}
                                    allowClear
                                />
                            </Form.Item></Col>
                            <Col><Form.Item name='sysGroupId'>
                                <Select
                                    mode="multiple"
                                    style={{ minWidth: 180 }}
                                    placeholder="快捷选择媒体账户组"
                                    maxTagCount={1}
                                    allowClear
                                    filterOption={(input: any, option: any) => {
                                        return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
                                    }}
                                >
                                    {getGroupList?.data && getGroupList?.data?.map((item: any) => <Select.Option value={item.groupId} key={item.groupId}>{item.groupName}</Select.Option>)}
                                </Select>
                            </Form.Item></Col>
                            <Col><Form.Item name='groupId'>
                                <Select
                                    allowClear
                                    showSearch
                                    placeholder="账户资产共享组"
                                    filterOption={(input: any, option: any) => {
                                        return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
                                    }}
                                    style={{ width: 145 }}
                                >
                                    {getAccountAssetsGroupListAll?.data?.map((item: { accountId: any; authMainAccountId: number; id: number; accountGroupName: string }) => <Select.Option value={item.id} key={item.id}>{item.accountGroupName}({item.authMainAccountId})</Select.Option>)}
                                </Select>
                            </Form.Item></Col>
                            <Col>
                                <Space>
                                    <Button type="primary" htmlType="submit">搜索</Button>
                                    {/* <Button onClick={() => form.resetFields()}>重置</Button> */}
                                </Space>
                            </Col>
                        </Row>
                    </Form>

                    {/* 
                     */}
                </div>
                <div className={style.selectAccount_list_table}>
                    <Table
                        size={'small'}
                        bordered
                        dataSource={getUserAccountList?.data?.records}
                        rowKey={'accountId'}
                        scroll={{ y: 220 }}
                        pagination={{
                            pageSize: getUserAccountList?.data?.size || 50,
                            current: getUserAccountList?.data?.current || 1,
                            showTotal: total => `总共 ${total} 账户`,
                            total: getUserAccountList?.data?.total,
                            showSizeChanger: true,
                            showLessItems: true,
                            defaultCurrent: 1,
                            defaultPageSize: 50,//默认初始的每页条数
                            onChange: (page, pageSize) => {
                                setQueryForm({ ...queryForm, pageNum: page, pageSize })
                            }
                        }}
                        loading={getUserAccountList.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"
                        loading={loading}
                        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.有的话判断 判断账户是否为一组
                                getauthMainAccountData(selectedRows).then(authMainData => {
                                    console.log('authMainData---->', authMainData)
                                    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)