import React from 'react'
import 'antd-mobile/dist/antd-mobile.css';
import { Card, WingBlank, WhiteSpace, Flex, Accordion,Badge  } from 'antd-mobile';
import { Http } from '../../Utils/help'
import PropTypes from 'prop-types'


export default class Mactypealertdetail extends React.Component {
    constructor(props,context) {
        super(props, context);
        const { detail,type,code } = this.props.location.state;
            this.state = {
                type: type,
                detail:detail,
                code:code,
            }
    }

    //取得json数据集
    componentWillMount() {
        console.log("detail:",this.state.detail)
        this.onOk();
    }

    componentDidUpdate() {
    }

    componentDidMount() {
        console.log("componentDidMount--");
        }
        
        onOk = () => {
            console.log("进入onOk---------")
            console.log("detail:",this.state.detail)
            this.setState(
                {
                    carddata: this.datapackageing(this.state.detail),
                }
            )
    }

    //数据重新封装
    datapackageing = (values) => {
        console.log("values222:",values)
        var vdate =[]
        if (values && values.length > 0) {
            var alertlevel = "";
            var level=""
            var alertnum=0
            var dateinfo =[]
            for (let i = 0; i < values.length; i++) {
                var vals = values[i] 
                level = vals.level        
                if(i===0){
                    alertlevel= vals.level
                    alertnum = vals.alertqty
                    dateinfo.push(vals)
                }else if(i===values.length-1){
                    if(vals.level !==alertlevel){
                        vdate.push({"level":alertlevel,"alertnum":alertnum,"data":dateinfo})
                        level = vals.level
                        alertnum = vals.alertqty
                        alertlevel= vals.level
                        dateinfo=[]
                        dateinfo.push(vals)
                    }
                    else{
                     alertnum +=vals.alertqty
                     dateinfo.push(vals)
                  
                }
                vdate.push({"level":level,"alertnum":alertnum,"data":dateinfo})
                }else if(vals.level===alertlevel){
                    alertnum +=vals.alertqty
                    dateinfo.push(vals)
                }
                else if(vals.level !==alertlevel){
                    vdate.push({"level":alertlevel,"alertnum":alertnum,"data":dateinfo})
                    level = vals.level
                    alertnum = vals.alertqty
                    alertlevel= vals.level
                    dateinfo=[]
                    dateinfo.push(vals)
                }
            }
        }
        console.log("vdate:",vdate)
        return vdate;
    }
   
    render() {
        return (
            <div key={"key1"} style={{ height: '100%' }}>
                <div id='topdiv' />
                
                <WhiteSpace size="md" />
                <WingBlank size="md">
                    <div style={{ backgroundColor: "#fff", height: "40px", paddingTop: '15px', paddingLeft: '13px', fontSize: "18px" }}>{this.state.code+"机台等级警报详细数据"}</div>
                    <div style={{ width: "100%", height: this.state.carddata && this.state.carddata.length > 0 ? "auto" : "20px", margin: "0 auto" }}>
                        <Accordion accordion openAnimation={{}} className="my-accordion" >
                            {console.log(this.state.carddata)}
                            {this.state.carddata && this.state.carddata.length > 0 ? this.state.carddata.map(dataItem =>
                                <Accordion.Panel header={<div style={{width:"100%"}}>{dataItem.level}<Badge  style={{marginLeft:"50px"}} text={dataItem.alertnum} overflowCount={9999} /></div>}>
                                    <div style={{ width: "100%" ,marginLeft:20}} key={dataItem.level}>
                                        {
                                            dataItem.data && dataItem.data.length > 0 ? dataItem.data.map((macdetail) =>
                                                <div style={{ width: "90%" }}>

                                                  <Card style={{ marginTop: '4px' ,marginRight:"5px" }}>
                                                  <div style={{padding:"10px 5px 5px 10px"}}>
                                                    <div  style={{paddingTop:"3px",paddingLeft:"10px"}} >{macdetail.devcode}{"-"}{macdetail.devname} </div>
                                                    <div style={{paddingTop:"3px",paddingLeft:"10px"}}>{macdetail.alertname}</div>
                                                    <div style={{paddingTop:"3px",paddingLeft:"10px"}}>开始时间：{macdetail.createtime}</div>
                                                    <div style={{paddingTop:"3px",paddingLeft:"10px"}}>结束时间：{macdetail.closetime}</div>
                                                    <div style={{paddingTop:"3px",paddingLeft:"10px"}}>持续时间：{macdetail.delaytime}<span style={{marginLeft:"3px"}}>分钟</span></div>
                                                    </div>
                                                    </Card>
                                                    <br />
                                                </div>
                                            ) : "没有数据"}
                                    </div>
                                </Accordion.Panel>
                            ) : <div style={{ paddingTop:10,backgroundColor: "#fff", height: "30px", textAlign: "center" }}>没有数据</div>}
                        </Accordion>
                    </div>
                </WingBlank>

                <div id='gotop'
                    style={{ width: '40px', height: '40xp', position: 'fixed', right: '5%', top: '94%' }}
                    onClick={() => { document.getElementById('topdiv').scrollIntoView(true) }}
                >
                    <img src={require('../../images/upcircle.png')} style={{ width: '100%', height: '100%' }} />
                </div>
            </div>
        )
    }
}

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