import React from 'react'
import 'antd-mobile/dist/antd-mobile.css';
import { SearchBar, Accordion, List, Card, WingBlank, WhiteSpace, Toast, NoticeBar, Icon } from 'antd-mobile';
import { CNavBar } from '../common/navbar';
import { BillCard } from '../common/billcard';
import { inoutData } from '../../data/stockdata';
import { Http } from '../../Utils/help'
import '../../less/stockin.less';
import { returnval } from '../../Utils/function';
import { EINVAL } from 'constants';

const Item = List.Item;
const Brief = Item.Brief;

export default class RecedeShow extends React.Component {

    constructor(props) {
        super(props);
        //this.onClick = this.onClick.bind(this);
        const { func } = this.props.location.state;
        this.state = {
            data: [],
            func: func,
            funccode: func.FuncCode,
            outtype: returnval.getouttype(func.Items.funcparamsvo),
            sourcedata: [],
        }
    }

    //取得json数据
    componentWillMount() {
        console.log("componentWillMount----");
        this.dataAjax = Http.getJSON2("ds/data/recede/recedeshow");
    }


    componentDidMount() {
        console.log("componentDidMount---");

        this.dataAjax.done((result) => {
            console.log(result);
            
            try {
                this.setState({
                    data: this.packageing(result["recedeshowinfo"], "data"),
                    sourcedata: this.packageing(result["recedeshowinfo"], "sourcedata"),
                });
            }
            catch (err) {
                console.error(err.message);
                console.error(err.stack);
            }
        });
    }


    componentDidUpdate() {
        console.log("componentDidUpdate...");
        //console.log(this.state.data);
    }

    onChange = (key) => {
        console.log(key);
    }

