import React from 'react'
import 'antd-mobile/dist/antd-mobile.css';
import { CNavBar } from '../common/navbar.jsx';
import { Button, Flex, Card, List, WingBlank, WhiteSpace, Badge, DatePicker } from 'antd-mobile';
import { Http } from '../../Utils/help'
import Format from '../../Utils/NumericFormat';
import $ from 'jquery';
import PropTypes from 'prop-types';

//import '../dashboard/less/list.less';

const F2 = require('@antv/f2');
const Item = List.Item;
const Brief = Item.Brief;

export default class OEE extends React.Component {
    constructor(props,context) {
        super(props,context);
        // const { func } = this.props.location.state;
        this.StockageData = this.StockageData.bind(this);
        this.state = {
            // func: func,
            data: [],
            oeedetail: [],
        }
    }

    //取得json数据集
    componentWillMount() {
        //this.dataAjax = Http.getJSON2("ds/data/energyanalysis/energyanalysismerge");
        this.dataAjax = Http.getJSON2("ds/data/oeeinfo/oeeinfodetail", { "type": '0', "machine": '' });
    }


    componentDidUpdate() {

    }

    componentDidMount() {
        console.log("componentDidMount--");

        this.dataAjax.done((result) => {
            console.log(result);
            try {
                this.setState(
                    {   
                        oeedetail: this.packageing(result),
                    }, () => {
                        this.chartRender();
                    }
                )
            } catch (error) {
                console.error(error.message);
                console.error(error.stack);
            }
        })
    }

    //数据重新封装
    packageing = (values) => {
        console.log("packageing--");
        //console.log(values);
        // console.log(JSON.stringify(values));
        var vdate = '';
        if (values) {
            var code = "";
            for (let i = 0; i < values.length; i++) {
                if (values[i].code != code) {
                    console.log("values[i].code==code");
                    vdate = vdate.substring(0, vdate.length - 1) + ']},{"code":"' + values[i].code + '","name":"' + values[i].name + '","data":[' + JSON.stringify(values[i]) + ',';
                    code = values[i].code;
                } else {
                    //console.log("values[i].code!=code");
                    vdate = vdate + (JSON.stringify(values[i])) + ',';
                }

            }
            //console.log('[' + vdate.substring(3, vdate.length - 1) + ']}]');
            vdate = '[' + vdate.substring(3, vdate.length - 1) + ']}]';
            vdate = JSON.parse(vdate)

        }
        //console.log(vdate);
        return vdate;
    }

    chartRender = () => {
        console.log("chartrender...")
        this.StockageData(this.state.oeedetail)
    }

    StockageData = (oeedetail) => {
        oeedetail.map((i, index) => {
            // console.log(i);
            //F2 绘制图表
            F2.Global.pixelRatio = window.devicePixelRatio;
            const chart = new F2.Chart({
                id: "oee" + (i.code),
                padding: ['auto', 'auto', 40, 'auto']
            });
            try {
                chart.source(i.data, {
                    ddate: {
                        type: 'timeCat',
                        tickCount: 6,
                        range: [0, 1],
                        mask: 'MM-DD',
                        size: 3
                    },
                    rate: {
                        min: 0,
                        //30递增显示
                        //tickInterval: 30
                    },
                    type: {
                        type: 'cat',
                        //values: ['propertyratio', 'qualityratio', 'timeratio'],
                        alias: ['性能稼动率', '时间稼动率']

                    }
                });
                //自定义提示信息Tooltip
                chart.tooltip({
                    showItemMarker: true,
                });

                //chart.legend('type', false)
                chart.axis('ddate', {
                    line: null,
                    label: {
                        fontSize: 13,
                        //文本旋转
                        rotate: -Math.PI / 2,
                        textAlign: 'end',
                        textBaseline: 'middle'
                    }
                });
                chart.axis('rate', {
                    grid(text) {
                        if (text === '0') {
                            return {
                                stroke: '#efefef'
                            };
                        }
                        return {
                            stroke: '#f7f7f7'
                        };
                    },
                    label: {
                        fontSize: 14
                    }
                });

            } catch (error) {
                console.error(error.message)
            }

            //将数据值映射到图形
            chart.line().position('ddate*rate').color('type').size(2).shape('smooth');
            chart.point().position('ddate*rate').color('type').size(2).shape('smooth');
            //渲染图表
            chart.render();
        }, this);
    }

    render() {
        return (
            <div>
            {this.state.oeedetail && this.state.oeedetail.length>0?
            <div key={"key1"} style={{ height: '100%' }}>
                {this.state.oeedetail.map((i, index) => (
                    <WingBlank key={index} size="lg">
                        <WhiteSpace size="lg" />
                        <Card key={index}>
                            <Card.Header
                                title={i.name + "效率"}
                                extra={
                                    <Button disabled={!(i.data instanceof Array)} type="ghost" size="small" inline onClick={() => {
                                        if (null != i.code && '' != i.code) {
                                            console.log("Click 明细");
                                            // const { history } = this.props;
                                            // history.push({
                                            //     pathname: '/oeedetail',
                                            //     state: {

                                            //         func: this.state.func,
                                            //         code: i.code,
                                            //         name: i.name,
                                            //         data: i.data
                                            //     }
                                            // });
                                            const { router } = this.context;
                                            router.push({
                                                pathname:'oeedetail',
                                                state: {

                                                    func: this.state.func,
                                                    code: i.code,
                                                    name: i.name,
                                                    data: i.data
                                                }
                                            });
                                        }
                                    }}>明细</Button>
                                }
                            />
                            <Card.Body>
                                <div key={index} style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                                    <canvas id={"oee" + (i.code)} style={{ width: "100%", height: "100%" }}></canvas>
                                </div>
                            </Card.Body>
                        </Card>
                    </WingBlank>
                ))}

                <WhiteSpace size="lg" />
            </div>
            :
            <div style={{ textAlign:'center'}}>
            <p>暂无数据</p>
            </div>
            }
            </div>
        )
    }
}


OEE.contextTypes = {
    router: PropTypes.object.isRequired
}