import React from 'react'
import 'antd-mobile/dist/antd-mobile.css'; 
import { Button,Card,  WingBlank, WhiteSpace  } from 'antd-mobile';
import { Http } from '../../Utils/help'

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

const F2 = require('@antv/f2');

export default class ProcessWastnum extends React.Component {
    constructor(props) {
        super(props);
        const {func} = this.props.location.state;
        this.ProcessWastnum = this.ProcessWastnum.bind(this);
        this.state={
            func:func,
            data:[],
            wastnumdatadetail:[],
            result:[],
            detaildata:[]
        }
    }

    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;
        }
        this.dataAjax = Http.getJSON2("ds/data/wastnum/wastnummerge",{ "ScDate": GetData(-30), "EcDate": GetData(0), "process": "" });
    }

    componentDidUpdate(){
    }

    componentWillUnmount(){

    }

    componentDidMount() {
        this.dataAjax.done((result)=>{
            var data;
            var wastnumdatadetaildata;
            if (result && result.length > 0){
                data=result
                wastnumdatadetaildata=this.packageing(result)
            }
            else{
                data=[]
                wastnumdatadetaildata=[]
            }
            console.log(result)
               this.setState({
                    // result:result,
                    result:data,
                    // wastnumdatadetail:this.packageing(result),
                    wastnumdatadetail:wastnumdatadetaildata,
                }, ()=>{
                    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)
        }
        console.log("vdate:",vdate)
        return vdate;
    }

    chartRender=()=>{
        console.log("wastnumdatadetail:",this.state.wastnumdatadetail)
        this.ProcessWastnum(this.state.wastnumdatadetail);
    }

    ProcessWastnum=(wastnumdatadetail)=>{
        console.log("wastnumdatadetail:",wastnumdatadetail)
        wastnumdatadetail.map((i, index) => {
            if (i.data instanceof Array) {
                const chart = new F2.Chart({
                    id: 'detail4'+i.workshopname ,
                    pixelRatio: 2
                });
                chart.source(i.data, {
                    ddate: {
                        type: 'timeCat',
                        tickCount: 6,
                        mask: 'MM-DD',
                    },
                    wastnum: {
                        tickCount: 5,
                    }
                });
                chart.axis('wastnum', {
                    grid(text) {
                        if (text === '0') {
                            return {
                                stroke: '#efefef'
                            };
                        }
                        return {
                            stroke: '#f7f7f7'
                        };
                    },
                    label: {
                        fontSize: 14
                    }
                });
                chart.axis('ddate', {
                    line: null,
                    label: {
                        fontSize: 14
                    }
                });
                chart.line().position('ddate*wastnum').color('type').size(3)
                chart.point().position('ddate*wastnum').color('type').size(2);
                // 水平方向的平铺动画
                chart.animate({
                    type: 'waveh'
                });
            
                chart.render();
            }
        }, this);
    }

    getdatadetail=(value)=>{
   console.log("value:",value)
   var ndata=this.state.wastnumdatadetail
   console.log("ndata:",ndata)
//    if (null != ndata && ndata > 0) {
     const { history } = this.props;
    var tpdata=[]
    for(var i=0;i<ndata.length;i++){
        if(ndata[i].workshopname===value){
            tpdata=ndata[i].data
        }
    }
    console.log("tpdata:",tpdata)
    // history.push({ pathname: '/processwastdatanum', 
    history.push({ pathname: '/wastnumdetail', 
        state: { 
            func:this.state.func,
            workshopname:value,
            detaildata:tpdata,
        } 
    });
// }
    }

    render() {
        return (
            <div style={{height:'100%'}}>
                {this.state.wastnumdatadetail&&this.state.wastnumdatadetail.length>0?
                <div>
                {this.state.wastnumdatadetail.map((i, index) => (
                    <WingBlank size="lg">
                        <WhiteSpace size="lg" />
                        <Card key={"detail1"+i.workshopname}>
                            <Card.Header
                                title={i.workshopname + "损耗(kg)"}
                                extra={<Button type="ghost" size="small" inline
                                     onClick={()=>{
                                         this.getdatadetail(i.workshopname)
                                }}>数据</Button>}
                            />
                            {/* <Card.Header
                                title={i.workshopname + "损耗(kg)"} key={"detail2"+i.workshopname}
                                /> */}
                            <Card.Body>                            
                                <div style={{width:"100%", height: "200px", margin:"0 auto"}} key={"detail3"+i.workshopname }>
                                    <canvas id={'detail4'+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>
        ) 
    }
}