import React from 'react';
import ReactDOM from 'react-dom';
import 'antd-mobile/dist/antd-mobile.css';
import {Badge,Tabs, Card, WingBlank, WhiteSpace, Grid, Flex, SearchBar } from 'antd-mobile';
import { Http } from '../../Utils/help';
import './less/list.less';
import PropTypes from 'prop-types'

export default class MacStatusList extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.makeData = this.makeData.bind(this);
        this.onSubmit=this.onSubmit.bind(this)
        this.state = {
            maclist: [],
            curmac: [],
            picklist: [],
            picklist_u: [],
            cols: 2,
            gddata: { "fun": [], "data": [] }, //全部
            gddata_use: { "fun": [], "data": [] },//开机
            gddata_isdaq: { "fun": [], "data": [] },//采集      
            gddata_isdaqno: { "fun": [], "data": [] },//非采集  
            searchevalue:"", //搜索的值
            //条件保存
            ifin:false,//是否已保存过一次
            i:{},//若有，保存的对象，取出进行条件刷新
        };
    }
    componentWillMount(){
        if(typeof(window.conditionarr)=="undefined"){window.conditionarr=[]}
         window.conditionarr.map((data=>{
            if(data['key']==='macstatuslist'){
                this.state.ifin=true
                this.state.i=data
                this.setState({
                    ifin:true,
                    i:data,
                    searchevalue:data['value']['devcode'],
                })
                return
            }
        }))
    }
    componentDidMount() {
        this.dataAjax = Http.getJSON2("ds/data/macstatus/macstatusmerge").done((result) => {
            try {
                console.log(result)
                const { maclist, curmac, } = result;
                this.setState({
                    maclist: maclist,
                    curmac: curmac,
                    picklist: this.macfilter(maclist, 0),
                    picklist_u: this.macfilter(maclist, 1),
                }, () => {
                    if(this.state.ifin){
                        this.onSubmit();
                    }
                    else{
                       // this.makeData();
                       this.setState({searchevalue:""},this.onSubmit())
                    }
                }
                )
            } catch (err) {
                console.error(err.message);
                console.error(err.stack);
            }
        });
    }

    macfilter = (sv, type) => {
        let rv = [];
        let rvcondtion = false;
        let cvcondtion = false;
        let rvc = 0;
        let cvc = 0;
        if (JSON.stringify(sv) === '{}' || 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;
    }

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

        let func = {};
        let func_use = {};
        let func_isdaq={};
        let func_isdaqno={};
        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": [] };
            if (!func_isdaq.fun)
                func_isdaq = { "fun": [], "data": [] };
            if (!func_isdaqno.fun)
                func_isdaqno = { "fun": [], "data": [] };
            func.fun[func.fun.length] = data;//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;
            }
            //采集机台
            if (data.isdaq == '1') {
                func_isdaq.fun[func_isdaq.fun.length] = data;
                func_isdaq.data[func_isdaq.data.length] = nd;
            }
            //非采集机台
            if (data.isdaq != '1') {
                func_isdaqno.fun[func_isdaqno.fun.length] = data;
                func_isdaqno.data[func_isdaqno.data.length] = nd;
            }


            
            console.log()
        });
        console.log('func',func)
        console.log('func_use',func_use)
        console.log('fun_isdaq',func_isdaq)
        console.log('func_isdaqno',func_isdaqno)


        this.setState({
            gddata: func,
            gddata_use: func_use,
            gddata_isdaq:func_isdaq,
            gddata_isdaqno:func_isdaqno,
        });
    }
    onSubmit=()=>{
        console.log("搜索值",this.state.searchevalue)
        //保存条件s
        //判断是否已存过一次
        window.conditionarr.map((data=>{
            if(data['key']==='macstatuslist'){
                this.state.ifin=true
                this.state.i=data
                this.setState({ifin:true,i:data})
                return
            }
        }))
        if(this.state.ifin){
            this.state.i['value']['devcode']=this.state.searchevalue
        }
        else{
            window.conditionarr.push({key:'macstatuslist',value:{devcode:this.state.searchevalue}})
            //保存条件S
            window.conditionarr.map((data=>{
            if(data['key']==='macstatuslist'){
                this.state.ifin=true
                this.state.i=data
                this.setState({ifin:true,i:data})
                return
            }
            }))
        }
        //E
        console.log('未筛机台列表',this.state.maclist)
        let funcs = this.state.maclist.slice().filter( data=> data.macnum.indexOf(this.state.searchevalue)>=0)
        console.log('筛选',funcs)
        if (!funcs || !Array.isArray(funcs)) {
            return;
        }
        let func = {};
        let func_use = {};
        let func_isdaq={};
        let func_isdaqno={};
        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": [] };
            if (!func_isdaq.fun)
                func_isdaq = { "fun": [], "data": [] };
            if (!func_isdaqno.fun)
                func_isdaqno = { "fun": [], "data": [] };
            func.fun[func.fun.length] = data;//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;
            }
            //采集机台
            if (data.isdaq == '1') {
                func_isdaq.fun[func_isdaq.fun.length] = data;
                func_isdaq.data[func_isdaq.data.length] = nd;
            }
            //非采集机台
            if (data.isdaq != '1') {
                func_isdaqno.fun[func_isdaqno.fun.length] = data;
                func_isdaqno.data[func_isdaqno.data.length] = nd;
            }


            
            console.log()
        });
        console.log('func',func)
        console.log('func_use',func_use)
        console.log('fun_isdaq',func_isdaq)
        console.log('func_isdaqno',func_isdaqno)


        this.setState({
            gddata: func,
            gddata_use: func_use,
            gddata_isdaq:func_isdaq,
            gddata_isdaqno:func_isdaqno,
        });
    }
    onGridClick = (el, index) => {
        console.log(el, index)
        console.log(this.state.gddata.fun[index].macnum)
        //macstatusnowinfo
        const { router } = this.context;
        // console.log(router)
        router.push({
            pathname: '/macstatusnowinfo',
            state: {
                code: el.text,
                status: el.inused,
            }
        });
    }

    render() {
        const tabs = [
            { title:<Badge text={this.state.gddata_isdaq.data && this.state.gddata_isdaq.data.length ?this.state.gddata_isdaq.data.length:this.state.maclist&&this.state.maclist.length>0?'0':''}> 采集机台</Badge> },
            { title:<Badge text={this.state.gddata_isdaq.data && this.state.gddata_isdaqno.data.length ?this.state.gddata_isdaqno.data.length:this.state.maclist&&this.state.maclist.length>0?'0':''}>非采集机台</Badge>},
          ];
        return (
            <div style={{background:"#efeff4"}}>
            {/* <WhiteSpace size="xl" /> */}
            <div>
            <SearchBar
                        placeholder='可输入机台号搜索'
                        value={this.state.searchevalue}
                        onSubmit={this.onSubmit}
                        onChange={(searchevalue)=>{
                            this.setState({searchevalue})
                        }}
                        onCancel={()=>{
                            console.log('取消')
                            this.setState({searchevalue:""},this.onSubmit)

                        }}

             />
            </div>
            <WhiteSpace size="xs" />
            <div style={{background:"#efeff4",border:'none'}}>
                <WingBlank size="lg">
                    {/* <Card style={{background:"rgba(245,245,249,1)",border:'none'}}>
                        <Card.Body> */}
                            <Flex>
                                <Flex.Item>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '26px', color: '#111E27' }}>{this.state.curmac ? this.state.curmac.macqty : 0}</div>
                                        <div style={{ backgroundColor: '#efeff4', textAlign: 'center',background:'#efeff4' }} >
                                            <span style={{ fontSize: '11px', borderTop: '1px solid #ddd' }}>机台数</span>
                                        </div>
                                    </div>
                                </Flex.Item>
                                <Flex.Item>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '26px', color: '#111E27' }}>{this.state.curmac ? this.state.curmac.opennum : 0}</div>
                                        <div style={{ backgroundColor: '#efeff4', textAlign: 'center',background:'#efeff4' }} >
                                            <span style={{ fontSize: '11px', borderTop: '1px solid #ddd' }}>开机数</span>
                                        </div>
                                    </div>
                                </Flex.Item>
                                <Flex.Item>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '26px', color: '#111E27' }}>{this.state.curmac ? this.state.curmac.awaitnum : 0}</div>
                                        <div style={{ backgroundColor: '#efeff4', textAlign: 'center',background:'#efeff4' }} >
                                            <span style={{ fontSize: '11px', borderTop: '1px solid #ddd' }}>待机数</span>
                                        </div>
                                    </div>
                                </Flex.Item>
                                <Flex.Item>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '26px', color: '#111E27' }}>{this.state.curmac ? this.state.curmac.closenum : 0}</div>
                                        <div style={{ backgroundColor: 'white', textAlign: 'center',background:'#efeff4' }} >
                                            <span style={{ fontSize: '11px', borderTop: '1px solid #ddd' }}>关机数</span>
                                        </div>
                                    </div>
                                </Flex.Item>
                                <Flex.Item>
                                    <div style={{ flexGrow: 1, textAlign: 'center' }}>
                                        <div style={{ fontSize: '26px', color: '#111E27' }}>{this.state.curmac ? this.state.curmac.alqty : 0}</div>
                                        <div style={{ backgroundColor: 'white', textAlign: 'center',background:'#efeff4' }} >
                                            <span style={{ fontSize: '11px', borderTop: '1px solid #ddd' }}>报警数</span>
                                        </div>
                                    </div>
                                </Flex.Item>
                            </Flex>
                        {/* </Card.Body>
                    </Card> */}
                </WingBlank>
            </div>
            <WhiteSpace size="md" />
            <div style={{ margin: '10px',background:"rgba(255,255,255,1)"}}>
                <Tabs tabs={tabs} initialPage={this.state.ifin?this.state.i['value']['tabsselect']:0} animated={false} useOnPan={false} onTabClick={(tabs,index)=>{
                //保存条件S
                window.conditionarr.map((data=>{
                    // keys.push()
                    if(data['key']==='macstatuslist'){
                        this.state.ifin=true
                        this.state.i=data
                        this.setState({ifin:true,i:data})
                        return
                    }
                }))
                if(this.state.ifin){
                    this.state.i['value']['tabsselect']=index
                }
                else{
                    window.conditionarr.push({key:'macstatuslist',value:{tabsselect:index}})
                    //保存条件S
                    window.conditionarr.map((data=>{
                    if(data['key']==='macstatuslist'){
                        this.state.ifin=true
                        this.state.i=data
                        this.setState({ifin:true,i:data})
                        return
                    }
                    }))
                }
                //End  

                }}>
                <div>
                                {/* <div className="sub-title" style={{margin:'17px',fontSize:'20px',color:'#108ee9',fontWeight:'bold'}}>采集机台</div> */}
                                <div style={{ margin: '10px',background:"rgba(255,255,255,1)"}}>
                                    {this.state.gddata_isdaq.data && this.state.gddata_isdaq.data.length > 0 ? <div style={{background:"rgba(245,245,249,1)"}}>
                                        <Grid data={this.state.gddata_isdaq.data}
                                            itemStyle={{background:"rgba(255,255,255,1)",height:'80px'}}
                                            //itemStyle={{background:"#ffffff"}}
                                            columnNum={5}
                                            hasLine={false}
                                            renderItem={dataItem => (
                                                <div style={{paddingTop:'5px',background:"rgba(255,255,255,1)"}} >
                                                    <img src={dataItem.icon} style={{ width: '60%', height: '60%', marginTop: '2px',background:"rgba(255,255,255,1)" }} />
                                                    <div style={{ fontSize: '12px', marginTop: '0px',background:"rgba(255,255,255,1)" }}>
                                                        <span>{<div style={{ color: dataItem.inused != '0' ? 'blue' : 'red',background:"rgba(255,255,255,1)"}}>{dataItem.text}</div>} </span>
                                                    </div>
                                                </div>
                                            )}
                                            onClick={this.onGridClick}
                                        />
                                    </div> : "无对应机台"}
                            </div>
                            </div>
                            <div style={{ margin: '10px',background:"rgba(255,255,255,1)"}}> 
                                {/* <div className="sub-title" style={{margin:'17px',fontSize:'20px',color:'#108ee9',fontWeight:'bold'}}>非采集机台</div> */}
                                <div style={{ margin: '10px',background:"rgba(255,255,255,1)"}}>
                                    {this.state.gddata_isdaqno.data && this.state.gddata_isdaqno.data.length > 0 ? <div style={{background:"rgba(245,245,249,1)"}}>
                                        <Grid data={this.state.gddata_isdaqno.data}
                                            //itemStyle={{background:"rgba(245,245,249,1)"}}
                                            itemStyle={{background:"#ffffff",height:'80px'}}
                                            columnNum={5}
                                            hasLine={false}
                                            renderItem={dataItem => (
                                                <div style={{paddingTop:'5px',background:"rgba(255,255,255,1)"}} >
                                                    <img src={dataItem.icon} style={{ width: '60%', height: '60%', marginTop: '2px',background:"rgba(255,255,255,1)"}} />
                                                    <div style={{ fontSize: '12px', marginTop: '0px',background:"rgba(255,255,255,1)" }}>
                                                        <span>{<div style={{ color: dataItem.inused != '0' ? 'blue' : 'red',background:"rgba(255,255,255,1)"}}>{dataItem.text}</div>} </span>
                                                    </div>
                                                </div>
                                            )}
                                            onClick={this.onGridClick}
                                        />
                                    </div> : "无对应机台"}
                            </div>
                            </div>
                </Tabs>
                <WhiteSpace />
            </div>
        </div>

        )
    }
}

MacStatusList.contextTypes = {
    router: PropTypes.object.isRequired
}