import React from 'react'
import 'antd-mobile/dist/antd-mobile.css'; 
import ReactDOM from 'react-dom';
import { CNavBar } from '../common/navbar.jsx';
import { Button, List, Flex, Progress, Card, WhiteSpace, Badge } from 'antd-mobile';
import { Http } from '../../Utils/help'
import $ from 'jquery'; 
 const F2 = require('@antv/f2'); 

export default class MachineOEE extends React.Component {
    constructor(props) {
        super(props);
        const {func, machine} = this.props.location.state;
        this.state={
            func:func,
            datas:[],
        } 
        this.ExpPie = this.ExpPie.bind(this);
    }

    componentWillMount(){
        this.dataAjaxJDLAB = Http.getJSON("ds/data/user/info");
    }
  componentWillUnmount() {
    if (this.pieChart) { 
      this.pieChart.destroy(); 
    }
  } 

  componentDidUpdate(){ 
      if(this.state.datas)
          this.ExpPie(this.state.datas);
  }

    componentDidMount() { 
        this.dataAjaxJDLAB.done((result)=>{
            try{
                this.setState({
                    datas:result
                })
            }catch(err){
                console.debug(err);
            }
        })
    }
    
    
    ExpPie =(data)=>{
        var chart = new F2.Chart({
            id: 'divpie',
            pixelRatio: window.devicePixelRatio
          });
          chart.source(data, {
            percent: {
              formatter: function formatter(val) {
                return val * 100 + '%';
              }
            }
          });
          chart.legend({
            position: 'right',
            itemFormatter: function itemFormatter(val) {
              return val;
            }
          });
          chart.tooltip(false);
          chart.coord('polar', {
            transposed: true,
            radius: 0.85
          });
          chart.axis(false);
          chart.interval().position('a*percent').color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']).adjust('stack').style({
            lineWidth: 1,
            stroke: '#fff',
            lineJoin: 'round',
            lineCap: 'round'
          }).animate({
            appear: {
              duration: 1200,
              easing: 'bounceOut'
            }
          });
          
          chart.render();
          this.pieChart = chart;
      }
       
    getplanbymach(machno){
        Http.getJSON2("wfinput/machine",{machine:machno}).done((result)=>{
            console.log(result)
        });
    }

    render() {
        return (
            <div style={{backgroundColor:'#fff',height:'100%'}}> 
                <List>
                    <List.Item>
                    效率统计:
                        <Badge text="A班" hot style={{ marginLeft: 12, backgroundColor: this.jdlacolor }} />
                        <Badge text="B班" hot style={{ marginLeft: 12, backgroundColor: this.jdlbcolor }} />
                        <Badge text="总稼动率" hot style={{ marginLeft: 12, backgroundColor: this.jdlcolor }} />
                    </List.Item>
                </List>
  
                <Card full key={'a'}>
                    <Card.Header 
                    />
                    <Card.Body>
                        <div>
                            <div>用户</div>
                            <div>
                                <canvas id='divpie'> 
                                </canvas>
                            </div>
                        </div>
                    </Card.Body>
                </Card> 
            </div>  
        ) 
    }
}