import React from 'react';  
import 'antd-mobile/dist/antd-mobile.css'; 
import {ActionSheet,NavBar,Icon,Accordion, List,Card, WingBlank, WhiteSpace,Badge,Button,Popover } from 'antd-mobile';
import {returnval} from '../../Utils/function';
import '../../less/list.less';

const Item = List.Item;
const Brief = Item.Brief;
const PopoverItem = Popover.Item;
const myImg = src => <img src={`https://gw.alipayobjects.com/zos/rmsportal/${src}.svg`} className="am-icon am-icon-xs" alt="" />;

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'
    ,dd_key:'id'
    ,dd_title:'title'
    ,dd_extra:'extra'
    ,dd_subtitle:'subtitle'
    ,f_content:"content"
    ,f_extra:"extra"};

let delItem;
export class BillScan extends React.Component {
    
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onDeleted = this.onDeleted.bind(this);
        this.showActionSheet = this.showActionSheet.bind(this);
        this.detail = this.detail.bind(this);
        const { data,billseting } = this.props ;
        billinfo = $.extend(billinfo,billseting);
        this.state = {
            data:data,
            visible: false,
            selected: '',
        };
    }

    onSelect = (opt) => {
        // console.log(opt.props.value);
        this.setState({
          visible: false,
          selected: opt.props.value,
        });
      };

    handleVisibleChange = (visible) => {
        this.setState({
          visible,
        });
      };

    onChange = (key,prop,val,outno) => {
        if(key){
            this.showActionSheet(key);
        }else{

        }
    }

    showActionSheet = (obj) => {
        const BUTTONS = ['删除','取消'];
        delItem = obj;
        ActionSheet.showActionSheetWithOptions({
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,  
        destructiveButtonIndex: 0,
        title:obj.did, 
        maskClosable: true,
        },
        this.onDeleted);
    }

    onDeleted=(buttonIndex)=>{
        if(buttonIndex==0){
            const{onDelete} = this.props;
            if(onDelete)
            onDelete(delItem);
        }
        this.setState({ clicked: buttonIndex }); 
    }

    componentWillReceiveProps(props){ 
        const { data,billseting } = props ;
        billinfo = $.extend(billinfo,billseting);
        this.setState({
            data:data,
        });
    }
    
    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;
    }
 
    getstatus =(obj,key1,key2)=>{
      return  this.GetVal(obj,key1)-this.GetVal(obj,key2)>=0?"完成":"未";
    }

    getoutno=(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:'14px',}}
      /></div>)
      else 
        return("") 
    }

    getdd=()=>{
        return(<div>

            <Popover 
              overlayClassName="fortest"
              overlayStyle={{ color: 'currentColor' }}
              visible={this.state.visible}
              overlay={[
                (<PopoverItem key="4" value="scan"  data-seed="logId">Scan</PopoverItem>),
                (<PopoverItem key="5" value="special"  style={{ whiteSpace: 'nowrap' }}>My Qrcode</PopoverItem>),
                (<PopoverItem key="6" value="button ct" >
                  <span style={{ marginRight: 5 }}>Help</span>
                </PopoverItem>),
              ]}
              align={{
                overflow: { adjustY: 2, adjustX: 2 },
                offset: [5, 0],
              }}
              onVisibleChange={this.handleVisibleChange}
              onSelect={this.onSelect}
            >
              <div style={{
                height: '100%',
                padding: '0 15px',
                marginRight: '-15px',
                display: 'flex',
                alignItems: 'center',
              }}
              >
                <Icon type="ellipsis" />
              </div>
            </Popover>
      </div>)
    }
   
    detail=(bill)=>{
        let itemcss ={
                overflow: "hidden",
                background: "#F9FAEF",
                fontSize: '15px',
                color: '#949896',
            }
        let kcitemcss ={
                overflow: "hidden",
                background: "#a9e6b0",
            }
        var titlegr={
            fontSize: '18px', color: '#000000',flexGrow:1
            }
        var title={
            fontSize: '18px', color: '#949896' ,padding:'0 0 10px 0'
            }
        var comment={
            fontSize: '16px', color: '#949896'
            }
        var ext={
            fontSize: '16px', color:"#1C00DA"
            }
        var reactmid = 0;
        var reactmdid = 0;
        var reactdid = 0;
        var reactid = 0;
        let item = bill.Detail;
        if(!item)
            item = bill.detail; 
        if(!item){
            for( var key in dt.Items){
                if(dt.Items[key]){
                    item = dt.Items[key];
                    break;
                }
            }
        } 
        if(item){
            return (item.map((dtl,idx)=>{ 
                return (
                <Accordion.Panel key ={'ap_'+ (reactid++)}  header={<div>{this.GetVal(dtl,billinfo.d_title)} <Badge text={this.getstatus(dtl,billinfo.d_curselqty,billinfo.d_curunfqty)} hot style={{ marginLeft: 10 }}/></div>}  className="pad">
                    <WingBlank>
                    <Accordion accordion className="my-accordion" >
                        <Accordion.Panel key ={'apm_'+ (reactmid++)} header={"存货："+this.GetVal(dtl,billinfo.d_extra)} className="pad">
                           { 
                            dtl.Storelist.map((dtv,didx)=>{ 
                                        return (
                                            <Card full style={{background:"rgba(221, 239, 227, 0.2)"}} >
                                            <Card.Header
                                                title={<div style={{ display: '-webkit-box', display: 'flex',alignItems:'left'}}>{''}<div style={{color: '#FF6E27', fontSize:18,flexGrow:1 }}>{this.GetVal(dtv,billinfo.st_title)}</div></div>}
                                                //extra={this.getdd()}
                                            />
                                            <Card.Body>
                                                <div>
                                                  <div style={{ display: '-webkit-box', display: 'flex'}}>
                                                    <div style={titlegr}>
                                                        <div style={title}>
                                                            <span style={comment}>仓库：</span>{this.GetVal(dtv,billinfo.st_store)}
                                                        </div>
                                                        <div style={title}>
                                                            <span style={comment}>库存：</span>{this.GetVal(dtv,billinfo.st_mnum)}
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <div style={title} >
                                                            <span style={comment}>批号：</span>{this.GetVal(dtv,billinfo.st_extra)}
                                                        </div> 
                                                        <div style={title}>
                                                            <span style={comment}>可用数：</span>{this.GetVal(dtv,billinfo.st_subtitle)}
                                                        </div>
                                                    </div>
                                                  </div>
                                                  <div style={{ display: '-webkit-box', display: 'flex', padding: '1px',
                                                        borderTop: '1px solid #F6F6F6',alignItems:'center',fontSize:'16px' }}>
                                                        <div style={ext}>
                                                           <span style={comment}>讯息：</span>
                                                        </div>
                                                        <div style={ext}>
                                                            {this.GetVal(dtv,billinfo.st_storen)}
                                                        </div>
                                                    </div>
                                                </div>
                                            </Card.Body>
                                           </Card>)
                                    })
                            }
                        </Accordion.Panel>
                    </Accordion>
                    </WingBlank>
                    <List className="my-list">
                        {
                            dtl.Batchcode.map((dtv,didx)=>{ 
                                return (
                                <Item style={itemcss} key ={'apli_'+ (reactdid++)} multipleLine extra={<div style={itemcss}> {this.GetVal(dtv,billinfo.dd_extra)}</div>} onClick ={()=>{this.onChange({"bill":this.GetVal(dtl,billinfo.h_key),"id":this.GetVal(dtl,billinfo.d_key),"did":this.GetVal(dtv,billinfo.dd_key),"outno":this.GetVal(dtv,billinfo.h_outno)})}}>
                                    {<div style={itemcss} >{this.GetVal(dtv,billinfo.dd_title)}</div>}
                                    <Brief>
                                        {this.GetVal(dtv,billinfo.dd_storen)}
                                    </Brief>
                                </Item>)
                            })
                        }
                    </List>
                </Accordion.Panel>
                )
            }));
        }
    }
    render() {
        let pnl;
        let that = this;
        var reachid = 0;
        if(this.state.data){
            pnl = <div>{ 
                        that.state.data.map((dth,idx)=>{
                         let dth_l = dth.Stockout;
                         return (
                                    dth_l.map((dt,idx)=>{
                                    return (
                                        <div>
                                            {/* <Card full style={{background:"#a4e2ea" }}>
                                                <Card.Header
                                                    title={this.GetVal(dt,billinfo.h_title)}
                                                    extra={<span>{this.GetVal(dt,billinfo.h_extra)}</span>}
                                                    
                                                />
                                                <Card.Body> <div>{this.getoutno(dt,billinfo.h_outno)}</div> </Card.Body>
                                            </Card> */}
                                            <div>
                                                    <List  className="my-list">
                                                        {  
                                                            <Item style={{background:"#a4e2ea" }}>
                                                                <Brief>{<div style={{ display: '-webkit-box', display: 'flex'}}>
                                                                   <div style={{color: '#000000', fontSize:16}}>
                                                                       <span> {this.GetVal(dt,billinfo.h_title)}</span>
                                                                    </div>
                                                                    <div style={{color: '#000000', fontSize:15,padding:'0 5px 0 50px'}}>
                                                                       <span>{this.GetVal(dt,billinfo.h_extra)}</span>
                                                                    </div>
                                                                  </div>}
                                                                  <div>{this.getoutno(dt,billinfo.h_outno)}</div> 
                                                                  </Brief>
                                                            </Item>
                                                        }
                                                    </List>
                                            </div>
                                            <Accordion key ={'aph_'+ (reachid++)} accordionclassName="my-accordion" >
                                                { 
                                                    that.detail(dt)
                                                }
                                            </Accordion>  
                                        </div>
                                     )
                                  })
                                )
                        })
                    }    
                </div>
        }else{
            pnl =<div>没有数据</div>
        }

        return ( 
            <div> 
                {pnl}
            </div> 
      );
  }
}