import React from 'react';
import ReactDOM from 'react-dom';
import 'antd-mobile/dist/antd-mobile.css';
import { Card, WingBlank, WhiteSpace, List, Button, Picker, Grid } from 'antd-mobile';
import { Http } from '../../Utils/help';
import F2GaugeH from '../../f2/gauge100';
import Format from '../../Utils/NumericFormat';
import './less/list.less';

const F2 = require('@antv/f2');
const Item = List.Item;
var tcus = [];
var refreshvar;

export default class macstate extends React.Component {
    constructor(props) {
        super(props);
        const { func, maclist, curmac, mstate, macstatus,workshopid,devtypeid } = this.props.location.state;
        this.refreshmac = this.refreshmac.bind(this);
        this.loadData_t = this.loadData_t.bind(this);
        this.makeData = this.makeData.bind(this);
        this.devFilter = this.devFilter.bind(this);
        this.pavFilter = this.pavFilter.bind(this);
        this.paraFilter = this.paraFilter.bind(this);
        //this.chartRender = this.chartRender.bind(this);
        this.state = {
            workshopid:workshopid,
            devtypeid:devtypeid,
            func: func,
            maclist: maclist,
            curmac: curmac,
            mstate: mstate,
            macstatus: macstatus,
            picklist: [],
            picklist_u: [],
            macstatus_f: [],
            macstatus_para: [],
            mac: ["", ""],
            cols: 2,
            gddata: { "fun": [], "data": [] },
            gddata_use: { "fun": [], "data": [] },
        };
        refreshvar = setInterval(
            this.refreshmac
            , 20 * 1000);
    }

    componentWillReceiveProps(nextProps) {
        const { maclist, curmac, mstate, macstatus } = nextProps;
        this.setState({
            maclist: maclist,
            curmac: curmac,
            mstate: mstate,
            macstatus: macstatus,
        });
    }
    componentWillUnmount() {
        console.log("componentWillUnmount...")
        clearInterval(refreshvar);
    }
    componentDidUpdate() {
        console.log("componentDidUpdate...")
    }
    componentDidMount() {
        console.log("componentDidMount...")
        this.loadData_t("N/A");
    }

    refreshmac = () => {
        this.loadData_t(this.state.mac ? this.state.mac[1] : "")
    }

    makeData = (funcs) => {
        if (!funcs || !Array.isArray(funcs)) {
            return;
        }

        let func = {};
        let func_use = {};
        funcs.map((data, index) => {
            let nd = {};
            let imgp;
            imgp = data.inused == '3' ? 'red1.png' : data.inused != '0' ? (data.inused == '1' ? 'green1.png' : 'h3.png') : 'h2.png';
            nd["icon"] = require('../../images/' + imgp);
            nd["text"] = data.macnum
            nd["inused"] = data.inused
            if (!func.fun)
                func = { "fun": [], "data": [] };
            if (!func_use.fun)
                func_use = { "fun": [], "data": [] };
            func.fun[func.fun.length] = data;
            func.data[func.data.length] = nd;
            if (data.inused == '1') {
                func_use.fun[func_use.fun.length] = data;
                func_use.data[func_use.data.length] = nd;
            }

        });
        this.setState({
            gddata: func,
            gddata_use: func_use,
        });
    }

    onOk = (val) => {
        tcus = val.length == 1 ? [val[0], val[0]] : val;
        if (tcus.length == 0) {
            return;
        }
        this.setState({
            mac: tcus,
        });
        this.dataAjax = Http.getJSON2("ds/data/macstatus/macstatusmerge", { "macnum": tcus[1] }, this.onAjaxDone);
    }

    onAjaxDone = (result) => {//提交成功
        try {
            const { maclist, curmac, mstate, macstatus } = result
            this.setState({
                maclist: maclist,
                curmac: curmac,
                mstate: mstate,
                macstatus: macstatus,
                macstatus_f: this.devFilter(mstate, tcus[1]),
                macstatus_para: this.pavFilter(this.devFilter(mstate, tcus[1])),
                picklist: this.macfilter(maclist, 0),
                picklist_u: this.macfilter(maclist, 1),
                mac: tcus,
            });
            this.makeData(maclist);
            tcus = [];
        }
        catch (err) {
            console.error(err.message);
            console.error(err.stack);
        }
    }

