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

import useIndexDB from '@/Hook/useIndexDB';
import { Modal, Row, Pagination, Card, Input, Button, Space } from 'antd'
import React, { useCallback, useEffect, useState } from 'react'
import { useModel } from 'umi';
import style from './db.less'
import filePng from '../../../public/file.png'

/**
 * @param historyType //历史图文type  0： 智能互动消息历史  1：客服消息历史
 */

type props = {
    visible: boolean,
    onCancel: () => void,
    onOK: (props: any, type?: number) => void,
    wx?: any,
}

const WxHistoryMpnews: React.FC<props> = (props) => {
    const { visible, onCancel, onOK, } = props
    const [action, setAction] = useState<number>(0)
    const [actionData, setActionData] = useState()
    let { state: { data, total } } = useModel('useOperating.useDB')
    const { query, del } = useIndexDB()
    //ok
    const pageSize = 10  // 每页请求多少数据

    let ok = useCallback(() => {
        onOK(actionData)
    }, [actionData])

    let pageSizeChange = useCallback((pageNum, pageSize) => {
        console.log(pageNum, pageSize)
        query({ start: pageNum, end: pageSize })
    }, [query])
    //选中图片
    let handleClick = useCallback((data) => {
        setAction(data?.id)
        setActionData(data?.data)
    }, [])
    useEffect(() => {
        query()
    }, [query])
    return <Modal
    open={visible}
        title={<span>浏览器本地素材库<span style={{ color: 'red' }}>不需要的数据请手动删除避免太多数据会很卡，存放上限跟个人浏览器浏览器性能相关！</span></span>}
        onCancel={onCancel}
        onOk={ok}
        width={1000}
    >
        {/* <Row justify='space-between'>
            <Col>
                <Search placeholder="请输入" enterButton="搜索" loading={false} />
            </Col>
            <Col><Button>一键清空</Button></Col>
        </Row> */}
        <div className={style.content}>
            <div style={{ borderBottom: '1px solid #efefef', paddingBottom: 10 }}>
                <Space>
                    <Input.Search placeholder="模糊查询（支持链接，内容，标题）" onSearch={(value: string) => { query({ str: value }) }} style={{ width: 300 }} />
                    <Button onClick={() => del(action)} type='primary' disabled={!action}>删除</Button>
                </Space>
            </div>
            <div className={style.box}>
                {
                    [0, 1, 2].map((n) => {
                        return <ul className={style.ul} key={n}>
                            {
                                data.length > 0 && data?.map((item: any, index: number) => {
                                    if (index % 3 === n) {
                                        return <li key={item?.id} className={action === item?.id ? style.action : ""} onClick={() => handleClick(item)}>
                                            <Card
                                                hoverable
                                                className={style.box_card}
                                                cover={
                                                    item?.data?.map((a: any, eq: number) => {
                                                        return <div className={style.img_ScwxBox} key={eq}>
                                                            <span>{a?.title || a?.newsTitle}</span>
                                                            {/* <img src={(a?.knewsThumbInfo?.folder ? filePng : a?.knewsThumbInfo?.id ? a?.knewsThumbInfo?.url : a?.knewsThumbUrl) || ('https://s.weituibao.com/static/1552098829922/bigfm.png')} /> */}
                                                            {Object.keys(a)?.includes('newsPicUrl') ? <img src={a?.newsPicUrl} /> : <img src={a?.knewsThumbUrl || (a?.knewsThumbId ? filePng : 'https://s.weituibao.com/static/1552098829922/bigfm.png')} />}
                                                        </div>
                                                    })
                                                }
                                            />
                                        </li>
                                    }
                                    return null
                                })
                            }
                        </ul>
                    })
                }
            </div>
        </div>
        <Row justify='center' style={{ paddingTop: 10, borderTop: '1px solid #efefef' }}>
            <Pagination size="small" total={total} showQuickJumper pageSize={pageSize} onChange={pageSizeChange} />
        </Row>
    </Modal>
}

export default WxHistoryMpnews