import React from 'react';
// import Upload from '../../extra/upload';
import styles from './styles.less';
import { UploadProps } from '../detailInterface';

const itemWidth = 20;
const itemSpace = 5;

export default function Detail(props: UploadProps) {
    const { value, formatter, width } = props;
    const formatValue = formatter ? formatter(value) : value;
    if (!formatValue) return null;
    let themeValue: any[] = [];
    if (Array.isArray(formatValue)) {
        themeValue = formatValue.map((item) => {
            return {
                ...item,
                // ...Upload.checkoutFileType(item.value),
            };
        });
    }
    //根据宽度计算显示个数, 临时使用
    let len = Math.floor(((width || 200) - 40) / (itemWidth + itemSpace));
    return (
        <div className={styles.fileList}>
            {themeValue.slice(0, len).map((item, index) => (
                <img
                    className={styles.img}
                    key={item.value + index}
                    src={item.thumbUrl}
                    width={itemWidth}
                    style={{ marginRight: itemSpace }}
                />
            ))}
            {themeValue.length > len ? <span className={styles.moreBtn}>{themeValue.length - len}+</span> : null}
        </div>
    );
}