import React from 'react';
import ReactDOM from 'react-dom';
import 'antd-mobile/dist/antd-mobile.css'; 
import { Card,WingBlank, WhiteSpace,List,Flex,Button,Modal,Picker,Accordion,Badge,Progress,InputItem } from 'antd-mobile';
import {Http} from '../../Utils/help';
import './less/rptlist.less';
 

const F2 = require('@antv/f2');
const Item = List.Item;
const Brief = Item.Brief;
var tcus="";
const alert = Modal.alert;
var refreshwkvar;
let so_info= {
    display: 'flex',
    alignItems: 'center',
    fontSize: '15px',
     
  }

let show_info= {
    display: 'flex',
    alignItems: 'center',
    fontSize: '9px',
     
  }

 let progress ={
    margin: '0 10px 0 10px',
    width: '100%',
    
  } 
  let progress1 ={
    margin: '0 0 0 0',
    width:'20%',
    fontSize:'14px',
  }
 
  let titlegr={
    fontSize: '18px', color: '#000000',flexGrow:1
    }

  let title={
     fontSize: '18px', color: '#000000' ,padding:'0 0 10px 0'
     }

  let comment={
        fontSize: '16px', color: '#949896'
        }

  let ext={
        fontSize: '14px', color:"#1C00DA"
        }
export default class Sasoprodstatus extends React.Component {
    constructor(props) {
        super(props);
        this.chartRender = this.chartRender.bind(this);
        this.ExpTrend = this.ExpTrend.bind(this);
        this.onChange = this.onChange.bind(this);
        this.loadData = this.loadData.bind(this);
        this.refreshwk = this.refreshwk.bind(this);
        const{wkprogress} = this.props; 
        this.state = {
            sasoprodstatus:[],
            cuslist:[],
            sasostatus:[],
            cus:["",""],
            cols:3,
            width:360,
            sonum:"",
            wkprogress:[],
        };
        refreshwkvar = setInterval(
            this.refreshwk
            ,10*1000);
        this.allowkeypress = 1;
        this.keycode = ""
      }
      
     componentWillMount(){
         var so='';
         var cus='';
        //  this.bindkeyeventontab1();
        //  this.dataAjax = Http.getJSON2("ds/data/emcswkprogress/wkprogressgroup");
     } 

     componentDidUpdate(){
        console.log("componentDidUpdate...")
        // if(this.state.sasostatus)
        //     this.chartRender(this.state.sasostatus);
     }

     componentDidMount(){
        console.log("componentDidMount...")
        const width = document.documentElement.clientWidth-60;
        F2.Global.pixelRatio = window.devicePixelRatio;
        this.loadData();
     }

     
    loadData(){
        this.dataAjax = Http.getJSON2("ds/data/emcswkprogress/wkprogressgroup").done((result)=>{
            try{
                const{wkprogress} = result;
                this.setState({
                    // sasoprodstatus:sasoprodstatus,
                    // cuslist:cuslist,
                    // sasostatus:sasostatus,
                    // width:width,
                    wkprogress:wkprogress
                });
            }
            catch(err){
                console.error(err.message);
                console.error(err.stack);
            }
        }); 
    }

     componentWillUnmount() {
        // this.unbindkeyeventontab1();
        console.log("componentWillUnmount...")
        clearInterval(refreshwkvar);
      }

     bindkeyeventontab1(){
        $(document).keypress(this.onKeyPress);
        $(document).keyup(this.onKeyUp);
      }
    
      unbindkeyeventontab1(){
        $(document).unbind('keypress',this.onKeyPress);
        $(document).unbind('keyup',this.onKeyUp);
      }
    

     chartRender=(sasostatus)=>{
        console.log("chartrender...")
        this.ExpTrend(sasostatus);
    }

    refreshwk=()=>{
        this.loadData();
    }

    sofilter=(sv,v)=>{
        let rv=[];
        let svcondtion=false;
        if (!v || v.length==0)
            return;
        sv.map((i,i1) => {
                i.children.map((j,j1)=>{
                    j.children.map((k,k1)=>{
                      if (k.value==v){
                        svcondtion=true;
                        rv=[i.value,j.value,k.value];
                      }
                    });
                });
        });
        if (!svcondtion){
            rv=["","",""];
            alert('提示',"录入订单不在查询期内!");
        }
        else{
            this.onOk(rv);
        }
        
     }

