ad-manage/src/components/MaterialModal/wxMpnews.tsx

import { Button, Card, Modal, Pagination, Tabs, Tag } from 'antd'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import DrawerPage from "@/components/FileBox/components/newsModal"
import { useModel } from 'umi'
import style from './mpnews.less'
import FileBox from '../FileBox'

/**
 * 
 * 图文素材 
 * 
 * 编辑图文内容 素材库导入
 */

type Props = {
    visible: boolean,
    onCancel: () => void,
    onOK: (props: any, type?: number) => void,
    defaultData: any,
    wx?: any,
    isNews?: boolean
}
/**微信图文弹窗 */
const WxMpnews = React.memo((props: Props) => {
    const { visible, onCancel, onOK, wx } = props
    const [action, setAction] = useState<any>('')
    const { getData, update } = useModel('useOperating.useMaterialContent', model => ({ getData: model.getWeData, update: model.update }))
    const { actionWX } = useModel('useOperating.useWxGroupList', model => ({ actionWX: model.state.actionWX }))
    let refD: { current: { showDrawer: (props?: any) => void } } | any = useRef()//DrawerPage获取实例方法
    const { state, set, getList } = useModel('useOperating.useBdMedia')
    const [isWx, setIsWx] = useState<boolean>(false)
    const { fileType, belongUser, parentId, selectItem } = state
    /**加载组件或数据更新执行请求列表 */
    useEffect(() => {
        set({ fileType: 'news' })//设置获取图文列表
        if (belongUser === '1' || belongUser === '0') {
            getList()//获取列表
        }
    }, [fileType, belongUser, parentId])
    let pageSizeChange = useCallback((pageNum: number, pageSize: number) => {
        getData.run({
            pageNum: pageNum,
            pageSize: pageSize,
            mpId: actionWX?.id,
            mediaType: 'news'
        })
    }, [actionWX?.id])
    //同步更新
    let sync = useCallback(() => {
        update.run({ mpId: actionWX?.id, mediaType: 'news' })
    }, [actionWX?.id])
    //选中图片
    let handleClick = useCallback((data: any) => {
        setAction(data)
    }, [])
    //ok
    let ok = useCallback(() => {
        if (isWx) {
            onOK(action)
        } else {
            onOK(selectItem)
        }
    }, [action, isWx, selectItem])
    useEffect(() => {
        if (actionWX?.id) {
            getData.run({ mpId: actionWX?.id, mediaType: 'news', pageSize: 9, pageNum: 1 })
        }
    }, [actionWX?.id])
    useEffect(() => {
        if (props.defaultData) {
            setAction(props.defaultData)
        }
    }, [props.defaultData])
    //tabs切换
    const change = useCallback((s: string) => {
        setIsWx(s === '1' ? false : true)
    }, [])
    return <div >
        <Modal
            open={visible}
            title='图文素材'
            onCancel={onCancel}
            onOk={ok}
            width={1200}
            destroyOnClose
            maskClosable={false}
        >
            <Tabs defaultActiveKey="1" onChange={change} type='card'>
                <Tabs.TabPane tab="本地素材" key="1">
                    <Tabs
                        onChange={(activeKey: any) => { set({ belongUser: activeKey }) }}
                        activeKey={belongUser}
                        items={[
                            { label: '个人本地', key: '1' },
                            { label: '公共本地', key: '0' },
                        ]}
                    />
                    <FileBox isAll={false} noFile={true} height={450} showDrawer={refD?.current?.showDrawer} isBd={true} />
                </Tabs.TabPane>
                <Tabs.TabPane tab="微信素材" key="2">
                    <div className={style.btn}>
                        <Button type='primary' onClick={() => { refD?.current.showDrawer() }} loading={getData?.loading} style={{ marginRight: 10 }}>新建微信素材</Button>
                        <Button type='primary' onClick={sync} loading={update?.loading}>更新公众号下素材</Button>
                    </div>
                    <div className={style.box}>
                        {
                            [0, 1, 2].map((n) => {
                                return <ul className={style.ul} key={n}>
                                    {
                                        getData?.data?.records?.map((item: any, index: number) => {
                                            if (index % 3 === n) {
                                                return <li key={item.mediaId} className={action?.mediaId === item.mediaId ? style.action : ""} onClick={() => handleClick(item)}>
                                                    <Card
                                                        hoverable
                                                        className={style.box_card}
                                                        cover={
                                                            item?.news?.map((list: any, index: number) => {
                                                                return <div className={style.img_ScwxBox} key={index}>
                                                                    <span>{list.title}</span>
                                                                    <img src={list.thumbMediaUrl} />
                                                                </div>
                                                            })
                                                        }
                                                    />
                                                </li>
                                            }
                                            return null
                                        })
                                    }
                                </ul>
                            })
                        }
                    </div>
                    <div className={style.footer}>
                        <Pagination
                            onChange={pageSizeChange}
                            size={'small'}
                            defaultCurrent={1}
                            defaultPageSize={9}
                            total={getData?.data?.total}
                            style={{ float: 'right' }}
                            showTotal={(total) => <Tag color="cyan">总共{total}数据</Tag>}
                        />
                    </div>
                </Tabs.TabPane>
            </Tabs>
            <DrawerPage ref={refD} syncNews={false} isWx={isWx} isAll={false} />
        </Modal>
    </div >
}, (a, b) => {
    if (JSON.stringify(a) === JSON.stringify(b)) {
        return true
    }
    return false
})

export default WxMpnews