    loadData_t(macnum) {
        console.log("loadData_t")
        this.dataAjax = Http.getJSON2("ds/data/macstatus/macstatusmerge", { "macnum": macnum,"workshopid":this.state.workshopid,"typeid":this.state.devtypeid }).done((result) => {
            try {
                console.log(result)
                const { maclist, curmac, mstate, macstatus } = result;
                this.setState({
                    maclist: maclist,
                    curmac: curmac,
                    mstate: mstate,
                    macstatus: macstatus,
                    macstatus_f: this.devFilter(mstate, macnum),
                    macstatus_para: this.pavFilter(this.devFilter(mstate, macnum)),
                    picklist: this.macfilter(maclist, 0),
                    picklist_u: this.macfilter(maclist, 1),
                });
                this.makeData(maclist);
            } catch (err) {
                console.error(err.message);
                console.error(err.stack);
            }
        });
    }

    onGridClick = (el, index) => {
        // alert(index);
        this.onOk([this.state.gddata.fun[index].macnum]);

    }
    //选出指定参数pv的数据
    paraFilter = (datalist, para) => {
        var data = datalist;
        if (data.length > 0)
            data = data.filter((element, index, array) => {
                return element.fn == para;
            })
        data = data.length > 0 ? data : [{ "fn": "", "fv": "" }]
        console.log(data)
        return data;
    }

