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

const F2 = require('@antv/f2');
const PieLabel = require('@antv/f2/lib/plugin/pie-label');

export default class Mactypealert extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.getSevenAlert = this.getSevenAlert.bind(this),
            this.StockageData = this.StockageData.bind(this),
            this.state = {
                tag: { 'DAY': 'primary' },
                mac: "",
                type: 'DAY',
                typech: "7日",
                datetype: "日期",
                sevenalertbytype: [],
                DataSource:[],         
                seatype:1,
                tag2: { 1: 'primary' }
            }
    }

    //取得json数据集
    componentWillMount() {
       window.conditionarr=[]
       this.onOk()
    }

    componentDidUpdate() {
    }

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

    draw = () => {
        //饼图和明细
        this.dataAjax2 = Http.getJSON2("ds/data/macalertlevel/macalertlevellist", { "type": this.state.type }).done((DataSource) => {
            console.log("DataSource:", DataSource)
            var allvalue = 0
            let datavalue = {}
            let datavalues = []
            var percent = 0
            var cardvalue = {}
            var carddata = []
            if (DataSource && DataSource.length > 0) {
                DataSource.map(dataItem => {
                    if (dataItem.dissta == 1) {
                        allvalue += dataItem.alertqty
                    }
                })
                for (let i = 0; i < DataSource.length; i++) {
                    if (DataSource[i].dissta == 1) {
                        datavalue.name = DataSource[i].level
                        datavalue.aa = "1"
                        datavalue.allvalue = allvalue
                        datavalue.value = DataSource[i].alertqty
                        percent = (datavalue.value * datavalue.aa) / allvalue
                        datavalue.percent = (Number)(percent.toFixed(5))
                        datavalues.push(datavalue)
                        datavalue = {}
                    }
                    else if (DataSource[i].dissta == 2) {
                        cardvalue = DataSource[i]
                        carddata.push(cardvalue)
                        cardvalue = {}
                    }
                }
            }
            this.setState(
                {
                    DataSource:DataSource,
                    piealert: datavalues,
                    carddata: this.datapackageing(carddata),
                }, () => {
                    this.chartRender();
                }
            )
        });
    }

    onOk = () => {
        //数据用于列表
        this.dataAjax2 = Http.getJSON2("ds/data/alert/mactypealert", { "type": this.state.type ,"seatype":this.state.seatype}).done((sevenalert) => {
           console.log("sevenalert:",sevenalert)
            let Accordion = {}
            let Accordiondata = []
            if (sevenalert && sevenalert.length>0) {
                for (let m = 0; m < sevenalert.length; m++) {
                    if (sevenalert[m].dissta == 2) {
                        Accordion = sevenalert[m]
                        Accordiondata.push(Accordion)
                        Accordion = {}
                    }
                }
            }
            this.setState(
                {
                    sevenalertbytype: this.getSevenAlert(sevenalert),
                    Accordiondata: this.packageing(Accordiondata),
                }, () => {
                    this.chartRender();
                    this.draw();
                }
            )
        })
    }

    getSevenAlert = (senddata) => {
        console.log("*********senddata:", senddata)
        let data = []
        let dataarray = {}
        if (senddata && senddata.length>0) {
            senddata.map(val => {
                if (val.dissta == 1) {
                    dataarray.vdate = val.typename
                    dataarray.name = val.mactypename
                    dataarray.num = val.alertqty
                    dataarray.mactype=val.mactype
                }
                data.push(dataarray)
                dataarray = {}
            })
        }
        return data
    }
    //数据重新封装
    packageing = (values) => {
        console.log("values:",values)
        var vdate = [];
        if (values && values.length > 0) {
            var code = ""
            var name=""
            var alertnum=0
            var dateinfo =[]
            for (let i = 0; i < values.length; i++) {
                var vals = values[i]
                if(i===0){
                    code = vals.mactype
                    name = vals.mactypename
                    alertnum = vals.alertqty
                    dateinfo.push(vals)
                }else if(i===values.length-1){
                    if(vals.mactype !== code){
                    vdate.push({"mactype":code,"mactypename":name,"alertnum":alertnum,"data":dateinfo})
                    code = vals.mactype
                    name = vals.mactypename
                    alertnum = vals.alertqty
                    dateinfo=[]
                    dateinfo.push(vals)
                    }
                    else{
                    alertnum +=vals.alertqty
                    dateinfo.push(vals)
                }
                    vdate.push({"mactype":code,"mactypename":name,"alertnum":alertnum,"data":dateinfo})
                }
                else if(vals.mactype===code){
                    alertnum +=vals.alertqty
                    dateinfo.push(vals)
                }else if(vals.mactype !== code){
                    vdate.push({"mactype":code,"mactypename":name,"alertnum":alertnum,"data":dateinfo})
                    code = vals.mactype
                    name = vals.mactypename
                    alertnum = vals.alertqty
                    dateinfo=[]
                    dateinfo.push(vals)
                }
            }
        }
        console.log("vdate:",vdate)
        return vdate;
    }

    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]
                if(i===0){
                    level = vals.level
                    alertlevel= vals.level
                    alertnum = vals.alertqty
                    dateinfo.push(vals)
                }else if(i===values.length-1){
                     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":level,"alertnum":alertnum,"data":dateinfo})
                    level = vals.level
                    alertnum = vals.alertqty
                    alertlevel= vals.level
                    dateinfo=[]
                    dateinfo.push(vals)
                }
            }
        }
        console.log("vdate:",vdate)
        return vdate;
    }

    onChange1 = (value) => {
        if (value !== this.state.seatype) {
                let tag2 = this.state.tag2
                tag2 = {}
                tag2[value] = 'primary'
                this.setState({
                    tag2: tag2,
                    seatype: value,
        },()=>{
            this.onOk();
          });
        }
      };

    onChange = (value) => {
        if (value !== this.state.type) {
            let tag = this.state.tag
            tag = {}
            tag[value] = 'primary'
            this.setState({
                tag: tag,
                type: value,
                typech: value === 'DAY' ? '7日' : value === 'WEEK' ? '8周' : '6月',
                datetype: value === 'DAY' ? '日期' : value === 'WEEK' ? '周数' : '月份',
            }, () => {
                this.onOk();
            }
            )
        }
    }

    chartRender = () => {
        // console.log("chartrender...")
        if (this.state.sevenalertbytype && JSON.stringify(this.state.sevenalertbytype) !== '[]')//7天各机型警报
            this.SevenData(this.state.sevenalertbytype, 'alertbytype')
        this.StockageData(this.state.piealert)
    }

    StockageData = (data) => {
        console.log("饼图data：",data)
        try {
            var chart = new F2.Chart({
                id: 'drawpie',
                pixelRatio: window.devicePixelRatio,
                plugins: PieLabel
            });
            chart.source(data)
            chart.pieLabel({
                sidePadding: 40,
                label1: function label1(data, color) {
                    return {
                        text: data.name,
                        fill: color
                    };
                },
                label2: function label2(data) {
                    return {
                        text: (data.aa * data.percent * 100).toFixed(3) + "%"+"-次数："+data.value,
                        fill: '#808080',
                        fontWeight: 'bold'
                    };
                }
            });

            chart.tooltip(false);
            chart.coord('polar', {
                transposed: true,
                radius: 0.75
            });
            chart.legend(false);
            chart.axis(false);
            chart.interval().position('aa*percent').color('name', function (name) {
               
                if (name === 'NORMAL') {
                    return '#32CD32'
                }
                if (name === 'HIGH') {
                    return '#108ee9'
                }
                if (name === 'URGENCY') {
                    return '#FF7F00'
                }
                if (name === 'IMMEDIATELY') {
                    return '#CD0000'
                }
            }).adjust('stack').style({
                lineWidth: 1,
                stroke: '#fff',
                lineJoin: 'round',
                lineCap: 'round'
            }).animate({
                appear: {
                    duration: 1200,
                    easing: 'bounceOut'
                }
            });
            //渲染图表
            chart.render();
        } catch (error) {
            console.error(error.message)
        }
    }

    SevenData = (date, sign) => {
        console.log("this.state.type:",this.state.type)
        console.log("曲线图date:",date)
        var senddata=[]
        for(var i=0;i<date.length;i++){
            if(date[i]&&date[i].name){
                senddata.push(date[i])
            }
        }
        for(var j=0;j<senddata.length;j++ ){
            if(senddata[j].mactype==="DL01"){
                senddata[j].name='大拉机（1号）'
            }
            if(senddata[j].mactype==="DL02"){
                senddata[j].name='大拉机2号'
            }
        }
        console.log("senddata2222:",senddata)
       
        var chart = new F2.Chart({
            id: sign,
            pixelRatio: window.devicePixelRatio,
            animate: true,
            padding: sign === 'alertbytype' ? [55, 10, 20, 50] : [30, 10, 20, 50]
        });
        chart.source(senddata)
        
        if (this.state.type !== 'DAY') {
            chart.scale('vdate', {
                type: 'cat',
                tickCount: 6,
                formatter: function formatter(value) {
                    let retval = value.substring(2, 20)
                    return retval
                }
            })
        } else {
            chart.scale('vdate', {
                type: 'timeCat',
                mask: 'MM-DD',
                range: [0.07, 0.95],
            });
        }

        //处理坐标轴缩进
        chart.axis('vdate', {
            label: function label(text, index, total) {
                var textCfg = {};
                if (index === 0) {
                    textCfg.textAlign = 'left';
                } else if (index === total - 1) {
                    textCfg.textAlign = 'right';
                }
                return textCfg;
            },
            grid: function label(text, index, total) {
                var textCfg = {};
                if (index === 0) {
                    textCfg.textAlign = 'left';
                } else if (index === total - 1) {
                    textCfg.textAlign = 'right';
                }
                return textCfg;
            }
        });

        chart.legend(false);
        chart.tooltip(false);
        // 辅助元素
        senddata.forEach(function (obj, index) {
            // 文字部分
            var color = '';
            color = obj.num < 50 ? '#2fc25b' : '#FC674D';
            chart.guide().text({
                position: [obj.vdate, obj.num > 0 ? obj.num : 0],
                content: obj.num,
                style: {
                    fill: color,
                    textBaseline: 'bottom'
                },
                offsetY: -5
            });
            // 背景部分
            var offset = 0.46;
            chart.guide().rect({
                start: [index - offset, 'max'],
                end: [index + offset, 'min'],
                style: {
                    fill: '#f8f8f8'
                }
            });
        })
        chart.tooltip({
            showCrosshairs: true
        });
        chart.point().position('vdate*num').color('name').shape('smooth');
        chart.area().position('vdate*num').color('name').shape('smooth');
        chart.line({
            connectNulls: true // 配置，连接空值数据
        }).position('vdate*num').color('name').shape('smooth');
        chart.render();
    }

    onClickLink = (val,detail) => {
        let code=detail.devcode
        const { router } = this.context;
        if(val==="mactypealert"){
        router.push({
            pathname: '/macstatusnowinfo',
            state: {
                code: code,
                type: this.state.type,
            }
        });
         }
         if(val==="mactypealertdetail"){
        console.log(" DataSource:",this.state.DataSource)
        let DataSource=this.state.DataSource
        var cardvalue = {}
            var carddata = []
            if (DataSource && DataSource.length > 0) {
                for (let i = 0; i < DataSource.length; i++) {
                 if (DataSource[i].dissta == 2&&DataSource[i].typename.substring(0,10)===detail.typename&&DataSource[i].devcode===detail.devcode) {
                        cardvalue = DataSource[i]
                        carddata.push(cardvalue)
                        cardvalue = {}
                    }
                }}

        router.push({
            pathname: '/mactypealertdetail',
            state: {
                detail: carddata,
                type: this.state.type,
                code:code,
            }
        });
    }
    }

    render() {
        return (
            <div key={"key1"} style={{ height: '100%' }}>
                <div id='topdiv' />
                <WhiteSpace size="md" />
                <WingBlank size="md">
                    <div style={{ height: 'auto', textAlign: 'center' }}>
                        <Flex>
                            <Flex.Item>
                                <Button key='DAY' checked={this.state.tag['DAY']} size="small" style={{ backgroundColor: this.state.tag['DAY'] ? "#108ee9" : "white" }} onClick={e => this.onChange('DAY')}>日</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button key='WEEK' checked={this.state.tag['WEEK']} size="small" style={{ backgroundColor: this.state.tag['WEEK'] ? "#108ee9" : "white" }} onClick={e => this.onChange('WEEK')}>周</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button key='MONTH' checked={this.state.tag['MONTH']} size="small" style={{ backgroundColor: this.state.tag['MONTH'] ? "#108ee9" : "white" }} onClick={e => this.onChange('MONTH')}>月</Button>
                            </Flex.Item>
                        </Flex>
                    </div>
                </WingBlank>

                <WhiteSpace size="md" />
                <WingBlank size="md">
                    <Card>
                        <Card.Body style={{ paddingLeft: '5px' }}>
                            {this.state.sevenalertbytype&&this.state.sevenalertbytype.length>0?
                            <div style={{ textAlign: 'center', color: '#1890ff' }}>{this.state.typech}各机型警报数
                            <canvas id="alertbytype" style={{ width: "100%", height: 'auto' }}></canvas>
                            </div>:<div style={{textAlign:"center"}}>{"暂无数据"}</div>}
                        </Card.Body>
                    </Card>
                </WingBlank>

                <WhiteSpace size="md" />
                <WingBlank size="md">
               
                    <Card>
                        <Card.Body style={{ paddingLeft: '5px' }}>
                        {this.state.piealert&&this.state.piealert.length>0?
                            <div style={{ textAlign: 'center', color: '#1890ff' }}>{this.state.typech}各警报等级占比
                            <canvas id="drawpie" style={{ width: "100%", height: 'auto' }}></canvas>  
                        </div>  : <div style={{textAlign:"center"}}>{"暂无数据"}</div> }                     
                        </Card.Body>
                    </Card>
                       
                </WingBlank>

                <WhiteSpace size="md" />
                <WingBlank>
        <Flex>
        <Flex.Item>
        <Button key='1' checked={this.state.tag2['1']} size="small"  style={{backgroundColor:this.state.tag2['1']?"#108ee9":"white"}}  onClick={e => this.onChange1('1')}>机型</Button>
        </Flex.Item>
        <Flex.Item>
        <Button key='2' checked={this.state.tag2['2']} size="small"  style={{backgroundColor:this.state.tag2['2']?"#108ee9":"white"}}  onClick={e => this.onChange1('2')}>车间</Button>
        </Flex.Item>
        </Flex>
        </WingBlank>
                <WingBlank size="md">
                    <div style={{ backgroundColor: "#fff", height: "40px", paddingTop: '15px', paddingLeft: '13px', fontSize: "18px" }}>机台警报详细数据</div>
                    <div style={{ width: "100%", height: "auto", margin: "0 auto" }}>
                        <Accordion accordion openAnimation={{}} className="my-accordion" >
                            {this.state.Accordiondata && this.state.Accordiondata.length > 0 ? this.state.Accordiondata.map(dataItem =>
                                <Accordion.Panel header={<div style={{width:"100%"}}>{dataItem.mactype + "-" + dataItem.mactypename}<Badge style={{marginLeft:"50px"}} text={dataItem.alertnum} overflowCount={9999} /></div>}>
                                    {/* <Badge text={77} overflowCount={55} /> */}
                                    <div key={dataItem.mactype}>
                                        <div style={{ textAlign: 'center', marginLeft: '4px', marginTop: '6px', width: '35%', height: '25px', float: 'left' }}>机台</div>
                                        <div style={{ textAlign: 'center', marginTop: '6px', width: '24%', float: 'left', height: '25px' }}>警报数量</div>
                                        <div style={{ textAlign: 'center', marginTop: '6px', width: '35%', float: 'left', height: '25px' }}>{this.state.datetype}</div>
                                    </div>
                                    <div>
                                        {
                                            dataItem.data && dataItem.data.length > 0 ? dataItem.data.map((macdetail, ind) =>
                                                <div  >
                                                    <div style={{ backgroundColor: ind % 2 > 0 ? '' : '#FDF5E6', textAlign: 'center', marginLeft: '4px', marginTop: '6px', width: '35%', height: '25px', float: 'left' }} onClick={() => this.onClickLink('mactypealert', macdetail)}><u>{macdetail.devcode}</u></div>
                                                    <div style={{ backgroundColor: ind % 2 > 0 ? '' : '#FDF5E6', textAlign: 'center', marginTop: '6px', width: '24%', height: '25px', float: 'left' }} onClick={() => this.onClickLink('mactypealertdetail', macdetail)}><u>{macdetail.alertqty}</u></div>
                                                    <div style={{ backgroundColor: ind % 2 > 0 ? '' : '#FDF5E6', textAlign: 'center', marginTop: '6px', width: '35%', height: '25px', float: 'left' }} onClick={() => this.onClickLink('mactypealertdetail', macdetail)}><u>{macdetail.typename}</u></div>
                                                </div>
                                            ) : "暂无数据"}
                                    </div>
                                </Accordion.Panel>
                            ) : <div style={{ paddingTop:10,backgroundColor: "#fff", height: "30px", textAlign: "center" }}>{"暂无数据"}</div>}
                        </Accordion>
                    </div>
                </WingBlank>

                {/* <WhiteSpace size="md" />
                <WingBlank size="md">
                    <div style={{ backgroundColor: "#fff", height: "40px", paddingTop: '15px', paddingLeft: '13px', fontSize: "18px" }}>等级警报详细数据</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"}} onClick={() => this.onClickLink('alertlevel', macdetail.devcode)}><u>{macdetail.devcode}</u>{"-"}{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.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>
        )
    }
}

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