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

const F2 = require('@antv/f2');

export default class Todayopen extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.StockageData = this.StockageData.bind(this);
    this.state = {
      mac: "",
      openAccordion: [],
      openAccordion2: [],
      type: 1,
      tag: { 1: 'primary' },
      newdata: []
    }
  }

  //取得json数据集
  componentWillMount() {
    window.conditionarr=[]
    // this.dataAjax = Http.getJSON2("ds/data/macswitch/todaymacswitch",{"type":1});
    this.dataAjax = Http.getJSON2("ds/data/test/todayopen");
  }

  componentDidUpdate() {
  }

  componentDidMount() {

    this.dataAjax.done((todaymacswitch) => {
      console.log("机台数据：", todaymacswitch)
      //柱形图
      let macswitch = {}
      let macswitchdata = []
      // 手风琴
      let Accordion = {}
      let Accordiondata = []
      if (todaymacswitch && todaymacswitch.length > 0) {
        for (let m = 0; m < todaymacswitch.length; m++) {
          if (todaymacswitch[m].dissta == 2) {
            macswitch = todaymacswitch[m]
            macswitchdata.push(macswitch)
            macswitch = {}
          }

          else if (todaymacswitch[m].dissta == 1) {
            Accordion = todaymacswitch[m]
            Accordiondata.push(Accordion)
            Accordion = {}
          }
        }
      }
      var todayopen = this.packageing(Accordiondata)
      var todayopen2 = this.packageings(todayopen)
      console.log("todayopen2:", todayopen2)

      this.setState(
        {
          macswitchdata: macswitchdata,
          Accordiondata: Accordiondata,
          newdata: todayopen2
        }, () => {
          this.chartRender();
        }
      )
    }
    )
    console.log("componentDidMount--");
  }
  toTop = () => {
    document.getElementById("top").scrollIntoView(true)
  }

  chartRender = () => {
    console.log("chartrender...")
    this.StockageData(this.state.macswitchdata)
  }

  StockageData = (macswitchdata) => {
    var chart = new F2.Chart({
      id: 'histogram',
      pixelRatio: window.devicePixelRatio,
    });
    chart.source(macswitchdata, {
      '今日开机': {
        tickCount: 5
      },
    });

    chart.tooltip({
      onShow: this.onShow,
    });

    chart.interval().position('mactype*statime').color('staname', function (staname) {
      if (staname === '开机') {
        return '#489304'
      }
      if (staname === '待机') {
        return '#e0b71a'
      }
      if (staname === '关机') {
        return '#EE0000'
      }
    }).adjust('stack');
    chart.render();
  }

  onOk = () => {
    //数据用于列表
    // this.dataAjax = Http.getJSON2("ds/data/macswitch/todaymacswitch",{"type":this.state.type}, this.onAjaxDone3);
    this.dataAjax = Http.getJSON2("ds/data/test/todayopen", this.onAjaxDone3);
  }

  onAjaxDone3 = (todaymacswitch) => {
    console.log("机台数据：", todaymacswitch)
    //柱形图
    let macswitch = {}
    let macswitchdata = []
    // 手风琴
    let Accordion = {}
    let Accordiondata = []
    if (todaymacswitch && todaymacswitch.length > 0) {
      for (let m = 0; m < todaymacswitch.length; m++) {
        if (todaymacswitch[m].dissta == 2) {
          macswitch = todaymacswitch[m]
          macswitchdata.push(macswitch)
          macswitch = {}
        }

        else if (todaymacswitch[m].dissta == 1) {
          Accordion = todaymacswitch[m]
          Accordiondata.push(Accordion)
          Accordion = {}
        }
      }
    }

    var datas = this.packageing(Accordiondata)
    console.log("datas:", datas)
    this.setState(
      {
        macswitchdata: macswitchdata,
        Accordiondata: Accordiondata,
        todayopen: this.packageing(Accordiondata)

      }, () => {
        this.chartRender();
      }
    )
  }

  onChange = (value) => {
    if (value !== this.state.type) {
      let tag = this.state.tag
      tag = {}
      tag[value] = 'primary'
      this.setState({
        tag: tag,
        type: value,
      }, () => {
        this.onOk();
      });
    }
  };

  onShow = (obj) => {
    console.log(typeof (obj))
    if (typeof (obj) == 'string') {
      this.setState({
        openAccordion: obj,
      })
    }

    if (typeof (obj) == 'object') {
      var items = obj.items;
      var title = '';
      if (items && JSON.stringify(items) !== '[]') {
        items.map((val, ind) => {
          title = val.title;
          items[ind].name = items[ind].name;
          items[ind].value = items[ind].value;
        })
        this.setState({
          openAccordion: title
        })
      }
    }
    else if (obj == this.state.openAccordion || obj == undefined) {
      this.setState({
        openAccordion: [],
      })
    }
  }

  onShow2 = (obj) => {
    console.log(typeof (obj))
    if (typeof (obj) == 'string') {
      this.setState({
        openAccordion2: obj,
      })
    }

    if (typeof (obj) == 'object') {
      var items = obj.items;
      var title = '';
      if (items && JSON.stringify(items) !== '[]') {
        items.map((val, ind) => {
          title = val.title;
          items[ind].name = items[ind].name;
          items[ind].value = items[ind].value;
        })
        this.setState({
          openAccordion2: title
        })
      }
    }
    else if (obj == this.state.openAccordion2 || obj == undefined) {
      this.setState({
        openAccordion2: [],
      })
    }
  }

  packageings = (values) => {
    console.log("valuessssssss:", values)
    var vdate = '';
    if (values && values.length > 0) {
      var code = "";
      for (let i = 0; i < values.length; i++) {
        if (values[i].workshopid != code) {
          vdate = vdate.substring(0, vdate.length - 1) + ']},{"workshopname":"' + values[i].workshopname + '","data":[' + JSON.stringify(values[i]) + ',';
          code = values[i].workshopid;
        } else {
          vdate = vdate + (JSON.stringify(values[i])) + ',';
        }
      }
      if (vdate === '') {
        vdate = '{}'
      } else {
        vdate = '[' + vdate.substring(3, vdate.length - 1) + ']}]';
      }
      vdate = JSON.parse(vdate)
    }
    console.log("vdate:", vdate)
    return vdate;
  }

  packageing = (values) => {
    var vdate = '';
    if (values && values.length > 0) {
      var code = "";
      for (let i = 0; i < values.length; i++) {
        if (values[i].mactype != code) {
          vdate = vdate.substring(0, vdate.length - 1) + ']},{"workshopid":"' + values[i].workshopid + '" ,"workshopname":"' + values[i].workshopname + '","mactypename":"' + values[i].mactypename + '","mactype":"' + values[i].mactype + '","datadetail":[' + JSON.stringify(values[i]) + ',';
          code = values[i].mactype;
        } else {
          vdate = vdate + (JSON.stringify(values[i])) + ',';
        }
      }
      if (vdate === '') {
        vdate = '{}'
      } else {
        vdate = '[' + vdate.substring(3, vdate.length - 1) + ']}]';
      }
      vdate = JSON.parse(vdate)
    }
    console.log("vdate:", vdate)
    return vdate;
  }

  onClickLink = (val, code) => {
    const { router } = this.context;
    router.push({
      pathname: '/macstatusnowinfo',
      state: {
        code: code,
        type: this.state.type,
      }
    });
  }

  render() {
    return (
      <div key={"key1"} style={{ height: '100%' }}>
        <WhiteSpace size="md" />
        <WingBlank size="md">
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title="各机型今日开机"
            />
            <Card.Body>
                {this.state.macswitchdata&&this.state.macswitchdata.length>0? 
              <div  style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                <canvas id={"histogram"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>
              :<div style={{textAlign:"center"}}>{"暂无数据"}</div>} 
            </Card.Body>
          </Card>
        </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.newdata && this.state.newdata.length > 0 ? "auto" : "20px", margin: "0 auto" }}>
            <Accordion accordion openAnimation={{}} className="my-accordion" activeKey={this.state.openAccordion} onChange={this.onShow}>
              {this.state.newdata && this.state.newdata.length > 0 ? this.state.newdata.map((dataItem) =>
                <Accordion.Panel key={dataItem.workshopname} header={dataItem.workshopname}>
                  <Accordion accordion openAnimation={{}} className="my-accordion" activeKey={this.state.openAccordion2} onChange={this.onShow2}>
                    {dataItem.data && dataItem.data.length > 0 ? dataItem.data.map((dataItem2, index) =>
                      <Accordion.Panel key={dataItem2.mactype} header={dataItem2.mactype+"-"+dataItem2.mactypename}>
                        <div key={"divvalue" + index}>
                          <div key={"jt" + index} style={{ fontSize: '14px', textAlign: 'center', marginLeft: '4px', marginTop: '6px', width: '30%', height: '25px', float: 'left' }}>机台</div>
                          <div key={"runtime" + index} style={{ fontSize: '14px', textAlign: 'center', marginTop: '6px', width: '20%', float: 'left', height: '25px' }}>运行时间</div>
                          <div key={"lasttime" + index} style={{ fontSize: '14px', textAlign: 'center', marginTop: '6px', width: '20%', float: 'left', height: '25px' }}>持续时间</div>
                          <div key={"closetime" + index} style={{ fontSize: '14px', textAlign: 'center', marginTop: '6px', width: '20%', float: 'left', height: '25px' }}>关闭时间</div>
                        </div>
                        <div>
                          {
                            dataItem2.datadetail && dataItem2.datadetail.length > 0 ? dataItem2.datadetail.map((macdetail, ind) =>
                              <div>
                                <div key={"jts" + ind} style={{ backgroundColor: ind % 2 > 0 ? '' : '#FDF5E6', fontSize: '14px', textAlign: 'center', marginLeft: '4px', marginTop: '6px', width: '30%', height: '25px', float: 'left' }} onClick={() => this.onClickLink('todayopen', macdetail.devcode)}><u>{macdetail.devcode}</u></div>
                                <div key={"runtimes" + ind} style={{ backgroundColor: ind % 2 > 0 ? '' : '#FDF5E6', fontSize: '14px', textAlign: 'center', marginTop: '6px', width: '20%', height: '25px', float: 'left' }}>{macdetail.runtime}</div>
                                <div key={"lasttimes" + ind} style={{ backgroundColor: ind % 2 > 0 ? '' : '#FDF5E6', fontSize: '14px', textAlign: 'center', marginTop: '6px', width: '20%', height: '25px', float: 'left' }}>{macdetail.standtime}</div>
                                <div key={"closetimes" + ind} style={{ backgroundColor: ind % 2 > 0 ? '' : '#FDF5E6', fontSize: '14px', textAlign: 'center', marginTop: '6px', width: '20%', height: '25px', float: 'left' }}>{macdetail.closetime}</div>
                              </div>
                            ) : "没有数据"}
                        </div>
                      </Accordion.Panel>
                    ) : "没有机型"
                    }
                  </Accordion>
                </Accordion.Panel>
              ) : <div style={{ paddingTop: 10, backgroundColor: "#fff", height: "30px", textAlign: "center" }}>没有数据</div>}
            </Accordion>
          </div>
        </WingBlank>
      </div>
    )
  }
}

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