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


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

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

export default class OEEDetail extends React.Component {
    constructor(props) {
        super(props);
        const { func, code, name, data } = this.props.location.state;
        this.state = {
            func: func,
            data: data,
            code: code,
            name: name,
            oeedetail: []
        }
    }
    //取得json数据集
    componentWillMount() {
        console.log(this.state.code);
        console.log(this.state.name);
        //console.log(JSON.stringify(this.state.data));
        this.dataAjax = Http.getJSON2("ds/data/oeeinfo/oeeinfodetail", { "type": '1', "machine": this.state.code });
    }

    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++) {
                //console.log(values[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 {
                    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.....");
        //console.log(this.state.oeedetail);

        try {
            this.electricityData(this.state.oeedetail);
        } catch (error) {
            console.error(error.message);
        }
    }

    electricityData = (oeedetail) => {
        oeedetail.map((i, index) => {
            //F2 绘制图表
            F2.Global.pixelRatio = window.devicePixelRatio;
            const chart = new F2.Chart({
                id: "oeedetailinfo" + (i.code)
            });
            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(
                    {
                        //custom: true, // 自定义 tooltip 内容框
                        showItemMarker: true,
                    }
                );

                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 key="div1" style={{ height: '100%' }}>
                <NavBar mode="light">
                    <span style={{ color: '#000' }}>{this.state.name + '效率'}</span>
                </NavBar>
                {this.state.oeedetail.map((i, index) => (
                    <WingBlank key={"blank"+index} size="lg">
                        <WhiteSpace key={"space"+index} size="lg" />
                        <Card key={i.code}>
                            <Card.Header title={i.code + ' ' + i.name + "效率"} />
                            <Card.Body>
                                <div key={i.code+index} style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                                    <canvas id={"oeedetailinfo" + (i.code)} style={{ width: "100%", height: "100%" }}></canvas>
                                </div>
                            </Card.Body>
                        </Card>
                    </WingBlank>
                ))}

                <WhiteSpace size="lg" />
            </div>
        )
    }
}