import React from 'react';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';
import { Carousel } from 'antd';
import PropTypes from 'prop-types';
import { BaseData } from './api';
import BaseInfo from '../vm-info-collection';
import './style';
import defaultImg from '../../image/default.png';
import { getVtxToken } from '@vtx/utils';

const BaseContent = props => {
    const { id, setCode } = props;
    const { info, photos } = BaseData.useBaseInfo(id, setCode);
    return (
        <div className="muck-base-content" style={{ width: '100%', height: '100%' }}>
            <div className="left">
                {/* 图片滚动 */}
                {photos?.length > 0 ? (
                    <Carousel autoplay>
                        {photos.map(item => (
                            <PhotoProvider key={item.id}>
                                <PhotoView
                                    src={`/cloudFile/common/downloadFile?id=${
                                        item.id
                                    }&token=${getVtxToken('token')}`}
                                >
                                    <img
                                        style={{ width: '100%', height: 'auto' }}
                                        alt={item.name}
                                        src={`/cloudFile/common/downloadFile?id=${
                                            item.id
                                        }&token=${getVtxToken('token')}`}
                                    />
                                </PhotoView>
                            </PhotoProvider>
                        ))}
                    </Carousel>
                ) : (
                    <img
                        src={defaultImg}
                        style={{ width: '100%', margin: '100px auto', opacity: 0.5 }}
                    />
                )}
            </div>
            <div className="right">
                <h3>基本信息</h3>
                {/* 信息展示 */}
                <BaseInfo data={info} />
            </div>
        </div>
    );
};

BaseContent.propTypes = {
    id: PropTypes.string,
    setCode: PropTypes.func,
};

export default BaseContent;