    //Header
    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;
    }
    //detail
    Detail = (obj, key) => {
        var keys = key.split(',');
        var val = "";
        var lgh = keys.length;
        //console.log(obj);

        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(')');
                }
                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 + ')';
            }
        });
        //console.log(val);
        return val;
    }
    //Search
    onSearch = (key) => {
        key = key.toUpperCase();
        this.setState({ notice: undefined });
        this.seach.doClear();

        console.log(typeof (this.state.data));
        console.log(this.state.data);

        let fdata = this.state.sourcedata.filter((element, index, array) => {
            let has = false;
            element.detail.map((i, j) => {
                if (i.recedeno.indexOf(key) >= 0) {
                    has = true;
                    return;
                }
            })
            return has;
        });
        console.log(fdata);
        if (fdata && fdata.length > 0) {
            this.setState({
                data: fdata,
            });
        }
        else {
            this.setState({
                notice: '余料单[' + key + ']不在列表中.'
            });
        }
        // let vdate;
        this.seach.focus();
    }

    //重新封装json
    packageing = (val, info) => {

        //console.log(val);
        console.log("packageing-----------" + info);

        var vdate = "";
        var vdate1 = "";
        if (val) {
            //console.log("if(val)"+val.length);
            try {
                var recedenostr = "";
                for (let i = 0; i < val.length; i++) {
                    if (val[i].recedeno == recedenostr) {
                        //console.log(val[i].recedeno);
                        vdate1 = vdate1.substring(0, vdate1.length - 4) +
                            ',{"recedeno":"' + val[i].recedeno +
                            '","empname":"' + val[i].empname +
                            '","mkerdate":"' + val[i].mkerdate +
                            '","dptname":"' + val[i].dptname +
                            '","mname":"' + val[i].mname +
                            '","qty":"' + val[i].qty +
                            '","kcoutqty":"' + val[i].kcoutqty + '"}] },';

                    } else {
                        recedenostr = val[i].recedeno;

                        vdate1 = vdate1 +
                            '{ "recedeno" : "' + val[i].recedeno +
                            '","empname" : "' + val[i].empname +
                            '","mkerdate":"' + val[i].mkerdate +
                            '","dptname":"' + val[i].dptname +
                            '","mname":"' + val[i].mname +
                            '","qty":"' + val[i].qty +
                            '","kcoutqty":"' + val[i].kcoutqty +
                            '","detail":[{"recedeno":"' + val[i].recedeno +
                            '","empname":"' + val[i].empname +
                            '","mkerdate":"' + val[i].mkerdate +
                            '","dptname":"' + val[i].dptname +
                            '","mname":"' + val[i].mname +
                            '","qty":"' + val[i].qty +
                            '","kcoutqty":"' + val[i].kcoutqty + '"}] },';
                    }
                    //console.log(vdate1);
                }
                //console.log(vdate1 = "[" + vdate1.substring(0, vdate1.length - 1) + "]");
                vdate1 = "[" + vdate1.substring(0, vdate1.length - 1) + "]"
                vdate1 = JSON.parse(vdate1);
            } catch (error) {
                console.error(error.message);
            }

            // try {
            //     for (var i = 0; i < val.length; i++) {
            //         //console.log(val[i].recedeno + "," + val[i].mkerdate + "," + val[i].mname)
            //         vdate = vdate +
            //             '{ "recedeno" : "' + val[i].recedeno +
            //             '","empname" : "' + val[i].empname +
            //             '","mkerdate":"' + val[i].mkerdate +
            //             '","dptname":"' + val[i].dptname +
            //             '","detail":[{"recedeno":"' + val[i].recedeno +
            //             '","empname":"' + val[i].empname +
            //             '","mkerdate":"' + val[i].mkerdate +
            //             '","dptname":"' + val[i].dptname +
            //             '","mname":"' + val[i].mname +
            //             '","qty":"' + val[i].qty +
            //             '","kcoutqty":"' + val[i].kcoutqty +
            //             '","detail2":[{"recedeno":"' + val[i].recedeno +
            //             '","empname":"' + val[i].empname +
            //             '","mkerdate":"' + val[i].mkerdate +
            //             '","dptname":"' + val[i].dptname +
            //             '","mname":"' + val[i].mname +
            //             '","qty":"' + val[i].qty +
            //             '","kcoutqty":"' + val[i].kcoutqty + '"}]}] },';
            //     }
            //     try {
            //         if (vdate != null) {
            //             vdate = "[" + vdate.substring(0, vdate.length - 1) + "]";
            //             //console.log(vdate);
            //             //console.log(JSON.parse(vdate));
            //             vdate = JSON.parse(vdate);
            //         }
            //     } catch (error) {
            //         console.error(error.message);
            //     }
            // } catch (error) {
            //     console.error(error.message);
            // }
        }
        return vdate1;
    }

    render() {
        console.log("render--");
        //this.TestJson();
        //this.packageing(this.state.data);
        const billinfo = {
            hh_title: "recedeno,empname,mkerdate,dptname"// header
            , m_detail: "mname,qty,kcoutqty"    //list.item
        };

        var comment = {
            fontSize: '14px', color: '#df1121'
        }

        var reachid = 0 ;

        return (
            <div>

                {this.state.notice?<NoticeBar mode="closable" icon={<Icon type="cross-circle-o" size="xxs"/>}>{this.state.notice}</NoticeBar>:""}
                <SearchBar ref={el => this.seach = el} placeholder="Search" onSubmit={this.onSearch} autoFocus />

                <Accordion accordion className="my-accordion" >{
                    this.state.data.map((dth, idx) => {
                        //将数据集data重新封装成dth
                        let dth_l = dth.detail;
                        //console.log(dth_l);
                        if (!dth_l) {
                            for (var key in dth.Items) {
                                if (dth.Items[key]) {
                                    dth_l = dth.Items[key];
                                    break;
                                }
                            }
                        }
                        
                        return(
                            <Accordion.Panel key ={dth["recedeno"]} header={this.GetVal(dth, billinfo.hh_title)}>
                                {
                                    dth_l.map((k, v) => {
                                        //console.log(k)
                                        return (
                                            <div>
                                                <List className="my-list">
                                                    <List.Item style={{ background: "#bfd6ed" }}>
                                                        <div style={comment}>{this.Detail(k, billinfo.m_detail)}</div>
                                                    </List.Item>
                                                </List>
                                            </div>
                                        );
                                    })
                                }
                            </Accordion.Panel>
                        )
                    })
                }
                </Accordion>
            </div>
        );
    }


    //测试json
    TestJson() {
        var datai =
            [{
                "recedeno": 1,
                "empname": 1,
                "mkerdate": 1,
                "dptname": 1,
                "mname": 1,
                "qty": 1,
                "kcoutqty": 1,
                "detail": [{
                    "recedeno": 12,
                    "empname": 12,
                    "mkerdate": 12,
                    "dptname": 12,
                    "mname": 12,
                    "qty": 12,
                    "kcoutqty": 12
                }]
            }, {
                "recedeno": 2,
                "empname": 2,
                "mkerdate": 2,
                "dptname": 2,
                "mname": 2,
                "qty": 2,
                "kcoutqty": 2,
                "delail": [{
                    "recedeno": 22,
                    "empname": 22,
                    "mkerdate": 22,
                    "dptname": 22,
                    "mname": 22,
                    "qty": 22,
                    "kcoutqty": 22
                }]
            }]
            ;
        // var json1 = eval('(' + datai + ')');
        console.log((datai));

        var E = '[{ "a" : 1 , "b" : "hello" }]';
        console.log(JSON.parse(E));

    }
}