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

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

export default class Macalert extends React.Component {
  constructor(props) {
    super(props);
    this.StockageData = this.StockageData.bind(this);
    this.makeData = this.makeData.bind(this);
    this.state = {
      data: [],
      gddata: { "fun": [], "data": [] },
      tag: {"DAY":'primary'},
      mac:"",
      type:"DAY",
      typech:"日",
    }
  }

  //取得json数据集
  componentWillMount() {
    //数据用于初始加载灯和列表
    this.dataAjax = Http.getJSON2("ds/data/kbmacalertcon/kbmacalert");
      //数据用于 饼图，曲线图和柱状图
    console.log("this.dataAjax---1", this.dataAjax)
  }

  componentDidUpdate() {
  }

  componentDidMount() {
    this.dataAjax.done((macalertstatus) => {
      if(macalertstatus.length>0){
        var thisdevcode=this.state.mac?this.state.mac:macalertstatus[0].devcode
        this.setState(
          {
            mac: thisdevcode,
          },()=>{
            this.dataAjax2 = Http.getJSON2("ds/data/kbmacalertcon/kbmacalertlist", { "devcode": this.state.mac, "type": "DAY" }).done((DataSource) => {
              console.log("初次加载DataSource:",DataSource)
              try {
              //饼图数据
              let datavalues = []
              if(DataSource.length>0){
              var allvalue = 0
              DataSource.map(dataItem => {
                if (dataItem.cursta == 1 && dataItem.dispart==0) {
                  allvalue += dataItem.alertqty
                }
              })
              let datavalue = {}
              
              var percent = 0
              for (let i = 0; i < DataSource.length; i++) {
                if (DataSource[i].cursta == 1 && DataSource[i].dispart==0) {
                  datavalue.name = DataSource[i].alertname
                  datavalue.aa =" 1"
                  datavalue.allvalue = allvalue
                  datavalue.value = DataSource[i].alertqty
                  percent = (datavalue.value * datavalue.aa) / allvalue
                  datavalue.percent = (Number)(percent.toFixed(2))
                  datavalues.push(datavalue)
                  datavalue={}
                }
              }
            }
              //最近6天当前机台与机台平均警报数对比
        
              let linevalue = {}
              let linedata = []
              for (let j = 0; j < DataSource.length; j++) {
                if (DataSource[j].dispart == 1) {
                  linevalue.type = DataSource[j].devcode
                  linevalue.value = DataSource[j].alertqty
                  linevalue.date=DataSource[j].typename
                  linedata.push(linevalue)
                  linevalue={}
                }
              }
        
             // 当前设备一段时间TOP10报警分布
              let avglinevalue = {}
              let areadataone = []
              for (let k = 0; k < DataSource.length; k++) {
                if (DataSource[k].dispart == 2) {
                  avglinevalue.alerttype = DataSource[k].alertname
                  avglinevalue.date=DataSource[k].typename
                  avglinevalue.value=DataSource[k].alertqty
                  areadataone.push(avglinevalue)
                  avglinevalue={}
                }
              }
        
               // 所有设备一段时间TOP10报警分布
               let allavglinevalue = {}
               let areadatatwo = []
               for (let k = 0; k < DataSource.length; k++) {
                 if (DataSource[k].dispart == 3) {
                   allavglinevalue.alerttype = DataSource[k].alertname
                   allavglinevalue.date=DataSource[k].typename
                   allavglinevalue.value=DataSource[k].alertqty
                   areadatatwo.push(allavglinevalue)
                   allavglinevalue={}
                 }
               }
        
              this.setState(
                {
                  datapie:datavalues,
                  areadataone:areadataone,
                  areadatatwo:areadatatwo,
                  linedata:linedata,
                  curmacstatus: datavalues,
                }, () => {
                  this.chartRender();
                }
              )
              } catch (error) {
                console.error(error.message);
                console.error(error.stack);
              }
            });
          }
        )
      }
      
      try {
        var alertstatus=[]
        alertstatus.push(macalertstatus[0])
        this.setState(
          {
            macalertstatus: macalertstatus,
            alertstatus:alertstatus,
          }, () => {
             this.chartRender();
            this.makeData(macalertstatus);
          }
        )
      } catch (error) {
        console.error(error.message);
        console.error(error.stack);
      }
    })
  }

  makeData = (funcs) => {
    if (!funcs || !Array.isArray(funcs)) {
      return;
    }
    let func = {};
    funcs.map((data, index) => {
      let nd = {};
      let imgp;
      imgp = data.level == '2' ? 'red1.png' : data.level != '2' ? (data.level == '0' ? 'green1.png' : 'h3.png') : 'red1.png';
      nd["icon"] = require('../../images/' + imgp);
      nd["text"] = data.devcode
      nd["level"] = data.level
      if (!func.fun)
        func = { "fun": [], "data": [] };
      func.fun[func.fun.length] = data;
      func.data[func.data.length] = nd;
    });
    this.setState({
      gddata: func,
    });
  }

