import React, {Component} from 'react';
import {Layout, Card, Button, Avatar} from 'antd';
import lo from '../../../images/lo.png'
import './index.css'

const {Content} = Layout;
const {Meta} = Card;

class ExampleShow extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    renderCard = () => {
        let examples = [
            {
                schemaID: '',
                title: '预约',
                description: '小程序',
                img: 'https://order-img-1254337200.cos.ap-shanghai.myqcloud.com/gh_09a69a242b5a_258.jpg',
                deployedNum: 100
            },
            {
                schemaID: '',
                title: '预约',
                description: '公众号',
                img: 'https://order-img-1254337200.cos.ap-shanghai.myqcloud.com/qrcode_for_gh_abcdd8e08f94_258.jpg',
                deployedNum: 90
            },
            {
                schemaID: '',
                title: '电商',
                description: '小程序',
                img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
                deployedNum: 120
            },
            {
                schemaID: '',
                title: '电商',
                description: '公众号',
                img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
                deployedNum: 105
            }
        ];

        let {userID} = this.state;

        return examples.map((item, index) => (
            <span key={index} style={{padding: '10px 0'}}>
                    <Card
                        key={index}
                        style={{width: 300}}
                        cover={<div className='cover-div'><img className='cover-img' src={item.img}
                                                               alt={item.title + '' + item.description}/></div>}
                        actions={[
                            <span>已部署: {item.deployedNum}</span>,
                            <Button type="primary" onClick={() => {
                                this.props.history.push({
                                    pathname: `/common/deploy-cloud-choose`
                                });
                            }}>部署</Button>
                        ]}
                    >
                        <Meta
                            avatar={<Avatar src={lo}/>}
                            title={item.title}
                            description={item.description}
                        />
                    </Card>
            </span>
        ))
    };

    render() {
        return (
            <div id="example-show">
                <Layout style={{padding: '24px', minHeight: '300px'}}>
                    <Content className="content">
                        {this.renderCard()}
                    </Content>
                </Layout>
            </div>
        )
    }
}

export default ExampleShow;