import React from 'react';
import ReactDOM from 'react-dom';
import 'antd-mobile/dist/antd-mobile.css';
import { Card, WhiteSpace } from 'antd-mobile';
import './less/list.less';
import { Http } from '../../Utils/help'

export default class workshoplist extends React.Component {
    constructor(props) {
        super(props);
        const { workshopdata } = this.props.location.state;
        this.state = {
            workshopdata: [],
        };
    }

    componentWillMount() {
        console.log("componentWillMount--")
        this.dataAjax = Http.getJSON2("ds/data/macstatus/getbeforelist", { "type": '1', "parameter": '' });
    }
    componentDidUpdate() {
        console.log("componentDidUpdate--")
    }

    componentDidMount() {
        console.log("componentDidMount--");
        this.dataAjax.done((result) => {
            console.log(result)
            this.setState({
                workshopdata: result,
            })
        })
    }

    render() {
        let card;
        const { workshopdata } = this.state
        { console.log(workshopdata) }
        (workshopdata.length > 0) ? card =
            <div>
                <WhiteSpace size="lg" />
                {workshopdata.map((val, ind) =>
                    <Card
                        key={val.workshopid}
                        style={{ margin: '5px' }}
                        onClick={() => {
                            console.log(val.workshopid);
                            const { history } = this.props;
                            history.push({
                                pathname: '/mactypelist',
                                state: {
                                    workshopid: val.workshopid
                                }
                            });
                        }}>
                        <Card.Header
                            style={{ backgroundColor: 'bisque' }}
                            title={val.name}
                            //thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                            extra={<span>点击选择机型</span>}
                        />
                        <Card.Body>
                            <div>{'开机:' + val.opennum + ' 关机:' + val.closenum + ' 待机:' + val.awaitnum + ' 无数据:' + val.nodatanum}</div>
                        </Card.Body>
                        <Card.Footer content="负责人:xxx" extra={<div>开机比例: {val.openratio}%</div>} />
                    </Card>
                )}
            </div>
            : card = '无数据';
        return (
            <div>
                {card}
            </div>
        )
    }
}