import React from 'react'
import 'antd-mobile/dist/antd-mobile.css';
import { Flex, Card, WingBlank, WhiteSpace } 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');

export default class Output extends React.Component {
    constructor(props) {
        super(props);
        const { func } = this.props.location.state;
        this.ProcessOutputSum = this.ProcessOutputSum.bind(this);
        this.state = {
            func: func,
            data: [],
            linedata: [],
            workshopname: "",
            packdata: [],
        }
    }

    //processoutputsum/processoutputsummerge
    componentWillMount() {
        const  GetData=(value) =>{
            var tdate=new Date();
            tdate.setDate(tdate.getDate() + value)
            var year=tdate.getFullYear();
            var month=tdate.getMonth()+1;
            var day=tdate.getDate();
            if(month<10){
                month='0'+month
            }
            if(day<10){
                day='0'+day
            }
            var ndate=year+'-'+month+'-'+day;
            return ndate;
        }
        // console.log(GetData(-14))
        this.dataAjax = Http.getJSON2("ds/data/processoutputsum/processoutputsummerge", { "ScDate": GetData(-30), "EcDate": GetData(0), "process": "" });
    }

    componentDidUpdate() {

    }

    componentDidMount() {
        this.dataAjax.done((result) => {
            var results = []
            var datas = {}
            for (var i = 0; i < result.length; i++) {
                var workshopname = result[i].workshopname
                if (result[i].chanchusj !== null) {
                    datas.date = result[i].startdate
                    datas.value = result[i].chanchusj
                    datas.type = result[i].datatype
                    datas.workshopname = result[i].workshopname
                    results.push(datas)
                    datas = {}
                }
                if (result[i].biaozhun !== null) {
                    datas.date = result[i].startdate
                    datas.value = result[i].biaozhun
                    datas.type = result[i].datatype
                    datas.workshopname = result[i].workshopname
                    results.push(datas)
                    datas = {}
                }
            }
            this.setState({
                linedata: results,
                workshopname: workshopname,
                packdata: this.packageing(results)&&this.packageing(results).length >0?this.packageing(results):[],
            }, () => {
                this.chartRender();
            })
        })
    }

    packageing = (values) => {
        var vdate = '';
        if (values && values.length > 0) {
            var wpname = "";
            for (let i = 0; i < values.length; i++) {
                if (values[i].workshopname != wpname) {
                    vdate = vdate.substring(0, vdate.length - 1) + ']},{"workshopname":"' + values[i].workshopname + '" ,"data":[' + JSON.stringify(values[i]) + ',';
                    wpname = values[i].workshopname;
                } else {
                    vdate = vdate + (JSON.stringify(values[i])) + ',';
                }
            }
            if (vdate === '') {
                vdate = '{}'
            } else {
                vdate = '[' + vdate.substring(3, vdate.length - 1) + ']}]';
            }
            vdate = JSON.parse(vdate)
        }
        return vdate;
    }

    componentWillUnmount() {

    }

    chartRender = () => {
        console.log("chartrender...")
        this.ProcessOutputSum(this.state.packdata);
    }

    ProcessOutputSum = (linedata) => {
        console.log("linedatalinedata:", linedata)
        linedata.map((i, index) => {
            if (i.data instanceof Array) {
                var chart = new F2.Chart({
                    id: i.workshopname,
                    pixelRatio: window.devicePixelRatio
                });
                chart.source(i.data, {
                    value: {
                        tickCount: 5
                    }
                });
                chart.scale('date', {
                    type: 'timeCat',
                    tickCount: 7,
                    mask: 'MM-DD',
                    range: [0.04, 1],
                });
                chart.point().position('date*value').color('type').shape('smooth');
                chart.line().position('date*value').color('type').shape('smooth');
                chart.render();
            }
        }, this);
    }

    render() {

        return (
            
            <div style={{ height: '100%' }}>  
            {this.state.packdata && this.state.packdata.length>0 ?
            <div>           
                {this.state.packdata.map((i, index) => (
                    <WingBlank size="lg">
                        <WhiteSpace size="lg" />
                        <Card key={i.workshopname}>
                        <Card.Header title={i.workshopname + "产出数据(千克)"}  />
                            <Card.Body>
                                {
                                    this.state.linedata && JSON.stringify(this.state.linedata) !== '[]' ?
                                       
                                            <div style={{ width: "100%", height: "auto", margin: "0 auto" }}>
                                                <canvas id={i.workshopname} style={{ width: "100%", height: "100%" }}></canvas>
                                            </div>
                                    
                                        : ''
                                }
                            </Card.Body>
                        </Card>
                    </WingBlank>
                ))}
                </div>
                :
                <div style={{ textAlign:'center'}}>
                <p>暂无数据</p>
               </div>
            }
                <WhiteSpace size="lg" />
            </div>
        
        )
    }
}