    ExpTrend =(sasostatus)=>{
        // 配置yeardd刻度文字样式
        const label = {
            fill: '#979797',
            font: '12px san-serif',
            offset:2
        };
        // 设置屏幕像素比
        F2.Global.pixelRatio = window.devicePixelRatio;
        const chart = new F2.Chart({
            id: 'divtrend',
            pixelRatio: window.devicePixelRatio,
            padding: [ 20, 10, 30, 40],
            width:this.state.width,
            
        });
        const defs = {
              mm: {
              tickCount: 6,
              range: [ 0, 1 ]
            },
            rate: {
              sorate: 3,
              min: 0
            },
           // qty: {
           //     tickCount:10,
           //    min: 0
           //  },
        };
        chart.axis('mm', {
                label(text, index, total) {
                const cfg = label;
                // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
                if (index === 0) {
                    cfg.textAlign = 'start';
                }
                if (index > 0 && index === total - 1) {
                    cfg.textAlign = 'end';
                }
                return cfg;
                }
        });
         // 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
        chart.axis('sorate', {
                label: {
                fontSize: 14
                }
        });
        chart.axis('mm', {
            label: {
            fontSize: 14
            }
        });

   
        chart.source(sasostatus,defs);
        chart.area().position('mm*sorate')
        .shape('smooth')
        .style({
            opacity: 0.4,
        });
        chart.point().position('mm*sorate');
        chart.line().position('mm*sorate')
        .size(1)
        .shape('smooth');

       // chart.line().position('yeardd*qty')
       // .color('#5ed470')
       // .size(2)
       // .shape('smooth');
       // chart.point().position('yeardd*qty').color('#5ed470');

        // 水平方向的平铺动画
        chart.animate({ type: 'waveh' });
        chart.render();
    }
    
    onChange = (key) => {
        if(key){
           // Modal.alert(key.yeardd);
        }else{

        }
    }

    onKeyPress = (event) => {
        if (this.allowkeypress == 1) {
            if (event.which == 13){
                this.allowkeypress = 0;
                let barcode = this.keycode;
              
                if((!barcode || barcode.length==0) && this.barcodeInputItem1.inputRef.props.value
                    && this.barcodeInputItem1.inputRef.props.value.length > 0)
                    barcode = this.barcodeInputItem1.inputRef.props.value;
                   this.barcodeInputItem1.clearInput();
                this.keycode = "";
                this.sofilter(this.state.cuslist,barcode);
                setTimeout(() => {
                    this.allowkeypress = 1;
                }, 1000);
            }else{
                 this.keycode = this.keycode + (String.fromCharCode(event.which));
                }
        }
    }  

    onBlur = () => {
        if (this.allowkeypress == 1) {
                this.allowkeypress = 0;
                let barcode = this.keycode;
                if((!barcode || barcode.length==0) && this.barcodeInputItem1.inputRef.props.value
                    && this.barcodeInputItem1.inputRef.props.value.length > 0)
                    barcode = this.barcodeInputItem1.inputRef.props.value;
                   this.barcodeInputItem1.clearInput();
                this.keycode = "";
                this.sofilter(this.state.cuslist,barcode);
                setTimeout(() => {
                    this.allowkeypress = 1;
                }, 1000);
        }
    }  
    
    onKeyUp = (event) => {
        if (this.allowkeypress == 1) {
            if (event.which == 8){
                this.keycode = this.keycode.substring(0, this.keycode.length - 1);
            }
        }
    }

    onOk=(val)=>{
        tcus=val;
        this.dataAjax = Http.getJSON2("sasoprodstatus/getSaSoProdStatus",{"so":tcus[2],"cus":tcus[1]},this.onAjaxDone);
    }

    onAjaxDone=(result)=>{//提交成功
        const{sasoprodstatus,cuslist,sasostatus} = result;
        this.setState({
            sasoprodstatus:sasoprodstatus,
            cuslist:cuslist,
            sasostatus:sasostatus,
            cus:tcus,
            sonum:tcus[2],
        }); 
        tcus="";
    }

