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

const F2 = require('@antv/f2');
const PieLabel = require('@antv/f2/lib/plugin/pie-label');

export default class Maintainsituation extends React.Component {
    constructor(props) {
        super(props);
        this.height=this.height.bind(this)
        this.getempChardata=this.getempChardata.bind(this)
        this.getdeviceCharadata=this.getdeviceCharadata.bind(this)
        this.getempworkhourChardata=this.getempworkhourChardata.bind(this)
        this.chartRender=this.chartRender.bind(this)
        this.devicechartRender=this.devicechartRender.bind(this)
        this.empworkhourRender=this.empworkhourRender.bind(this)
        this.StockageData=this.StockageData.bind(this)
        this.DeviceStockageData=this.DeviceStockageData.bind(this)
        this.EmpworkhourStockageData=this.EmpworkhourStockageData.bind(this)
        this.state = {
            empdata:[],
            devicedata:[],  
            empworkhourdata:[],
        };
    }

    componentWillMount(){
        this.loadData_t();
        this.dataAjax2= Http.getJSON2("ds/data/maintain/empworkhour",{})

    

    }
    componentDidMount() {
        this.loadData_t();
    }
    loadData_t=()=>{
        this.dataAjax2= Http.getJSON2("ds/data/maintain/maintaintimeaxis",{})
        this.dataAjax2=Http.getJSON2("ds/data/maintain/empmaintaincount",{})
        this.getdeviceCharadata()
        this.getempChardata()
        this.getempworkhourChardata()
    }
    //计算包裹画布div的height
    height=(data)=>{
      const h=25
      let length=data.length
      let height=0
      if(data===this.state.empdata)
      height=h*2*length+'px'
      if(data===this.state.devicedata)
      height=h*length/2+110+'px'
      if(data===this.state.empworkhourdata)
      height=h*2*length+'px'
      console.log('高度',height)
      return height
    }
    //机台报修情况
    getdeviceCharadata=()=>{
        this.dataAjax2= Http.getJSON2("ds/data/maintain/maintaintimeaxis",{},(data=>{
            const devicedatalist=[]
            let elememnt={}
            for(let i=0;i<data.length;i++){
                elememnt.State=data[i].device
                elememnt.time='报修等待时间'
                elememnt.timelong=data[i].waittime
                devicedatalist.push(elememnt)
                elememnt={}
                elememnt.State=data[i].device
                elememnt.time='维修处理时间'
                elememnt.timelong=data[i].dealtime
                devicedatalist.push(elememnt)
                elememnt={}
            }
            this.setState({devicedata:devicedatalist},this.devicechartRender())
            console.log(this.state.devicedata)
            }))
    }
    devicechartRender=()=>{
        if (this.state.devicedata && JSON.stringify(this.state.devicedata) !== '[]')
        this.DeviceStockageData(this.state.devicedata)
    }

