import { Card, Col } from "antd"
import React, { useEffect, useState } from "react"
import LookBox from "../../components/materialMould/lookBox";
import { MediaContentProps, MediaTypeProps } from "../../API/weMaterial/weMaterial";
import { MediaSize } from "../materialMould/uploadButton";


interface Props {
    /** 可选长度 */
    kxLength: number
    /** 回调函数 */
    onChange?: (data?: MediaContentProps[]) => void
    value: any
    style?: React.CSSProperties
    /**类型 传类型  其它不可选*/
    type?: MediaTypeProps
    noShowType?: Array<'text' | 'video' | 'file' | 'link' | 'voice' | 'miniprogram' | 'sck' | 'image'>,//不可使用的素材
    textCount?: number,  // 可选文案数量
    mediaSize?: MediaSize
}
const Right: React.FC<Props> = ({ value, style: styleData, kxLength, onChange, type, noShowType, mediaSize, textCount }) => {

    /***************************/
    const [data, setData] = useState<any>({})
    const { corpMediaContentVOList } = data

    /***************************/

    // 回填数据
    useEffect(() => {
        if (value) {
            setData(value)
        }
    }, [value])

    return <Col flex='350px' style={styleData} >
        <div style={{ height: '100%' }}>
            <Card styles={{body: { padding: 10, height: 'calc(100% - 44.33px)', overflow: 'auto' }, header: { padding: 10 }}} style={{ height: '100%', border: 0 }} title='预览'>
                <LookBox data={corpMediaContentVOList} textCount={textCount} mediaSize={mediaSize} isOpenData kxLength={kxLength} onChange={onChange} type={type} noShowType={noShowType} />
            </Card>
        </div>
    </Col>
}

export default React.memo(Right)