import React from 'react'  
import 'antd-mobile/dist/antd-mobile.css'; 
import {ActionSheet,  Accordion, List,Card, WingBlank, WhiteSpace,Badge,Flex } from 'antd-mobile';
import $ from 'jquery';
import '../../less/list.less';

const Item = List.Item;
const Brief = Item.Brief;
//组合字段用","分隔，固定内容用"()"包括
let billinfo ={h_title:'billcode,title'
    ,h_key:'billcode'
    ,h_extra:'extra'
    ,h_subtitle:'subtitle'
    ,d_key:'id'
    ,d_title:'title'
    ,d_extra:'extra'
    ,d_subtitle:'subtitle'
    ,f_content:"content"
    ,f_extra:"extra"};

export class BillCard extends React.Component {
    
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.showActionSheet = this.showActionSheet.bind(this);

        const { data,billseting } = this.props ;
        billinfo = $.extend(billinfo,billseting);
        this.state = {
            data:data,
        };
    }
    componentWillReceiveProps(props){ 
        const { data,billseting } = props ;
        billinfo = $.extend(billinfo,billseting);
        this.setState({
            data:data,
        });
    }
    onChange = (key,key1) => {
        if(key){
            const{onClick} = this.props;
            //this.showActionSheet();
            onClick(key,key1);
        }else{

        }
    }
    getbadge=(obj,key1)=>{
        if (this.GetVal(obj,key1))
        return(
        <div><Badge text={this.GetVal(obj,key1)}
        style={ {//marginLeft: 0,
           // padding: '0 1px',
            backgroundColor: '#fff',
            borderRadius: 2,
            color: '#f19736',
            border: '1px solid #f19736',
            fontSize:'10px',}}
      /></div>)
      else 
        return("") 
    }
    GetVal =(obj,key)=>{
        if("undefined"==typeof(obj)) return "";
        var keys = key.split(','); 
        var i =0;
        var val ="";
        var lgh = keys.length;

        keys.map((k,idx)=>{
            var f = k.split('(');
            if("undefined"!=typeof(obj[f[0]])){   
                let fix='';
                if(f[1] && f[1]!="undefined"){
                    fix =  f[1].split(')')[0];
                }
                if(idx==0){
                    val = obj[f[0]] +fix ;
                }else if(idx==1){
                    val = val + '('+ obj[f[0]] +fix;
                }else {
                    val = val + ' - ' + obj[f[0]] +fix;
                }
                if(lgh >1 && lgh == (idx+1))
                    val = val + ')';
            }
        });
        return val;
    }
    showActionSheet = () => {
        const BUTTONS = ['开始入库','取消'];
        ActionSheet.showActionSheetWithOptions({
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,   
        maskClosable: true,
        },
        (buttonIndex) => {
            this.setState({ clicked: BUTTONS[buttonIndex] });
        });
    }
    render() {
        let itemcss ={
                overflow: "hidden",
                background: "#F9FAEF",
            }
            var titlegr={
                fontSize: '18px', color: '#000000',flexGrow:1
                }
            var title={
                fontSize: '18px', color: '#000000' ,padding:'0 0 10px 0'
                }
            var comment={
                fontSize: '14px', color: '#949896'
                }
            var comment1={
                    fontSize: '15px', color: '#000000',padding:'0 5px'
                    }
        var reachid = 0 ;
        var reactid = 0;
        var reactdid = 0;
        return(
            <Accordion accordion className="my-accordion" >
               {
                 this.state.data.map((dth,idx)=>{
                                        let dth_l = dth.Stockout; 
                                        if(!dth_l){
                                            for( var key in dth.Items){
                                                if(dth.Items[key]){
                                                    dth_l = dth.Items[key];
                                                    break;
                                                }
                                            }
                                        } 
                  return (
                    <Accordion.Panel key ={'aph_'+ (reachid++)} header={<div>{this.GetVal(dth,billinfo.hh_title)} <Badge text={dth.Stockout.length>5?dth.Stockout.length:0} overflowCount={5}/></div>}  className="pad">
                              <WingBlank>
                               <Accordion accordion className="my-accordion">
                                  {
                                    dth_l.map((dt,idx)=>{
                                         let dtl = dt.Detail; 
                                        if(!dtl){
                                            for( var key in dt.Items){
                                                if(dt.Items[key]){
                                                    dtl = dt.Items[key];
                                                    break;
                                                }
                                            }
                                        } 
                                        return (
                                        <Accordion.Panel key ={'ap_'+ (reactid++)} header={this.GetVal(dt,billinfo.h_title)} className="pad">
                                        {
                                            dtl.map((dtv,didx)=>{ 
                                                return (
                                                    <div>
                                                    <List  className="my-list"  onClick ={()=>{this.onChange(this.GetVal(dt,billinfo.h_key),this.GetVal(dtv,billinfo.d_key))}}>
                                                        {  
                                                            <Item style={{background:"#eeeef3" }}>
                                                                <Brief style={comment}>{<div style={{ display: '-webkit-box', display: 'flex'}}>
                                                                   <div style={{color: '#FF6E27', fontSize:18}}>
                                                                       <span> {this.GetVal(dtv,billinfo.d_title)}</span>
                                                                    </div>
                                                                    <div style={{color: '#FF6E27', fontSize:16}}>
                                                                       <span> {this.getbadge(dtv,billinfo.coptypeno)}</span>
                                                                    </div>
                                                                  </div>}
                                                                  <div style={{display: 'flex'}}>
                                                                        <div style={comment}>需求/已发/剩余: </div><div style={comment1}>{this.GetVal(dtv,billinfo.d_unfqty)+'/'+this.GetVal(dtv,billinfo.d_curselqty)+'/'+this.GetVal(dtv,billinfo.d_extra)}</div>
                                                                  </div>
                                                                  </Brief>
                                                            </Item>
                                                        }
                                                    </List>
                                                    </div>)
                                                    
                                                    {/* <Card style={{background:"#eeeef3" }} onClick ={()=>{this.onChange(this.GetVal(dt,billinfo.h_key),this.GetVal(dtv,billinfo.d_key))}}>
                                                        <Card.Header
                                                            title={<div style={{ display: '-webkit-box', display: 'flex'}}>
                                                                   <div style={{color: '#FF6E27', fontSize:18}}>
                                                                   <span> {this.GetVal(dtv,billinfo.d_title)}</span>
                                                                    </div>
                                                                    <div style={{color: '#FF6E27', fontSize:16}}>
                                                                    <span> {this.getbadge(dtv,billinfo.coptypeno)}</span>
                                                                    </div>
                                                                  </div>}
                                                        /> */}
                                                        {/* <Card.Body >
                                                            <div style={{ display: '-webkit-box', display: 'flex'}}>
                                                               <div style={titlegr}>
                                                                    <div style={{display: 'flex'}}>
                                                                        <div style={comment}>需求/已发/剩余：</div><div style={comment}>{this.GetVal(dtv,billinfo.d_unfqty)+'/'+this.GetVal(dtv,billinfo.d_curselqty)+'/'+this.GetVal(dtv,billinfo.d_extra)}</div>
                                                                    </div>
                                                                </div> */}
                                                                {/* <div style={titlegr}>
                                                                    <div style={title}>
                                                                        <span style={comment}>需求：</span>{this.GetVal(dtv,billinfo.d_unfqty)}
                                                                    </div>
                                                                    <div style={title}>
                                                                        <span style={comment}>剩余：</span>{this.GetVal(dtv,billinfo.d_extra)}
                                                                    </div>
                                                                   
                                                                </div>
                                                                <div>
                                                                    <div style={title} >
                                                                        <span style={comment}>已发：</span>{this.GetVal(dtv,billinfo.d_curselqty)}
                                                                    </div> 
                                                                    <div style={title}>
                                                                    </div>
                                                                </div> */}
                                                            {/* </div>
                                                        </Card.Body> */}
                                                    {/* </Card>  */}
                                                   {/* ) */}
                                            })
                                        }
                                        </Accordion.Panel>
                                        )
                                    })      
                                  }
                                </Accordion>
                                </WingBlank>
                     </Accordion.Panel>
                    )
                 })
                }
             </Accordion> 
        );
  }
}