    //显示所有动态变量
    detail = (bill) => {
        let item = bill;
        // console.log(item)
        if (item) {
            return (
                item.map((dtl, idx) => {
                    if (idx % 3 == 0){
                        return (
                            <div key={idx}>
                                <WhiteSpace size="lg" />
                                <div style={{ display: '-webkit-box', display: 'flex', padding: ' 4px 0px 0px' }}>
                                    <div style={{ width:"33%" }}>
                                        <div style={{ fontSize: '20px', color: '#111E27',textAlign:"center" }}>
                                            {/* {item.length > idx ? Format.FormatUtil(item[idx].fv, 2) : 0.00} */}
                                            <font>
                                                {item.length > idx ? typeof (item[idx].fv) === 'string' ? item[idx].fv === "" ? '无' : item[idx].fv : Format.FormatUtil(item[idx].fv, 2) : 0.0}
                                            </font>
                                            <font size="1" color="#8B8B7A"  style={{ float: "center" }}>{item.length > idx ? (item[idx].id != null && item[idx].standard != null) ? " " + item[idx].standard : "" : ""}</font>
                                        </div>
                                        <div style={{textAlign:'center'}}><span style={{ fontSize: '8px', borderTop: '1px solid #ddd' }}>
                                        {/* {item.length > idx ? item[idx].fname : "n/a"} */}
                                            <font color="#0000FF">{item.length > idx ? item[idx].fname : "n/a"}</font>
                                        </span></div>
                                    </div>
                                    <div style={{ width:"33%"}}>
                                        <div style={{ fontSize: '20px', color: '#111E27',textAlign:"center" }}>
                                        {/* {item.length > idx + 1 ? Format.FormatUtil(item[idx + 1].fv, 2) : 0.00} */}
                                            <font>
                                            {item.length > idx + 1 ?typeof(item[idx+1].fv)==='string'?item[idx+1].fv===""?'无':item[idx+1].fv: Format.FormatUtil(item[idx + 1].fv, 2) : 0.00}
                                            </font>
                                            <font size="1" color="#8B8B7A"  style={{float:"center"}}>{item.length > idx+1 ?(item[idx+1].id!=null && item[idx+1].standard!=null)?" "+ item[idx+1].standard:"":""}</font>
                                        </div>
                                        <div style={{textAlign:'center'}}><span style={{ fontSize: '8px', borderTop: '1px solid #ddd' }}>
                                            <font color="#0000FF">{item.length > idx + 1 ? item[idx + 1].fname : "n/a"}</font>
                                        </span></div>
                                    </div>
                                    <div style={{  width:"33%"}}>
                                        <div style={{ fontSize: '20px', color: '#111E27',textAlign:"center" }}>
                                            {/* {item.length > idx + 2 ? Format.FormatUtil(item[idx + 2].fv, 2) : 0.00} */}
                                            <font>
                                            {item.length > idx + 2 ?typeof(item[idx+2].fv)==='string'?item[idx+2].fv===""?'无':item[idx+2].fv: Format.FormatUtil(item[idx + 2].fv, 2) : 0.00}
                                            </font>
                                            <font size="1" color="#8B8B7A"  style={{float:"center"}}>{item.length > idx+2 ?(item[idx+2].id!=null && item[idx+2].standard!=null)?" "+ item[idx+2].standard:"":""}</font>
                                        </div>
                                        <div style={{textAlign:'center'}}><span style={{ fontSize: '8px', borderTop: '1px solid #ddd' }}>
                                            <font color="#0000FF">{item.length > idx + 2 ? item[idx + 2].fname : "n/a"}</font>
                                        </span></div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                })
            )
        }
    }

    //选出机台所有需动态显示参数
    pavFilter = (datalist) => {
        var data = datalist;
        if (data && data.length > 0)
            data = data.filter((element, index, array) => {
                return element.fname !==null;
            })
        data = (data && data.length) ? data : []
        console.log(data)
        return data;
    }

    //选出指定机台dev的各项参数
    devFilter = (datalist, dev) => {
        console.log(datalist)
        var data = datalist;
        if (data && data.length > 0)
            data = data.filter((element, index, array) => {
                return element.devcode == dev;
            })
        // console.log(data);
        // console.log(this.pavFilter(data));
        return data;
    }

    macfilter = (sv, type) => {
        let rv = [];
        let rvcondtion = false;
        let cvcondtion = false;
        let rvc = 0;
        let cvc = 0;

        if (JSON.stringify(sv)==='{}')
            return rv;
        sv.forEach((i) => {
            rvcondtion = false;
            if ("" != i.usetype && (0 == type)) {
                rv.forEach((j) => {
                    if (i.usetype == j.value) {
                        rvcondtion = true;
                        cvcondtion = false;
                        j.children.forEach((k) => {
                            if (i.macnum == k.value) {
                                cvcondtion = true;
                                return false;
                            }
                        });
                        if (!cvcondtion) {
                            cvc = j.children.length;
                            j.children[cvc] = { value: i.macnum, label: i.macnum };
                        }
                        return;
                    }
                });
                if (!rvcondtion) {
                    rvc = rv.length;
                    rv[rvc] = { value: i.usetype, label: i.usetype };
                    rv[rvc].children = [];
                    rv[rvc].children[0] = { value: i.macnum, label: i.macnum };
                }
            }
            if ("" != i.usetype && (1 == type && 1 == i.inused)) {
                rv.forEach((j) => {
                    if (i.macnum == j.value) {
                        rvcondtion = true;
                        return;
                    }
                });
                if (!rvcondtion) {
                    rvc = rv.length;
                    rv[rvc] = { value: i.macnum, label: i.macnum };
                }
            }

        });
        return rv;
    }

    render() {
        let itemcss = {
            height: '35px',
        }
        return (
            <div>
                <WingBlank size="lg">
                    <WhiteSpace size="xs" />
                    <Card >
                        <Card.Body>
                            <div>
                                {this.state.gddata.data && this.state.gddata.data.length > 0 ? <div>
                                    <Grid data={this.state.gddata.data}
                                        columnNum={5}
                                        hasLine={false}
                                        // renderItem={dataItem => (
                                        //     <div>
                                        //         <img src={dataItem.icon} style={{ width: '50%', height: '50%', marginTop:'2px'}} />
                                        //         <Button type="primary" inline size="small" >{<div style={{ /*color:dataItem.inused?'green':'red',*/ fontSize: '13px', marginTop: '0px',marginLeft:'0px' }}>{dataItem.text}</div>} </Button>
                                        //     </div>
                                        // )}
                                        renderItem={dataItem => (
                                            <div >
                                                <img src={dataItem.icon} style={{ width: '60%', height: '60%', marginTop: '2px' }} />
                                                <div style={{ fontSize: '12px', marginTop: '0px' }}>
                                                    <span>{<div style={{ color: dataItem.inused != '0' ? 'blue' : 'red' }}>{dataItem.text}</div>} </span>
                                                </div>
                                            </div>
                                        )}
                                        onClick={this.onGridClick}
                                    />
                                </div> : "无机台"}
                                <div style={{ display: '-webkit-box', display: 'flex', padding: ' 4px 0px 0px' }}>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '26px', color: '#111E27' }}>{this.state.curmac ? this.state.curmac.macqty : 0}</div>
                                        <List style={{ backgroundColor: 'white' }} className="picker-list">
                                            <Picker
                                                data={this.state.picklist}
                                                cols={this.state.cols}
                                                //value={this.state.mac}
                                                itemStyle={{ textAlign: 'center', fontSize: '14px' }}
                                                onOk={v => this.onOk(v)}
                                                //onDismiss={() => this.onOk(["",""])}
                                                title="机台"
                                                extra={<div><span style={{ fontSize: '9px', borderTop: '1px solid #ddd' }}>数采机台数</span></div>}
                                            >
                                                <List.Item arrow=""></List.Item>
                                            </Picker>
                                        </List>
                                    </div>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '26px', color: '#111E27' }}>{this.state.curmac ? this.state.curmac.inusemacqty : 0}</div>
                                        <List style={{ backgroundColor: 'white' }} className="picker-list">
                                            <Picker
                                                // data={this.state.picklist_u}
                                                cols={/*this.state.cols*/1}
                                                //   value={this.state.mac}
                                                itemStyle={{ textAlign: 'center', fontSize: '14px' }}
                                                onOk={v => this.onOk(v)}
                                                //onDismiss={() => this.onOk(["",""])}
                                                title="机台"
                                                extra={<div><span style={{ fontSize: '9px', borderTop: '1px solid #ddd' }}>在产机台数</span></div>}
                                            >
                                                <List.Item arrow=""></List.Item>
                                            </Picker>
                                        </List>
                                    </div>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '26px', color: '#111E27' }}>{this.state.curmac ? this.state.curmac.alqty : 0}</div>
                                        <List style={{ backgroundColor: 'white' }} className="picker-list">
                                            <Picker
                                                disabled={"true"}
                                                extra={<div><span style={{ fontSize: '9px', borderTop: '1px solid #ddd' }}>发生报警数</span></div>}
                                            >
                                                <List.Item arrow=""></List.Item>
                                            </Picker>
                                        </List>
                                    </div>
                                </div>
                            </div>
                        </Card.Body>
                    </Card>
                    <WhiteSpace size="lg" />
                </WingBlank>
                <WhiteSpace size="lg" />
                <WingBlank size="lg">
                    <Card>
                        <Card.Header
                            title={<div style={{ fontSize: '15px', color: '#111E27', fontWeight: "bold" }}>{this.state.mac ? this.state.mac[1] : ""}生产数据</div>}
                            extra={<Button type="ghost" size="small" inline onClick={() => {
                                // if (this.state.picklist_u.length > 0) {
                                    const { history } = this.props;
                                    history.push({
                                        pathname: '/macstatep',
                                        state: {
                                            func: this.state.func,
                                            // picklist_u: this.state.picklist_u,
                                            mac: [this.state.mac[1]],
                                            mstate: this.state.mstate,
                                            gddata_use: this.state.gddata_use,
                                        }
                                    });
                                // }
                            }}>公差图表</Button>}
                        />
                        <Card.Body>
                            <div>
                                {/* <div style={{ fontSize:'15px',color:'#111E27',fontWeight:"bold"}}>{this.state.mac?this.state.mac[1]:""}生产数据</div> */}
                                <WhiteSpace size="lg" />
                                <div style={{ display: '-webkit-box', display: 'flex', padding: ' 4px 0px 0px' }}>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '16px', color: '#111E27' }}>{this.paraFilter(this.state.macstatus_f, "mo") ? this.paraFilter(this.state.macstatus_f, "mo")[0].fv : ""}</div>
                                        <div><span style={{ fontSize: '8px', borderTop: '1px solid #ddd' }}>
                                            <font color="#0000FF">制令</font>
                                        </span></div>
                                    </div>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '16px', color: '#111E27' }}>{this.paraFilter(this.state.macstatus_f, "prosprc") ? this.paraFilter(this.state.macstatus_f, "prosprc")[0].fv : ""}</div>
                                        <div><span style={{ fontSize: '8px', borderTop: '1px solid #ddd' }}>
                                            <font color="#0000FF">规格</font>
                                        </span></div>
                                    </div>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '16px', color: '#111E27' }}>{this.paraFilter(this.state.macstatus_f, "copno") ? this.paraFilter(this.state.macstatus_f, "copno")[0].fv : ""}</div>
                                        <div><span style={{ fontSize: '8px', borderTop: '1px solid #ddd' }}>
                                            <font color="#0000FF">铜材</font>
                                        </span></div>
                                    </div>
                                </div>
                                <WhiteSpace size="lg" />
                            </div>
                        </Card.Body>
                    </Card>
                    <WhiteSpace size="lg" />
                </WingBlank>
                <WingBlank size="lg">
                    <Card>
                        <Card.Body>
                            <div>
                                <div style={{ fontSize: '15px', color: '#111E27', fontWeight: "bold" }}>机台参数</div>
                                {this.detail(this.state.macstatus_para)}
                                {/* <WhiteSpace size="lg" />
                            <div style={{ display: '-webkit-box', display: 'flex', padding:' 4px 0px 0px'}}>
                                   <div style={{ flexGrow:1 ,textAlign:'center'}}>
                                        <div  style={{ fontSize:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.length,2):0}</div>
                                        <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>长度</span></div>
                                    </div>
                                    <div  style={{ flexGrow:1,textAlign:'center' }}>
                                        <div  style={{ fontSize:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.diam,2):0}</div>
                                        <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>线径</span></div>
                                    </div>
                                    <div style={{ flexGrow:1  ,textAlign:'center'}}>
                                        <div  style={{ fontSize:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.tension,2):0}</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:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.speed,2):0}</div>
                                        <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>线速度</span></div>
                                    </div>
                                    <div style={{ flexGrow:1  ,textAlign:'center'}}>
                                        <div  style={{ fontSize:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.ydl,2):0}</div>
                                        <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>用电量</span></div>
                                    </div> 
                                    <div  style={{ flexGrow:1,textAlign:'center' }}>
                                        <div  style={{ fontSize:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.lsdl,2):0}</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:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.yqdl,2):0}</div>
                                        <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>引取电流</span></div>
                                    </div>
                                   <div style={{ flexGrow:1  ,textAlign:'center'}}>
                                        <div  style={{ fontSize:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.thdl,2):0}</div>
                                        <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>退火电流</span></div>
                                    </div>
                                    <div  style={{ flexGrow:1,textAlign:'center' }}>
                                        <div  style={{ fontSize:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.lsywd,2):0}</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 18px'}}>
                                   <div style={{ flexGrow:1  ,textAlign:'left'}}>
                                        <div  style={{ fontSize:'20px',color:'#111E27' }}>{this.state.mstate?Format.FormatUtil(this.state.mstate.lsyph,2):0}</div>
                                        <div><span style={{ fontSize:'8px',borderTop: '1px solid #ddd' }}>拉丝液PH值</span></div>
                                    </div>
                            </div> */}
                            </div>
                        </Card.Body>
                    </Card>
                    <WhiteSpace size="lg" />
                </WingBlank>
            </div>
        );
    }
}