    //订单总数
    igetsocount=(val)=>{
      var i=0;
      val.forEach((icus) => {
        icus.children.forEach((iso) => {
            i=i+iso.children.length;
         });
        
      });
      return i;
    }

    detail=(bill)=>{
        let wolist={
                fontSize: '15px', color:"#1C00DA"
                }
        var reactmid = 0;
        let item = bill;
        if(item){ 
            return(
             <Accordion.Panel key ={'apm_'+ (reactmid++)} header={<div style={wolist} >生产进度</div>} className="pad">
            {
               item.prodstatus.map((dtl,idx)=>{ 
                return (
                     <div>
                       <WingBlank size="lg"> 
                        <Item key ={'aplit_'+ (reactmid++)} multipleLine style={{background:"rgba(221, 239, 227, 0.5)"}}>
                             <Brief >
                                  <div style={show_info}>
                                     {/* <div style={ext}> {dtl.protype+'  '+dtl.rkqty+'/'+dtl.moqty}</div> */}
                                     <div style={ext}> {dtl.protype}</div>
                                     <div style={progress}><Progress percent={dtl.wofinrate} position="normal" background='#d7d7d7'/></div>
                                     <div aria-hidden="true">{dtl.wofinrate}%</div>
                                   </div>
                              </Brief>
                        </Item>
                        </WingBlank>
                     </div>
                        )
                })
            }
            </Accordion.Panel>
        )}
    } 

