ad-manage/src/components/ActionModal/more.tsx

import { Button, Card, Checkbox, Col, Row } from 'antd'
import Modal from 'antd/lib/modal/Modal'
import React, { useCallback, useEffect, useState } from 'react'
import { useModel } from 'umi'
import Left from '@/components/ActionModal/left'
import SelectLeft from '@/components/ActionModal/selectLeft'
import style from './more.less'
import NoFoundPage from '@/pages/empty'
type Props = {
    visible: boolean,
    hideWx: () => void,
    ok: (arr: any[]) => void,
    defaultDtat: any[],
    isSelect?: boolean
}
//更多选择弹窗
let MoreModal = (props: Props) => {
    const { visible, hideWx, ok, defaultDtat, isSelect = false } = props
    const { mpAccounts, actionWX, dispatch, actionArr, getDataList, getAllOfMember } = useModel('useOperating.useWxGroupList',
        models => ({
            mpAccounts: models.state.mpAccounts,
            actionWX: models.state.actionWX,
            dispatch: models.dispatch,
            actionArr: models.state.actionArr,
            getDataList: models.getDataList,
            getAllOfMember: models.getAllOfMember
        }))
    const [groupSyncWx, setGroupSyncWx] = useState<any[]>([])//当前组未选中的微信
    const [selectState, setSelectState] = useState<{ isAll: boolean, isChecked: boolean }>({ isAll: false, isChecked: false })
    const { syncWx, sync, graphicMaterialEdit } = useModel('useOperating.useMaterialContent', model => ({
        syncWx: model.syncWx,
        sync: model.sync,
        graphicMaterialEdit: model.graphicMaterialEdit,
    }))
    //全选
    let allSelect = useCallback(() => {
        let isGroupWx: any[] = []//选中的数据
        let newActionArr: any[] = []
        let fiterMp: any[] = []
        mpAccounts?.forEach((mp: { id: number, verifyTypeInfo: number }) => {
            if (mp?.verifyTypeInfo !== -1) {//过滤未认证
                fiterMp.push(mp)
            }
            actionArr?.forEach((wx: { id: number }) => {
                if (wx.id === mp.id) {
                    isGroupWx.push(wx)
                }
            })
        })
        if (isGroupWx?.length === fiterMp?.length || isGroupWx?.length === fiterMp?.length - groupSyncWx?.length) {//清空
            newActionArr = actionArr?.filter((wx: { id: number }) => {
                if (isGroupWx.every((groupwx: { id: number }) => wx.id !== groupwx.id)) {
                    return wx
                }
                return
            })
            setSelectState({ isAll: false, isChecked: false })
            dispatch({ type: 'setActionArr', params: { actionArr: newActionArr } })
        } else {//全选
            newActionArr = actionArr?.filter((wx: { id: number }) => {
                if (isGroupWx.every((groupwx: { id: number }) => wx.id !== groupwx.id)) {
                    return wx
                }
                return
            })
            newActionArr = [...newActionArr, ...fiterMp]
            setSelectState({ isAll: false, isChecked: true })
            dispatch({ type: 'setActionArr', params: { actionArr: newActionArr } })
        }
    }, [selectState, mpAccounts, actionArr, actionWX, groupSyncWx])
    //反选
    let returnSelct = useCallback(() => {
        let isGroupWx: any[] = []
        let returnWx: any[] = []
        let newActionArr: any[] = []
        let fiterMp: any[] = []
        mpAccounts?.forEach((mp: { id: number, verifyTypeInfo: number }) => {
            if (mp?.verifyTypeInfo !== -1) {//过滤未认证
                fiterMp.push(mp)
            }
            actionArr?.forEach((wx: { id: number }) => {
                if (wx.id === mp.id) {
                    isGroupWx.push(wx)
                }
            })
        })
        returnWx = fiterMp?.filter((mp: { id: number }) => {
            if (isGroupWx.every((wx: { id: number }) => mp.id !== wx.id)) {
                return mp
            }
            return
        })
        newActionArr = actionArr?.filter((wx: { id: number }) => {
            if (isGroupWx.every((groupwx: { id: number }) => wx.id !== groupwx.id)) {
                return wx
            }
            return
        })
        if (returnWx.length !== 0 && groupSyncWx.length !== returnWx.length) {//假如选中个数的大于0
            setSelectState({ isAll: true, isChecked: true })
        } else {//假如等于0
            setSelectState({ isAll: false, isChecked: false })
        }
        if (returnWx.length === fiterMp.length && groupSyncWx.length === 0) {
            setSelectState({ isAll: false, isChecked: true })//假如反选值与当前组的个数一样证明全选
        }
        newActionArr = [...newActionArr, ...returnWx]
        dispatch({ type: 'setActionArr', params: { actionArr: newActionArr } })
    }, [selectState, mpAccounts, actionArr, actionWX, groupSyncWx])
    //每次切换组检测全选状态
    useEffect(() => {
        let isGroupWx: any[] = []
        let groupSyncWx: any[] = []
        mpAccounts?.forEach((mp: { id: number }) => {
            actionArr?.forEach((wx: { id: number }) => {
                if (wx.id === mp.id) {
                    isGroupWx.push(wx)
                }
            })
        })
        setGroupSyncWx(groupSyncWx)
        // }
        if (isGroupWx?.length === mpAccounts?.length) {
            setSelectState({ isAll: false, isChecked: true })
        } else {
            setSelectState({ isAll: true, isChecked: true })
        }
        if (isGroupWx?.length === 0) {
            setSelectState({ isAll: false, isChecked: false })
        }
    }, [mpAccounts, actionArr])
    //关闭弹窗
    let handleCancel = useCallback(() => {
        dispatch({ type: 'setActionArr', params: { actionArr: [] } })
        hideWx()
    }, [])
    //确定
    let handleOk = useCallback(() => {
        ok(actionArr)
        dispatch({ type: 'setActionArr', params: { actionArr: [] } })
    }, [actionArr])
    //选中事件
    let action = useCallback((item: any) => {
        let isGroupWx: any[] = []//选中的数据
        if (actionArr?.some((obj: { appid: number }) => obj.appid === item.appid)) {//删除
            let newArr = actionArr?.filter((obj: { appid: number }) => obj.appid !== item.appid)
            mpAccounts?.forEach((mp: { id: number }) => {
                newArr?.forEach((wx: { id: number }) => {
                    if (wx.id === mp.id) {
                        isGroupWx.push(wx)
                    }
                })
            })
            if (isGroupWx.length === 0) {//假如为空
                setSelectState({ isAll: false, isChecked: false })
            } else {
                setSelectState({ isAll: true, isChecked: true })
            }
            dispatch({ type: 'setActionArr', params: { actionArr: newArr } })
        } else {//添加
            let arr = [...actionArr, item]
            if (mpAccounts?.every((mp: { id: number }) => arr?.some((wx: { id: number }) => mp.id === wx.id))) {//假如全部存在全选
                setSelectState({ isAll: false, isChecked: true })
            } else {
                setSelectState({ isAll: true, isChecked: true })
            }
            dispatch({ type: 'setActionArr', params: { actionArr: arr } })
        }
    }, [actionArr, mpAccounts])
    useEffect(() => {
        let newArr: any[] = []
        if (getDataList?.data) {
            getDataList?.data?.forEach((data: { mpAccounts: any }) => {
                if(data?.mpAccounts){
                    newArr = [...data?.mpAccounts]
                }
            })
        }

        if (getAllOfMember?.data) {
            getAllOfMember?.data?.forEach((data: { value: any }) => {
                data?.value?.forEach((mp: { id: number }) => {
                    if (newArr.every((arr: { id: number }) => mp?.id !== arr.id)) {
                        newArr.push(mp)
                    }
                })
            })
        }
    }, [getDataList?.data, getAllOfMember?.data, isSelect])
    //编辑回填
    useEffect(() => {
        if (defaultDtat.length > 0) {
            dispatch({ type: 'setActionArr', params: { actionArr: defaultDtat } })
        }
    }, [defaultDtat])
    return <>
        <Modal
            title="批量选择公众号"
            width={1040}
            visible={visible}
            onOk={handleOk}
            onCancel={handleCancel}
            okText='确定'
            cancelText='取消'
            destroyOnClose
            confirmLoading={syncWx.loading || sync.loading || graphicMaterialEdit.loading}
        >
            {
                actionWX ? <Row className={style.colud}  >
                    <Col >
                      {isSelect ? <SelectLeft /> : <Left />}
                        {/* <Left /> */}
                    </Col>
                    <Col>
                        <Card
                            style={{ height: '420px', overflow: 'hidden', minWidth: 290 }}
                            title={
                                <>
                                    <span style={{ marginRight: 10 }}>组下成员</span>
                                    <Checkbox
                                        indeterminate={selectState.isAll}
                                        onChange={allSelect}
                                        checked={selectState.isChecked}
                                    >
                                        <span style={{ fontSize: 12, color: '#999' }}>全选</span>
                                    </Checkbox>
                                    <Button size='small' onClick={returnSelct}>反选</Button>
                                </>
                            }
                            bodyStyle={{ height: 350, overflowY: 'auto' }}
                        >
                            <Checkbox.Group style={{ width: '100%', }} >
                                <Row gutter={[10, 0]}>
                                    {

                                        mpAccounts?.map((item: any) => {
                                            let isAction: any = actionArr?.some((obj: any) => obj?.appid === item?.appid)
                                            return <Col key={item.id} span={24}>
                                                <Checkbox value={item} className={style.box} onClick={() => action(item)} disabled={item?.verifyTypeInfo === -1}>
                                                    <div
                                                        className={`${isAction ? style.card_action : undefined} ${style.card_box}`}
                                                    >
                                                        <div
                                                            style={{ display: 'flex', alignItems: 'center' }}
                                                        >
                                                            <img src={item?.headImg || localStorage?.bookImg} className={style.item_img} />
                                                            {item.nickName}
                                                        </div>
                                                    </div>
                                                </Checkbox>
                                            </Col>
                                        })
                                    }
                                </Row>
                            </Checkbox.Group>
                        </Card>
                    </Col>
                    <Col>
                        <Card
                            style={{ height: 420, overflow: 'hidden', minWidth: 280 }}
                            title={
                                <>
                                    <span style={{ marginRight: 10 }}>已勾选</span>
                                    <Button size='small' onClick={() => { dispatch({ type: 'setActionArr', params: { actionArr: [] } }) }}>清空</Button>
                                </>
                            }
                            bodyStyle={{ height: 350, overflowY: 'auto' }}
                        >
                            <Checkbox.Group style={{ width: '100%' }} >
                                <Row gutter={[10, 0]}>
                                    {

                                        actionArr?.map((item: any) => {
                                            let isAction: any = actionArr?.some((obj: any) => obj?.appid === item?.appid)
                                            return <Col key={item.id}>
                                                <Checkbox value={item} className={style.box} onClick={() => action(item)}>
                                                    <div
                                                        className={`${isAction ? style.card_action : undefined} ${style.card_box}`}
                                                    >
                                                        <div
                                                            style={{ display: 'flex', alignItems: 'center' }}
                                                        >
                                                            <img src={item?.headImg || localStorage?.bookImg} className={style.item_img} />
                                                            {item.nickName}
                                                        </div>
                                                    </div>
                                                </Checkbox>
                                            </Col>
                                        })
                                    }
                                </Row>
                            </Checkbox.Group>
                        </Card>
                    </Col>
                </Row> : <NoFoundPage />
            }
        </Modal >
    </>
}

export default MoreModal