import React from 'react';
import { Image } from 'antd';
import PropTypes from 'prop-types';
import './style';
import { getVtxToken } from '@vtx/utils';
const InfoCollection = props => {
    const { data, gap = 8, wrapStyle = {} } = props;
    return (
        <div className="info-collection" style={wrapStyle}>
            {data.map(item => {
                let style = {};
                if (item.color) style.color = item.color;
                return (
                    <div className="info-line" key={item.key} style={{ marginBottom: gap }}>
                        <div className="label">{item.label}：</div>
                        <div className="value" style={style}>
                            {item.type === 'img'
                                ? item.value.map(e => {
                                      return (
                                          <Image
                                              style={{ width: 50, height: 50 }}
                                              key={e.id}
                                              alt={e.name}
                                              src={`/cloudFile/common/downloadFile?id=${
                                                  e.id
                                              }&token=${getVtxToken('token')}`}
                                          />
                                      );
                                  })
                                : item.value || '--'}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

InfoCollection.propTypes = {
    data: PropTypes.any,
    gap: PropTypes.number,
    wrapStyle: PropTypes.object,
};
export default InfoCollection;