import { VtxImage } from '@vtx/components';
import { Carousel } from 'antd';
import React from 'react';
import Base from '../../../vm-info-collection';
import NoData from '../../../vm-nodata';
import SubTitle from '../../../vm-sub-title';

interface BaseInnerProps {
    photos: Array<any>;
    baseInfo: any;
}

export default function BaseInner({ photos, baseInfo }: BaseInnerProps) {
    return (
        <div className="base-top--base">
            <div className="base-top-img">
                {photos.length ? (
                    <VtxImage.PreviewGroup>
                        <Carousel style={{ width: '315px', height: '240px' }}>
                            {photos.map((item: any) => {
                                return (
                                    <VtxImage
                                        key={item.id}
                                        src={`/cloudFile/common/downloadFile?id=${item.id}`}
                                        alt={item.name}
                                    />
                                );
                            })}
                        </Carousel>
                    </VtxImage.PreviewGroup>
                ) : (
                    <NoData />
                )}
            </div>
            <div>
                <SubTitle title="基本信息" />
                <Base data={baseInfo} />
            </div>
        </div>
    );
}
