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

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

export default class Maintainsituationperiod extends React.Component {
    constructor(props) {
        super(props);
        this.MacClick=this.MacClick.bind(this)//机台点击
        this.buttonClick=this.buttonClick.bind(this)//按钮点击事件
        this.height=this.height.bind(this)
        this.dataRender=this.dataRender.bind(this)
        this.getChardata=this.getChardata.bind(this)
        this.empworkhourStockageData=this.empworkhourStockageData.bind(this)//人员工时
        this.devStockageData=this.devStockageData.bind(this) //机台维修情况
        this.empcountStockageData=this.empcountStockageData.bind(this)//人员维修次数
        this.state = {
            show:false,//报表是否展开
            buttonarr:[{'type':'DAY','name':'日','message':'近7日'},{'type':'WEEK','name':'周','message':'近8周'},{'type':'MONTH','name':'月','message':'近6月'}],
            empdata:[], //人员维修情况数据
            devdata:[], //机台维修情况数据
            empworkhourdata:[],
            workhoursum:null,//维修总工时
            countsum:null,//维修总单数
            button:{'type':'DAY','name':'日','message':'近7日'},//选中的按钮，有日（DAY），周（WEEK），月（MONTH）,初始化为日
            
        };
    }
    componentWillMount(){
        window.conditionarr=[]

          //人员
          this.dataAjax2=Http.getJSON2("ds/data/maintain/empperiod",{'type':'DAY'}).done((data)=>{
              console.log(data)
              this.setState({empworkhourdata:data,empdata:data})
              this.dataRender()
          })
          //机台
          this.dataAjax2=Http.getJSON2("ds/data/maintain/devperiod",{'type':'DAY'}).done((data)=>{
            console.log(data)
            this.setState({devdata:data})
            this.dataRender()
         })
    }
    componentDidMount() {
     // this.loadData_t(this.state.Button)
    }
    buttonClick=(i)=>{
      this.setState({button:i})
      this.loadData_t(i)
    }
    //计算包裹画布div的height
    height=(data)=>{
      const h=20
      let length=data.length
      let height=0
      height=h*2*length+5+'px'
      console.log('高度',height)
      return height
    }
    //图标展示S
    loadData_t=(button)=>{
      //人员
      this.dataAjax2=Http.getJSON2("ds/data/maintain/empperiod",{'type':button.type}).done((data)=>{
          console.log(data)
          this.setState({empworkhourdata:data,empdata:data})
      })
      //机台
      this.dataAjax2=Http.getJSON2("ds/data/maintain/devperiod",{'type':button.type}).done((data)=>{
        console.log(data)
        this.setState({devdata:data})
     })
     this.getChardata(button)
     }