  onOk = () => {
    //数据用于加载列表
    this.dataAjax3 = Http.getJSON2("ds/data/kbmacalertcon/kbmacalert", {}, this.onAjaxDone3);
    //数据用于 饼图，曲线图和柱状图
      this.dataAjax2 = Http.getJSON2("ds/data/kbmacalertcon/kbmacalertlist", { "devcode": this.state.mac, "type": this.state.type },this.dataProcess);
  }
    
  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'?'日':value==='WEEK'?'周':'月',
    },()=>{
        this.onOk();
      });
    }
    //this.dataAjax2 = Http.getJSON2("ds/data/kbmacalertcon/kbmacalertlist", { "devcode": this.state.mac[1], "type": this.state.type },this.dataProcess);
  };
  onAjaxDone3 = (DataSource) => {
    console.log("DataSource:",DataSource)
    var devicecode=this.state.mac
    console.log("devicecode:",devicecode)
    var alertstatus=[]
        for(var i=0;i<DataSource.length;i++){
          if(DataSource[i].devcode==devicecode){
            alertstatus.push(DataSource[i])
          }
        }
    try {
    this.setState(
      {
        alertstatus: alertstatus,
      }, () => {
        this.chartRender();
      }
    )
    } catch (error) {
      console.error(error.message);
      console.error(error.stack);
    }
  }

  dataProcess=(DataSource) => {
    console.log("DataSource数据:",DataSource)
    try {
    //饼图数据
    let datavalues = []
    if(DataSource.length>0){
    var devicecode=this.state.mac
    var allvalue = 0
    DataSource.map(dataItem => {
      if (dataItem.devcode ==devicecode&&dataItem.cursta == 1 && dataItem.dispart==0) {
        allvalue += dataItem.alertqty
      }
    })
    let datavalue = {}
    var percent = 0
    for (let i = 0; i < DataSource.length; i++) {
      if (DataSource[i].cursta == 1 && DataSource[i].dispart==0) {
        datavalue.name = DataSource[i].alertname
        datavalue.aa = "1"
        datavalue.allvalue = allvalue
        datavalue.value = DataSource[i].alertqty
        percent = (datavalue.value * datavalue.aa) / allvalue
        datavalue.percent = (Number)(percent.toFixed(2))
        datavalues.push(datavalue)
        datavalue={}
      }
    }
  }
    //最近6天当前机台与机台平均警报数对比
    let linevalue = {}
    let linedata = []
    for (let j = 0; j < DataSource.length; j++) {
      if (DataSource[j].dispart == 1) {
        linevalue.type = DataSource[j].devcode
        linevalue.value = DataSource[j].alertqty
        linevalue.date=DataSource[j].typename
        linedata.push(linevalue)
        linevalue={}
      }
    }

   // 当前设备一段时间TOP10报警分布
    let avglinevalue = {}
    let areadataone = []
    for (let k = 0; k < DataSource.length; k++) {
      if (DataSource[k].dispart == 2) {
        avglinevalue.alerttype = DataSource[k].alertname
        avglinevalue.date=DataSource[k].typename
        avglinevalue.value=DataSource[k].alertqty
        areadataone.push(avglinevalue)
        avglinevalue={}
      }
    }

     // 所有设备一段时间TOP10报警分布
     let allavglinevalue = {}
     let areadatatwo = []
     for (let k = 0; k < DataSource.length; k++) {
       if (DataSource[k].dispart == 3) {
         allavglinevalue.alerttype = DataSource[k].alertname
         allavglinevalue.date=DataSource[k].typename
         allavglinevalue.value=DataSource[k].alertqty
         areadatatwo.push(allavglinevalue)
         allavglinevalue={}
       }
     }
    this.setState(
      {
        areadataone:areadataone,
        areadatatwo:areadatatwo,
        linedata:linedata,
        curmacstatus: datavalues,
      }, () => {
        this.chartRender();
      }
    )
    } catch (error) {
      console.error(error.message);
      console.error(error.stack);
    }
  }

  getdevice = (el, index) => {
    var devtype=this.state.gddata.fun[index].devcode
    console.log(devtype)
    this.setState({
      mac: devtype
    },()=>{
      this.onOk();
     });
  }

  chartRender = () => {
    this.StockageData(this.state.datapie)
    this.StockageData2(this.state.linedata)
    this.StockageData3(this.state.areadataone)
    this.StockageData4(this.state.areadatatwo)
  }

  StockageData = (data) => {
    try {
      var chart = new F2.Chart({
        id: 'mountNode1',
        pixelRatio: window.devicePixelRatio,
        plugins: PieLabel
      });
    
      chart.source(data);
      chart.coord('polar', {
        transposed: true,
        radius: 0.75
      });
      chart.legend(false);
      chart.axis(false);
      chart.tooltip(false);
    
      // 添加饼图文本
      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(0)+"%",
            fill: '#808080',
            fontWeight: 'bold'
          };
        }
      });
      chart.interval().position('aa*percent').color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0','#2340FF', '#344CC2', '#00025B', '#EEE014']).adjust('stack');
      chart.render();
    } catch (error) {
      console.error(error.message)
    }
  }

  StockageData2 = (linedata) => {
    var chart = new F2.Chart({
      id: 'mountNode2',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(linedata, {
      date: {
        type: 'cat',
        range: [0, 1],
        tickCount: 4,
      },
      value: {
        tickCount: 7,
        formatter: function formatter(ivalue) {
          return ivalue;
        }
      }
    });
    chart.axis('date', {
      line: null,
      label: function label(text, index, total) {
        var textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    chart.axis('tem', {
      grid: function grid(text) {
        if (text === '0%') {
          return {
            lineDash: null,
            lineWidth: 1
          };
        }
      }
    });
    chart.legend({
      position: 'bottom',
      offsetY: -5
    });
    chart.line().position('date*value').color('type').shape('type', function (type) {
    });
    chart.render();
  }

  StockageData3 = (data) => {
    var chart = new F2.Chart({
      id: 'areaOne',
      pixelRatio: window.devicePixelRatio
    });

    chart.source(data, {
      date: {
        range: [0, 1],
        type: 'cat',
        tickCount: 4
      },
      value: {
        max: 30,
        tickCount: 7
      }
    });
    chart.axis('date', {
      label: function label(text, index, total) {
        var textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    chart.area().position('date*value').color('alerttype').adjust('stack');
    chart.line().position('date*value').color('alerttype').adjust('stack');
    chart.render();
  }

  StockageData4 = (data) => {
    var chart = new F2.Chart({
      id: 'areaTwo',
      pixelRatio: window.devicePixelRatio
    });

    chart.source(data, {
      date: {
        range: [0, 1],
        type: 'cat',
        tickCount: 4
      },
      value: {
        max: 30,
        tickCount: 7
      }
    });
    chart.axis('date', {
      label: function label(text, index, total) {
        var textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    chart.area().position('date*value').color('alerttype').adjust('stack');
    chart.line().position('date*value').color('alerttype').adjust('stack');
    chart.render();}

  render() {
    return (
      <div key={"key1"} style={{ height: '100%' }}>
        <WingBlank size="lg">
        <WhiteSpace size="lg" />
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title="机台警报"
            />
            <Card.Body >
              <div>
                <Grid data={this.state.gddata.data}
                  columnNum={5}
                  hasLine={false}
                  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.level == 0 ? 'blue' : 'red' }}>{dataItem.text}</div>} </span>
                      </div>
                    </div>
                  )}
                  onClick={this.getdevice}
                />
              </div>
            </Card.Body>
          </Card>
          <WhiteSpace size="lg" />

          <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" />
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={this.state.mac+"机台今"+this.state.typech+"警报数据"}
            />
            <Card.Body  >
              <div>
                {this.state.alertstatus && this.state.alertstatus.length > 0 ? this.state.alertstatus.map(dataItem =>
                  <div >
                    <div style={{ marginTop: 2 }}>机台：{dataItem.devcode}  </div>
                    <div>警报名称：{dataItem.alertname}</div>
                    <div>开始时间：{dataItem.creatime} </div>
                    <div>结束时间：{dataItem.closetime}</div>
                    <div>持续时间(小时)：{dataItem.livetime}</div>
                    <div>当前状态：{dataItem.levelname}</div>
                    
                    <br />
                  </div>
                ) : "没有数据"}

              </div>
            </Card.Body>
          </Card>

          <WhiteSpace size="lg" />
    
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={this.state.mac+"机台今"+this.state.typech+"警报数据占比"}
            />
            <Card.Body>
              <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                <canvas id={"mountNode1"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>
            </Card.Body>
          </Card>
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={"最近6"+this.state.typech+this.state.mac+"机台与所有机台平均警报数对比"}
            />
            <Card.Body >
              <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                <canvas id={"mountNode2"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>
            </Card.Body>
          </Card>

          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={this.state.mac+"机台最近6"+this.state.typech+"警报分布"}
            />
            <Card.Body >
              <div style={{ width: "100%", height: "400px", margin: "0 auto" }}>
                <canvas id={"areaOne"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>
            </Card.Body>
          </Card>
          
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={"所有机台近6"+this.state.typech+"平均报警分布面积图"}
            />
            <Card.Body >
              <div style={{ width: "100%", height: "400px", margin: "0 auto" }}>
                <canvas id={"areaTwo"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>
            </Card.Body>
          </Card>

        </WingBlank>
        <WhiteSpace size="lg" />
      </div>
    )
  }
}