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

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

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

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

  componentDidUpdate() {
  }

  componentDidMount() {
    this.dataAjax.done((macstatus) => {
      console.log("机台数据：", macstatus)
      console.log("macstatus devcode",macstatus[0].devcode)
      var singledev=[]
      singledev.push(macstatus[0])
      console.log(singledev)
      this.setState(
        {
          singledev: singledev,
          macstatus: macstatus,
        }, () => {
          console.log('进入')
         // this.chartRender();
          this.makeData(macstatus);
        }
      )
      console.log("一个机台2：", this.state.singledev)
      if(macstatus.length>0){
        console.log(this.state.mac)
        var thisdevcode=this.state.mac?this.state.mac:macstatus[0].devcode
        this.setState(
          {
            mac: thisdevcode,
          },()=>{
            console.log(this.state.mac)
            this.dataAjax2 = Http.getJSON2("ds/data/kbmacruncon/kbmacswitch", { "devcode": this.state.mac, "type": 'DAY' }).done((DataSource) => {
              console.log("机台数据1：", DataSource)
              try {
              //饼图数据
              var allvalue = 0
              if(DataSource&&DataSource.length>0){
              DataSource.map(dataItem => {
                if (dataItem.cursta == 2) {
                  allvalue += dataItem.statime
                }
              })
            }
              console.log("allvalue:", allvalue)
              let datavalue = {}
              let datavaules = []
              var percent = 0
              for (let i = 0; i < DataSource.length; i++) {
                if (DataSource[i].cursta == 2) {
                  console.log(DataSource[i])
                  datavalue.name = DataSource[i].staname
                  datavalue.aa = "1"
                  datavalue.allvalue = allvalue
                  datavalue.value = DataSource[i].statime
                  percent = (datavalue.value * datavalue.aa) / allvalue
                  datavalue.percent = (Number)(percent.toFixed(2))
                  datavaules.push(datavalue)
                  datavalue = {}
                }
              }
        
              //当前机台7日曲线图数据
              let linevalue = {}
              let linedata = []
              for (let j = 0; j < DataSource.length; j++) {
                if (DataSource[j].cursta == 1) {
                  linevalue.type = DataSource[j].staname
                  linevalue.value = DataSource[j].statime
                  linevalue.date = DataSource[j].typename
                  linedata.push(linevalue)
                  linevalue = {}
                }
              }
        
              //所有机台7日平均曲线图数据
              let avglinevalue = {}
              let avglinedata = []
              for (let k = 0; k < DataSource.length; k++) {
                if (DataSource[k].cursta == 0) {
                  avglinevalue.type = DataSource[k].staname
                  avglinevalue.value = DataSource[k].statime
                  avglinevalue.date = DataSource[k].typename
                  avglinedata.push(avglinevalue)
                  avglinevalue = {}
                }
              }
        
              //当前机台和所有机台7日平均数据对比柱形图
              let comparevalue = {}
              let comparedata = []
              for (let m = 0; m < DataSource.length; m++) {
                if (DataSource[m].devcode == "ALL") {
                  comparevalue.type = "平均" + DataSource[m].staname
                  comparevalue.value = DataSource[m].statime
                  comparevalue.date = DataSource[m].typename
                  comparedata.push(comparevalue)
                  comparevalue = {}
                }
                else {
                  comparevalue.type = DataSource[m].staname
                  comparevalue.value = DataSource[m].statime
                  comparevalue.date = DataSource[m].typename
                  comparedata.push(comparevalue)
                  comparevalue = {}
                }
              }
        
              this.setState(
                {
                  curmacstatus: datavaules,
                  linedata: linedata,
                  avglinedata: avglinedata,
                  comparedata: comparedata,
                }, () => {
                  this.chartRender();
                }
              )
              } catch (error) {
                console.error(error.message);
                console.error(error.stack);
              }
            });
          }
        )
      }
      try {
      // var singledev=[]
      // singledev.push(macstatus[0])
      // console.log(singledev)
      // this.setState(
      //   {
      //     singledev: singledev,
      //     macstatus: macstatus,
      //   }, () => {
      //     this.chartRender();
      //     this.makeData(macstatus);
      //   }
      // )
      // console.log("一个机台2：", this.state.singledev)
      } catch (error) {
        console.error(error.message);
        console.error(error.stack);
      }
    })
  }

  makeData = (funcs) => {
    console.log('进入makeData')
    console.log(funcs)
    if (!funcs || !Array.isArray(funcs)) {
      return;
    }
    let func = {};
    funcs.map((data, index) => {
      // console.log("data数据：",data)
      let nd = {};
      let imgp;
      imgp = data.status == '0' ? 'h2.png' : data.status != '0' ? (data.status == '1' ? 'green1.png' : 'h3.png') : 'h2.png';
      nd["icon"] = require('../../images/' + imgp);
      nd["text"] = data.devcode
      nd["status"] = data.status
      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/kbmacruncon/kbmacsta", {}, this.onAjaxDone3);
    this.dataAjax = Http.getJSON2("ds/data/kbmacruncon/kbmacswitch", { "devcode": this.state.mac, "type": this.state.type }, this.onAjaxDone);
  }

  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月',
    },()=>{
        this.onOk();
      });
    }
  };
  onAjaxDone3 = (DataSource) => {
    console.log(DataSource)
    var devicecode=this.state.mac
    var linedata=[]
    for(var i=0;i<DataSource.length;i++){
      if (DataSource[i].devcode == devicecode) {
        linedata.push(DataSource[i])
      }
    }
    console.log(linedata)
    try {
    this.setState(
      {
        singledev: linedata,
      }, () => {
        this.chartRender();
      }
    )
    } catch (error) {
      console.error(error.message);
      console.error(error.stack);
    }
  }

  onAjaxDone = (DataSource) => {
    console.log("DataSource:",DataSource)
    try {
    //饼图数据
    var allvalue = 0
    if(DataSource&&DataSource.length>0){
    DataSource.map(dataItem => {
      if (dataItem.cursta == 2) {
        allvalue += dataItem.statime
      }
    })
  }
    let datavalue = {}
    let datavaules = []
    var percent = 0
    for (let i = 0; i < DataSource.length; i++) {
      if (DataSource[i].cursta == 2) {
        datavalue.name = DataSource[i].staname
        datavalue.aa = "1"
        datavalue.allvalue = allvalue
        datavalue.value = DataSource[i].statime
        percent = (datavalue.value * datavalue.aa) / allvalue
        datavalue.percent = (Number)(percent.toFixed(2))
        datavaules.push(datavalue)
        datavalue = {}
      }
    }

    //当前机台6日曲线图数据
    console.log(newdata)
    var newdata=DataSource
    let linevalue = {}
    let linedata = []
    for (let j = 0; j < DataSource.length; j++) {
      if (DataSource[j].cursta == 1) {
        console.log("DataSource[j]:",DataSource[j])
        linevalue.type = DataSource[j].staname
        linevalue.value = DataSource[j].statime
        linevalue.date = DataSource[j].typename
        linedata.push(linevalue)
        linevalue = {}
        console.log("linedata:",linedata)
      }
    }

    //所有机台6日平均曲线图数据
    let avglinevalue = {}
    let avglinedata = []
    for (let k = 0; k < DataSource.length; k++) {
      if (DataSource[k].cursta == 0) {
        avglinevalue.type = DataSource[k].staname
        avglinevalue.value = DataSource[k].statime
        avglinevalue.date = DataSource[k].typename
        avglinedata.push(avglinevalue)
        avglinevalue = {}
      }
    }

    //当前机台和所有机台6日平均数据对比柱形图
    let comparevalue = {}
    let comparedata = []
    for (let m = 0; m < DataSource.length; m++) {
      if (DataSource[m].devcode == "ALL") {
        comparevalue.type = "平均" + DataSource[m].staname
        comparevalue.value = DataSource[m].statime
        comparevalue.date = DataSource[m].typename
        comparedata.push(comparevalue)
        comparevalue = {}
      }
      else {
        comparevalue.type = DataSource[m].staname
        comparevalue.value = DataSource[m].statime
        comparevalue.date = DataSource[m].typename
        comparedata.push(comparevalue)
        comparevalue = {}
      }
    }

    this.setState(
      {
        curmacstatus: datavaules,
        linedata: linedata,
        avglinedata: avglinedata,
        comparedata: comparedata,
      }, () => {
        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.curmacstatus)
    this.StockageData2(this.state.linedata)
    this.StockageData3(this.state.avglinedata)
    this.StockageData4(this.state.comparedata)
  }
  StockageData = (data) => {
    try {
      var chart = new F2.Chart({
        id: 'mountNode1',
        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(0) + "%",
            fill: '#808080',
            fontWeight: 'bold'
          };
        }
      });

      chart.tooltip(false);
      chart.coord('polar', {
        transposed: true,
        radius: 0.75
      });
      chart.axis(false);
      ['#2FC25B', '#FACC14', '#F04864']
      chart.interval().position('aa*percent').color('name',function(name){
       if(name==='开机'){
         return '#32CD32'
       }
       if(name==='待机'){
         return '#FFD700'
       }
       if(name==='关机'){
         return '#BEBEBE'
       }  
      }).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)
    }
  }

  StockageData2 = (linedata) => {
    console.log("linedata:",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',function(type){
      if(type==='开机'){
        return '#32CD32'
      }
      if(type==='待机'){
        return '#FFD700'
      }
      if(type==='关机'){
        return '#BEBEBE'
      }  
     }).shape('type', function (type) {
    });
    chart.render();
  }

  StockageData3 = (avglinedata) => {
    var chart = new F2.Chart({
      id: 'mountNode3',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(avglinedata, {
      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',function(type){
      if(type==='开机'){
        return '#32CD32'
      }
      if(type==='待机'){
        return '#FFD700'
      }
      if(type==='关机'){
        return '#BEBEBE'
      }  
     }).shape('type', function (type) {
    });
    chart.render();
  }

  StockageData4 = (comparedata) => {
    var chart = new F2.Chart({
      id: 'mountNode4',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(comparedata, {
      date: {
        type: 'cat',
        tickCount: 5,
      },
      value: {
        tickInterval: 50
      }
    });
    chart.coord({
      transposed: true
    });
    chart.axis('date', {
      line: F2.Global._defaultAxis.line,
      grid: null
    });
    chart.axis('value', {
      line: null,
      grid: F2.Global._defaultAxis.grid,
      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.interval().position('date*value').color('type',function(type){
      if(type==='开机'){
        return '#32CD32'
      }
      if(type==='待机'){
        return '#FFD700'
      }
      if(type==='关机'){
        return '#BEBEBE'
      }  
      if(type==='平均开机'){
        return '#00BFFF'
      }
      if(type==='平均关机'){
        return '#B22222'
      }
      if(type==='平均待机'){
        return '#FF69B4'
      }
     }).adjust({
      type: 'dodge',
      marginRatio: 1 / 32
    });
    chart.render();
  }

  //title={this.state.mac&&this.state.mac.length>0?this.state.mac[0]:""+"机台当日开关机数据"}
  render() {
    return (
      <div key={"key1"} style={{ height: '100%' }}>
        <WingBlank size="lg">
          <WhiteSpace size="lg" />
          <Card style={{ marginTop: 5 }} >
            <Card.Header
              title="机台状态"
            />
            <Card.Body >
              {console.log(this.state.gddata.data)}
              {console.log(this.state.gddata)}
              {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: '60%', height: '60%', marginTop: '2px' }} />
                      <div style={{ fontSize: '12px', marginTop: '0px' }}>
                        <span>{<div style={{ color: dataItem.status == 1 ? 'blue' : 'red' }}>{dataItem.text}</div>} </span>
                      </div>
                    </div>
                  )}
                  onClick={this.getdevice}
                />
              </div>
              :
              <div style={{ textAlign:'center'}}>
              <p>暂无数据</p>
              </div>
              }
            </Card.Body>
          </Card>

          <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="lg" />
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={this.state.mac+"机台"+this.state.typech+"开关机数据"}
            />
            <Card.Body >
              <div>
                {console.log(this.state.singledev)}
                {this.state.singledev && this.state.singledev.length > 0 ? this.state.singledev.map(dataItem =>
                  <div >
                    <div style={{ marginTop: 2 }}>机台：{dataItem.devcode}  </div>
                    <div>状态：{dataItem.staname}</div>
                    <div>开始时间：{dataItem.stime} </div>
                    <div>持续时间(小时)：{dataItem.delaytime}</div>
                    <br />
                  </div>
                ) : <div style={{textAlign:"center"}}>{"暂无数据"}</div>}

              </div>
            </Card.Body>
          </Card>
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={this.state.mac+"机台"+this.state.typech+"开机时间占比"}
            />
            <Card.Body>
              <div>
            {this.state.curmacstatus&&this.state.curmacstatus.length>0?
              <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                <canvas id={"mountNode1"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>
              :<div style={{textAlign:"center"}}>{"暂无数据"}</div>}
              </div>
            </Card.Body>
            </Card>
           
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={this.state.mac+"机台最近"+this.state.typech+"开关机数据"}
            />
            <Card.Body >
              {this.state.linedata&&this.state.linedata.length>0?
              <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                <canvas id={"mountNode2"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>
               :<div style={{textAlign:"center"}}>{"暂无数据"}</div>} 
             
            </Card.Body>
          </Card>
          
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={"所有机台最近"+this.state.typech+"平均开关机数据"}
            />
            <Card.Body >
            {/*加了球形图表不能显示  */}
            {this.state.avglinedata&&this.state.avglinedata.length>0?
              <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                <canvas id={"mountNode3"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>
               :<div style={{textAlign:"center"}}>{"暂无数据"}</div>} 
            </Card.Body>
          </Card>
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={"最近"+this.state.typech+this.state.mac+"机台与所有机台平均数据对比"}
            />
            <Card.Body >
            {/*加了球形图表不能显示  */}
            {this.state.comparedata&&this.state.comparedata.length>0?
              <div style={{ width: "100%", height: "500px", margin: "0 auto" }}>
                <canvas id={"mountNode4"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>
               :<div style={{textAlign:"center"}}>{"暂无数据"}</div>} 
            </Card.Body>
          </Card>
        </WingBlank>
        <WhiteSpace size="lg" />
      </div>
    )
  }
}