    render() {
        let pnl;
        var reachid = 0;
        var woid = 0;
        let itemcss ={
            fontSize:"15px"
        }

         pnl = <div>
                {/* <WhiteSpace size="lg" />
                <WingBlank size="lg"> 
                <Card>
                    <Card.Body>
                        <div className="divlist" id="reserch" >
                            <WhiteSpace size="ld" />
                            <List style={{ backgroundColor: 'white'}} className="picker-list">
                              <div style={show_info} >
                                   <div style={{padding:'0 5px 0 0'}}>
                                        <Picker  
                                            data={this.state.cuslist} 
                                            itemStyle={{fontSize:'13px'}}
                                            cols={this.state.cols}
                                            value={this.state.cus}
                                            onOk={v => this.onOk(v)}
                                            onDismiss={() => this.onOk(["","",""])}
                                            title="订单"
                                            extra={<div style={{fontSize:'15px',padding:'0 5px'}}>选取订单</div>}
                                        >
                                        <List.Item></List.Item>
                                        </Picker>
                                    </div>

                                    <div > <InputItem
                                     clear
                                     placeholder="录入订单..."
                                     //value={this.state.sonum}
                                     ref={el => this.barcodeInputItem1 = el}
                                     style={{textAlign:'center',width:'100%'
                                       ,fontSize:15,color:'#686767'
                                       ,backgroundColor:'#ffffff' }}
                                      onBlur={() => {
                                        this.onBlur();
                                      }}
                                     onFocus={() => {
                                     }}
                                    /></div>
                               </div>
                           </List>
                           <WhiteSpace size="lg" />
                        </div>
                        <div>
                            <div>每月订单出货率(月)%</div>
                            <div >
                                <canvas id='divtrend'> 
                                </canvas>
                            </div>
                        </div>
                    </Card.Body>
                </Card>
                </WingBlank> */}

                <WingBlank size="lg">
                <WhiteSpace size="lg" />
                <div>
                <List  className="my-list">
                     {  
                        (this.state.wkprogress.length>0)?( 
                        <Item multipleLine>
                            <Brief style={itemcss}>
                               {<div style={so_info}>
                                   <div >{this.state.wkprogress[0].wkdate}</div>
                                   {/* <div style={{padding:'0 8px 0 0'}}>{this.state.cus[1]}</div> */}
                                   {/* <div> {this.state.sasoprodstatus[0].orderdt}</div> */}
                                </div>}
                            </Brief>
                        </Item>
                        ):""
                     }
                  </List>
                 { 
                    (this.state.wkprogress.length>0)?this.state.wkprogress.map((dth,idx)=>{
                      return (<div> 
                               <Item key ={'apli_'+ (reachid++)} multipleLine>
                                    {/* {<div style={show_info}><div style={{padding:'0 2px 0 0'}}> {dth.wonumber+'['+dth.proname+'/'+dth.devcode+']'}</div><div> {'('+dth.fqty+'/'+dth.qty+')'}</div></div>} */}
                                    <Brief style={itemcss}>
                                      {/* <div style={show_info}>
                                        <div style={progress}><Progress percent={dth.sofinrate} position="normal" /></div>
                                        <div aria-hidden="true">{dth.sofinrate}%</div>
                                      </div> */}
                                       {/* {<div style={so_info}>
                                            <div style={{padding:'0 8px 0 0'}}>{dth.wonumber}</div>
                                            <div style={{padding:'0 8px 0 0'}}>{dth.proname}</div>
                                            <div> {dth.devcode}</div>
                                       </div>} */}
                                       <WhiteSpace size="lg" />
                                        <div style={{ display: '-webkit-box', display: 'flex', padding:' 4px 0px 0px'}}>
                                            <div style={{ flexGrow:1 ,textAlign:'center'}}>
                                                    <div  style={{ fontSize:'12px',color:'#111E27' }}>{dth.wonumber}</div>
                                                    <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>生产工单</span></div>
                                                </div>
                                                <div  style={{ flexGrow:1,textAlign:'center' }}>
                                                    <div  style={{ fontSize:'12px',color:'#111E27' }}>{dth.proname}</div>
                                                    <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>生产制品</span></div>
                                                </div>
                                                <div style={{ flexGrow:1  ,textAlign:'center'}}>
                                                    <div  style={{ fontSize:'12px',color:'#111E27' }}>{dth.devcode}</div>
                                                    <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>设备</span></div>
                                                </div>
                                        </div>
                                        <WhiteSpace size="lg" />
                                        <div style={{ display: '-webkit-box', display: 'flex', padding:' 4px 0px 0px'}}>
                                            <div style={{ flexGrow:1 ,textAlign:'center'}}>
                                                    <div  style={{ fontSize:'12px',color:'#111E27' }}>{dth.qty}</div>
                                                    <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>安排数</span></div>
                                                </div>
                                                <div  style={{ flexGrow:1,textAlign:'center' }}>
                                                    <div  style={{ fontSize:'12px',color:'#111E27' }}>{dth.fqty?dth.fqty:'无'}</div>
                                                    <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>完工数</span></div>
                                                </div>
                                                <div style={{ flexGrow:1  ,textAlign:'center'}}>
                                                    <div  style={{ fontSize:'12px',color:'#111E27' }}>{dth.processname?dth.processname:'无'}</div>
                                                    <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>工序</span></div>
                                                </div>
                                        </div>
                                        <WhiteSpace size="lg" />

                                    </Brief>
                                   
                                    <Brief>
                                        <div>
                                        {/* <WingBlank size="lg">  */}
                                            {/* <Item key ={'aplit_'+ (reachid++)} multipleLine style={{background:"rgba(221, 239, 227, 0.5)"}}> */}
                                                {/* <Brief > */}
                                                    <div style={show_info}>
                                                        {/* <div style={ext}> {dth.processname}</div> */}
                                                        <div style={progress}><Progress percent={dth.wofinrate} position="normal" /></div>
                                                        <div aria-hidden="true" style={progress1}>{dth.wofinrate}%</div>
                                                    </div>
                                                {/* </Brief> */}
                                            {/* </Item> */}
                                            {/* </WingBlank> */}
                                        </div>
                                   </Brief>
                                </Item>
                                {/* <Accordion key ={'aph_'+ (woid++)} accordionclassName="my-accordion" > */}
                                   {/* { this.detail(dth) } */}
                                 {/* </Accordion>   */}
                            </div>
                            )
                    }):""
                }
                </div>
                <WhiteSpace size="lg" />
                </WingBlank> 
            </div>
   
        return ( 
            <div> 
                {pnl}
            </div> 
      );
      
  }
  
  
}