     getChardata=(button)=>{
      //人员
      this.dataAjax2=Http.getJSON2("ds/data/maintain/empperiod",{'type':button.type}).done((data)=>{
        console.log(data)
        this.setState({empworkhourdata:data,empdata:data})
        this.dataRender()
      })
    //机台
    this.dataAjax2=Http.getJSON2("ds/data/maintain/devperiod",{'type':button.type}).done((data)=>{
      console.log(data)
      this.setState({devdata:data})
      this.dataRender()
    })
    }
     dataRender=()=>{
      if (this.state.devdata && JSON.stringify(this.state.devdata) !== '[]'){
         this.devStockageData(this.state.devdata) 
      }
      if (this.state.devdata && JSON.stringify(this.state.empdata) !== '[]'){
         this.empworkhourStockageData(this.state.empdata) 
         this.empcountStockageData(this.state.empdata)
      }
     }
    //End
    //各机台维修次数坐标设置
    devStockageData=(data)=>{
      var chart = new F2.Chart({
        id: 'dev',
        pixelRatio: window.devicePixelRatio
      });
    
      chart.source(data, {
        maintaincount: {
          tickCount: 7
        }
      });
      chart.coord({
        transposed: true
      });
      chart.axis('code', {
        line: F2.Global._defaultAxis.line,
        grid: null
      });
      chart.axis('maintaincount', {
        line: null,
       // grid: F2.Global._defaultAxis.grid,
       grid: null,
        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('code*maintaincount');
      //文本
      data.map(function(obj) {
        chart.guide().text({
          position: [obj.code, obj.maintaincount],
          content: obj.maintaincount+'次',
          style: {
            fill: '#000',
            textAlign: 'start',
            textBaseline: 'middle',
            fontSize: 10
          },
           offsetX:4,

        });
      });
      chart.render();
    }
    //各人员维修工时坐标设置
    empworkhourStockageData=(data)=>{
      var chart = new F2.Chart({
        id: 'empworkhour',
        pixelRatio: window.devicePixelRatio
      });
    
      chart.source(data, {
        workhour: {
          tickCount: 6
        }
      });
      chart.coord({
        transposed: true
      });
      chart.axis('username', {
        line: F2.Global._defaultAxis.line,
        grid: null
      });
      chart.axis('workhour', {
        line: null,
       // grid: F2.Global._defaultAxis.grid,
       grid: null,
        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('username*workhour');
      //文本
      data.map(function(obj) {
        chart.guide().text({
          position: [obj.username, obj.workhour],
          content: obj.workhour+'小时',
          style: {
            fill: '#000',
            textAlign: 'start',
            textBaseline: 'middle',
            fontSize: 10
          },
          //offsetX:obj.workhour>2?-45:4,
           offsetX:4,

        });
      });
      chart.render();
    }
    //各人员维修次数坐标设置
    empcountStockageData=(data)=>{
      var chart = new F2.Chart({
        id: 'empcounts',
        pixelRatio: window.devicePixelRatio
      });
    
      chart.source(data, {
        counts: {
          tickCount: 6
        }
      });
      chart.coord({
        transposed: true
      });
      chart.axis('username', {
        line: F2.Global._defaultAxis.line,
        grid: null
      });
      chart.axis('counts', {
        line: null,
       // grid: F2.Global._defaultAxis.grid,
       grid: null,
        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('username*counts');
      //文本
      data.map(function(obj) {
        chart.guide().text({
          position: [obj.username, obj.counts],
          content: obj.counts+'单',
          style: {
            fill: '#000',
            textAlign: 'start',
            textBaseline: 'middle',
            fontSize: 10
          },
          //offsetX:obj.workhour>2?-45:4,
           offsetX:4,

        });
      });
      chart.render();
    }
    //手风琴S
    MacClick = (val) => {
      console.log(val)
      const { router } = this.context;
      router.push({
          pathname: '/macstatusnowinfo',
          state: {
              code: val,
              status: '',
          }
      });

    }

    //E
    render() {
        return (
        <div >
            <WhiteSpace size="md" />
            <WingBlank size="md">
            <div style={{ height: 'auto', textAlign: 'center'}}>
                <Flex >
                {
                    this.state.buttonarr.map(i=>{
                        return <Flex.Item>
                            <Button key='i.type' type={i.type==this.state.button.type?"primary":"default"} onClick={()=>this.buttonClick(i)}                                                                        
                            >
                                {i.name}
                            </Button>
                        </Flex.Item>

                    })
                }
                </Flex>
            </div>
            </WingBlank>
              

            {/* 机台维修次数S */}
            <WhiteSpace size="md" />    
            <WingBlank size="md">
            <Card>
                <div style={{ marginTop: '8px'}}>
                <div style={{ fontSize: '15px', padding: '9px 9px', color: '#000', left: '50px', display: 'flex' }}>机台{this.state.button.message}维修次数top10
                </div>
                {this.state.devdata&&this.state.devdata.length>0?
                <div style={{ width: "100%", margin: "0 auto",height:this.height(this.state.devdata)}}>  
                  { this.state.devdata.length!=0?
                    <div style={{color:'#BEBEBE',fontSize:'15px',padding: '0px 9px'}}>总机台数:{this.state.devdata[0].devtotal} 维修机台数:{this.state.devdata[0].devrepair}</div>
                    :
                    null
                  }
                    <canvas id= "dev"  style={{ width: "100%" ,height:'100%'}}></canvas>
                </div>
                :
                <div style={{ textAlign:'center'}}>
                <p>暂无数据</p>
                </div>
                }
                </div>
            </Card>
          </WingBlank>
          {/* 机台维修次数E */}  
             
            {/* 人员维修工时S */}
            <WhiteSpace size="md" />    
            <WingBlank size="md">
            <Card>
                <div style={{ marginTop: '10px'}}>
                <div style={{ fontSize: '15px', padding: '9px 9px', color: '#000', left: '50px', display: 'flex' }}>人员{this.state.button.message}维修工时统计(单位:小时)
                </div>
                {this.state.empdata&&this.state.empdata.length>0?
                <div style={{ width: "100%", margin: "0 auto",height:this.height(this.state.empdata)}}>
                {this.state.empdata.length!=0?
                    <div style={{color:'#BEBEBE',fontSize:'15px',padding: '0px 9px'}}>总维修工时:{this.state.empdata[0].workhoursum}小时 </div>
                    :
                    null
                  }                  
                    <canvas id= "empworkhour"  style={{ width: "100%" ,height:'100%'}}></canvas>
                </div>
                :
                <div style={{ textAlign:'center'}}>
                <p>暂无数据</p>
                </div>
                }
                </div>
            </Card>
            </WingBlank>
           {/* 人员维修工时E */} 
            {/* 人员维修次数S */}
            <WhiteSpace size="md" />    
            <WingBlank size="md">
            <Card>
                <div style={{ marginTop: '10px'}}>
                <div style={{ fontSize: '15px', padding: '9px 9px', color: '#000', left: '50px', display: 'flex' }}>人员{this.state.button.message}维修次数统计
                </div>
                {this.state.empdata&&this.state.empdata.length>0?
                <div style={{ width: "100%", margin: "0 auto",height:this.height(this.state.empdata)}}>
                { this.state.empdata.length!=0?
                    <div style={{color:'#BEBEBE',fontSize:'15px',padding: '0px 9px'}}>总维修单数:{this.state.empdata[0].countssum}单 </div>
                    :
                    null
                  }    
                    <canvas id= "empcounts"  style={{ width: "100%" ,height:'100%'}}></canvas>
                </div>
                :
                <div style={{ textAlign:'center'}}>
                <p>暂无数据</p>
                </div>
                }
                </div>
            </Card>
         </WingBlank>
        {/* 人员维修次数E */} 
        <WhiteSpace size="md" />  
        <WingBlank size="md">
        <div style={{paddingLeft:'10px',color:'#0000FF',textDecoration:'underline'}} onClick={()=>{this.setState({show:!this.state.show})}} >
                {this.state.show?'数据报表(收起)':'数据报表(展开)'}
        </div>
        </WingBlank>
        {/* 数据   */}
        {
        this.state.show?
        <WingBlank size="md">
        <div style={{ marginTop: 6, marginBottom: 10,border:'1px solid #D3D3D3',borderRadius:'8px'}} >

              <Accordion accordion openAnimation={{}} className="my-accordion" >
              <Accordion.Panel header="机台 Top10">
              <div style={{ height: '35px',background:'#ADD8E6' }}>
                <div style={{ paddingTop: '10px', width: '25%', float: 'left', textAlign: 'center' }}>机台</div>
                <div style={{ paddingTop: '10px', width: '25%', float: 'left', textAlign: 'center' }}>购买日期</div>
                <div style={{ paddingTop: '10px', width: '20%', float: 'left', textAlign: 'center' }}>维修次数</div>
                <div style={{ paddingTop: '10px', width: '30%', float: 'left', textAlign: 'center' }}>无故障时间</div>
              </div>
              <div>
                {
                  this.state.devdata && this.state.devdata.length>0?this.state.devdata.slice().reverse().map(i=>{
                  return  <div 
                        key={i.xh}
                        style={{backgroundColor: i.xh % 2 > 0 ? '' : '#FDF5E6', width: '100%', height: '20px', fontSize: '14px', paddingBottom: '6px', borderTop: '3px solid #ddd' }}
                    >
                      <div style={{ paddingTop: '6px', width: '25%', float: 'left', textAlign: 'center' }} onClick={() => this.MacClick(i.code)}><u>{i.code}</u></div>
                      <div style={{ paddingTop: '6px', width: '25%', float: 'left', textAlign: 'center' }}>{i.startdate}</div>
                      <div style={{ paddingTop: '6px', width: '20%', float: 'left', textAlign: 'center' }}>{i.maintaincount}</div>
                      <div style={{ paddingTop: '6px', width: '30%', float: 'left', textAlign: 'center' }}>{i.avgnotroubletime}小时</div>                    
                    </div>

                  })

                  :
                  <div style={{ textAlign:'center'}}>
                  <p>暂无数据</p>
                  </div>
                }

              </div>
              </Accordion.Panel>
              <Accordion.Panel header="人员" className="pad">
              <div style={{ height: '35px' ,background:'#ADD8E6'}}>
                <div style={{ paddingTop: '10px', width: '20%', float: 'left', textAlign: 'center' }}>人员</div>
                <div style={{ paddingTop: '10px', width: '25%', float: 'left', textAlign: 'center' }}>工时</div>
                <div style={{ paddingTop: '10px', width: '20%', float: 'left', textAlign: 'center' }}>工时占比</div>
                <div style={{ paddingTop: '10px', width: '15%', float: 'left', textAlign: 'center' }}>数量</div>
                <div style={{ paddingTop: '10px', width: '20%', float: 'left', textAlign: 'center' }}>数量占比</div>

              </div>
              {
                this.state.devdata && this.state.empdata.length>0?this.state.empdata.slice().reverse().map(i=>{
                return <div 
                    key={i.xh}
                    style={{backgroundColor: i.xh % 2 > 0 ? '' : '#FDF5E6', width: '100%', height: '20px', fontSize: '14px', paddingBottom: '6px', borderTop: '3px solid #ddd' }}
                  >
                  <div style={{ paddingTop: '10px', width: '20%', float: 'left', textAlign: 'center' }}>{i.username}</div>
                  <div style={{ paddingTop: '10px', width: '25%', float: 'left', textAlign: 'center' }}>{i.workhour}小时</div>
                  <div style={{ paddingTop: '10px', width: '20%', float: 'left', textAlign: 'center' }}>{i.workhourratios}</div> 
                  <div style={{ paddingTop: '10px', width: '15%', float: 'left', textAlign: 'center' }}>{i.counts}</div>
                  <div style={{ paddingTop: '10px', width: '20%', float: 'left', textAlign: 'center' }}>{i.countsratios}</div>
                 
              </div>

                  })

                  :
                  <div style={{ textAlign:'center'}}>
                  <p>暂无数据</p>
                  </div>
                }
              </Accordion.Panel>
              </Accordion>
              <div>


              </div>

          </div> 
          </WingBlank>  
        :
        null
        }                  
        </div>
        );
    }
}
Maintainsituationperiod.contextTypes = {
  router: PropTypes.object.isRequired
}