import HocError from '@/Hoc/HocError'
import { Modal } from 'antd'
import React, { useEffect, useMemo, useState } from 'react'
import { useModel } from 'umi'
import TableData from '../../components/TableData'
import { fcolumns } from './tableConfig'
/**素材消耗排行榜 */
function MaterialPage() {
    const { state: { dataSource }, getAdrank } = useModel('useData.useTableData')
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
    const [url, setUrl] = useState<string>('') // 视频链接
    //加工数据
    const data = useMemo(() => {
        if (dataSource) {
            return dataSource?.map((item: any, index: number) => {
                item['id'] = index
                return item
            })
        }
        return []
    }, [dataSource])
    //获取排序列表
    const sortArr = useMemo(() => {
        let arr: any[] = []
        fcolumns()().map((item: any) => {
            if (typeof item.title === 'string') {
                arr.push({ title: item.title, value: item.dataIndex, key: item.dataIndex })
            }
            if (typeof item.title === 'object' && typeof item.title.props.children[0] === 'string') {
                arr.push({ title: item.title, value: item.dataIndex, key: item.dataIndex })
            }
        })
        return arr
    }, [fcolumns])

    const openVideo = (url: string) => {
        setIsModalVisible(true)
        setUrl(url)
    }
    return <>
        {isModalVisible && <Modal visible={isModalVisible} footer={null} width={500} maskClosable onCancel={()=>{setIsModalVisible(false)}}>
            {url && <video src={url} loop controls autoPlay style={{width: '100%', marginTop: 20}}></video>}
        </Modal>}
        <TableData
            isLoginId
            isBook
            isType
            isVideo
            // isQs
            isTableDateArr
            // isTableDay
            // isZj
            isDataSelectPitcher
            isSelctAcc
            isGroupTab={false}
            sortArr={sortArr}
            columns={fcolumns(openVideo)}
            ajax={getAdrank}
            title='素材消耗排行榜'
            dataSource={data}
            scroll={{ x: 1000, y: 600 }}
        />
    </>
}

export default HocError(MaterialPage)