    DeviceStockageData=(data)=>{
      var Shape = F2.Shape;
      var Util = F2.Util;
      var G = F2.G;
      Shape.registerShape('interval', 'text', {
        draw: function draw(cfg, container) {
          var points = this.parsePoints(cfg.points);
          var style = {
            fill: cfg.color,
            z: true // 需要闭合
          };
          var shapes = [];
          var intervalWidth = points[1].x - points[0].x;
          var interval = container.addShape('rect', {
            attrs: Util.mix({
              x: points[0].x,
              y: points[0].y,
              width: intervalWidth,
              height: points[3].y - points[0].y
            }, style)
          }); // 绘制柱形
          shapes.push(interval);
          var origin = cfg.origin._origin; // 获取对应的原始数据
          var textOffsetX = 4;
    
          var text = new G.Shape.Text({
            attrs: {
              x: points[0].x + textOffsetX,
              y: (points[0].y + points[3].y) / 2,
              text: origin.timelong+'小时',
              fill:  '#000',
              textAlign: 'start',
              textBaseline: 'middle',
              fontSize: 10
            }
          });
          var textWidth = text.getBBox().width;
          if (textWidth + textOffsetX < intervalWidth) {
            container.add(text);
            shapes.push(text);
          }
          return shapes;
        }
      });
        var chart = new F2.Chart({
            id: 'device',
            pixelRatio: window.devicePixelRatio
          });
        
          chart.source(data, {
            'timelong': {
              tickCount:6
            }
          });
          chart.coord({
            transposed: true
          });
          chart.axis('State', {
            line: F2.Global._defaultAxis.line,
            grid: null,
          });
          chart.axis('timelong', {
            line: null,
            grid: F2.Global._defaultAxis.grid,
            label: function label(text, index, total) {
              var textCfg = {};
              if (index === 0) {
                textCfg.textAlign = 'left';
              } else if (index === total - 1) {
                textCfg.textAlign = 'right';
              }
              return textCfg;
            }
          });
          chart.tooltip({
            custom: true, // 自定义 tooltip 内容框
            onChange: function onChange(obj) {
              var legend = chart.get('legendController').legends.top[0];
              var tooltipItems = obj.items;
              var legendItems = legend.items;
              var map = {};
              legendItems.map(function(item) {
                map[item.name] = _.clone(item);
              });
              tooltipItems.map(function(item) {
                var name = item.name;
                var value = item.value;
                if (map[name]) {
                  map[name].value = value;
                }
              });
              legend.setItems(_.values(map));
            },
            onHide: function onHide() {
              var legend = chart.get('legendController').legends.top[0];
              legend.setItems(chart.getLegendItems().country);
            }
          });
          chart.interval().position('State*timelong').color('time').shape('text').adjust('stack');
          
          chart.render();

    }
    //今日人员维修情况
    getempChardata=()=>{
        this.dataAjax2 = Http.getJSON2("ds/data/maintain/empmaintaincount", {},(data=>{ 
            const emplist = []  
            let  element = {} 
            for(let i = 0; i<data.length;i++){
            element.label= data[i].empname
            element.type= '维修中'
            element.value= data[i].ingcount
            emplist.push(element)
            element={}
            element.label= data[i].empname
            element.type= '维修完成'
            element.value= data[i].finishing
            console.log(element)
            emplist.push(element)
            element={}
            }
            console.log(emplist)
            this.setState({empdata:emplist},this.chartRender())
            console.log(this.state.empdata)
            }))
           
    }
    chartRender=()=>{
        if (this.state.empdata && JSON.stringify(this.state.empdata) !== '[]')
        this.StockageData(this.state.empdata)
    }
    StockageData=(data)=>{
         // 文本显示
        //  var Shape = F2.Shape;
        //  var Util = F2.Util;
        //  Shape.registerShape('interval', 'text', {
        //    draw: function draw(cfg, container) {
        //      var points = this.parsePoints(cfg.points);
        //      // points 顶点的顺序
        //      // 1 ---- 2
        //      // |      |
        //      // 0 ---- 3
        //      var style = Util.mix({
        //        fill: cfg.color,
        //        z: true // 需要闭合
        //      }, cfg.style);
        //      var intervalShape = container.addShape('rect', {
        //        attrs: Util.mix({
        //          x: points[1].x,
        //          y: points[1].y,
        //          width: points[2].x - points[1].x,
        //          height: points[0].y - points[1].y
        //        }, style)
        //      });
        //      var origin = cfg.origin._origin; // 获取对应的原始数据记录
        //      var textShape = container.addShape('text', {
        //        zIndex: 1,
        //        attrs: {
        //         x: (points[1].x + points[2].x) / 2+15,
        //         y: points[1].y - 5, // 往上偏移 5 像素
        //         text: origin['value']+'单',
        //         fill: '#808080',
        //         textAlign: 'center',
        //         textBaseline: 'bottom',
        //         fontSize: 10 // 字体大小
        //        }
        //      });
        //      container.sort();
        //      return [intervalShape, textShape];
        //     // return shapes;
        //    }
        //  });  
        var chart = new F2.Chart({
            id: 'emp',
            pixelRatio: window.devicePixelRatio
          });
          chart.source(data.reverse(), {
            value: {
              tickCount: 4,
            }
          });
          chart.coord('rect', {
            transposed: true
            
          });
     
        
          chart.tooltip({
            custom: true, // 自定义 tooltip 内容框
            onChange: function onChange(obj) {
              var legend = chart.get('legendController').legends.top[0];
              var tooltipItems = obj.items;
              var legendItems = legend.items;
              var map = {};
              legendItems.map(function(item) {
                map[item.name] = _.clone(item);
              });
              tooltipItems.map(function(item) {
                var name = item.name;
                var value = item.value;
                if (map[name]) {
                  map[name].value = value;
                }
              });
              legend.setItems(_.values(map));
            },
            onHide: function onHide() {
              var legend = chart.get('legendController').legends.top[0];
              legend.setItems(chart.getLegendItems().country);
            }
          });
          chart.axis('label', {
            line: F2.Global._defaultAxis.line,
            grid: null
          });
          chart.axis('value', {
            line: null,
            grid: F2.Global._defaultAxis.grid,
            label: function label(text, index, total) {
              var textCfg = {};
              if (index === 0) {
                textCfg.textAlign = 'left';
              } else if (index === total - 1) {
                textCfg.textAlign = 'right';
              }
              return textCfg;
            }
          });
          chart.interval().position('label*value').color('type').adjust({
            type: 'dodge',
            marginRatio:10 / 32
          });
      // 文本
       data.map(function(obj) {
        chart.guide().text({
          position: [obj.label, obj.value],
          content: obj.value+'单',
          style: {
            fill: '#000',
            textAlign: 'start',
            textBaseline: 'middle',
            fontSize: 10
          },
         // offsetX:obj.value>0?-20:10,
          offsetX:obj.value>0?-20:10,
          //offsetY:obj.value>0 && obj.type==='维修完成'?13:-13,
          offsetY:obj.value<0 && obj.type==='维修完成'?13:obj.type==='维修中'?-13:13
          


          
      

        });
      });
          chart.render();
    }
    //人员维修工时统计
    getempworkhourChardata=()=>{
      this.dataAjax2 = Http.getJSON2("ds/data/maintain/empworkhour", {},(data=>{ 
        this.setState({empworkhourdata:data},this.empworkhourRender())
        console.log(this.state.empworkhourdata)
        }))
    }
    empworkhourRender=()=>{
      if (this.state.empworkhourdata && JSON.stringify(this.state.empworkhourdata) !== '[]')
      this.EmpworkhourStockageData(this.state.empworkhourdata)
    }
    EmpworkhourStockageData=(data)=>{
      var chart = new F2.Chart({
        id: 'empworkhour',
        pixelRatio: window.devicePixelRatio
      });
    
      chart.source(data, {
        timecount: {
          tickCount: 3
        }
      });
      chart.coord({
        transposed: true
      });
      chart.axis('empname', {
        line: F2.Global._defaultAxis.line,
        grid: null
      });
      chart.axis('timecount', {
        line: null,
        grid: F2.Global._defaultAxis.grid,
        label: function label(text, index, total) {
          var textCfg = {};
          if (index === 0) {
            textCfg.textAlign = 'left';
          } else if (index === total - 1) {
            textCfg.textAlign = 'right';
          }
          return textCfg;
        }
      });
      chart.interval().position('empname*timecount');
      //文本
      data.map(function(obj) {
        chart.guide().text({
          position: [obj.empname, obj.timecount],
          content: obj.timecount+'小时',
          style: {
            fill: '#000',
            textAlign: 'start',
            textBaseline: 'middle',
            fontSize: 10
          },
          offsetX:obj.timecount>2?-42:4,

        });
      });
      chart.render();
    }
    render() {
        return (
        <div>
        <WhiteSpace size="md" />
        <WingBlank size="md"></WingBlank>
        <Card  style={{ borderTop: 'none', borderBottom: 'none', borderLeft: '1px dashed #c4ccd4', borderRight: '1px dashed #c4ccd4' }}>
            <div style={{ marginTop: '15px'}}>
            <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>今日人员维修情况(单位：单)
            </div>
            <div style={{ width: "100%", margin: "0 auto" ,height:this.height(this.state.empdata)}}>
                <canvas id= "emp"  style={{ width: "100%" ,height:'100%'}}></canvas>
            </div>
            </div>
        </Card>
        <WhiteSpace size="md" />
        <Card > 
        <div style={{ marginTop: '15px' }}>
            <div  style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>报修机台情况(单位:小时)
            </div>
            <div style={{ width: "100%", margin: "0 auto" ,height:this.height(this.state.devicedata)}}>
                <canvas id="device" style={{ width: "100%",height:'100%'}}></canvas>
            </div>
            </div>
        </Card>
        <WhiteSpace size="md" />
        <Card>
            <div style={{ marginTop: '15px'}}>
            <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>人员当月维修工时统计(单位:小时)
            </div>
            <div style={{ width: "100%", margin: "0 auto",height:this.height(this.state.empworkhourdata)}}>
                <canvas id= "empworkhour"  style={{ width: "100%" ,height:'100%'}}></canvas>
            </div>
            </div>
        </Card>
        </div>
        );
    }
}