import React from 'react'
import 'antd-mobile/dist/antd-mobile.css';
import { CNavBar } from '../common/navbar.jsx';
import { Button, Flex, Card, List, WingBlank, WhiteSpace, Badge, DatePicker } from 'antd-mobile';
import { Http } from '../../Utils/help'
import Format from '../../Utils/NumericFormat';
import $ from 'jquery';
import PropTypes from 'prop-types';

//import '../dashboard/less/list.less';

const F2 = require('@antv/f2');
const Item = List.Item;
const Brief = Item.Brief;

export default class CostOEEMap extends React.Component {
   constructor(props, context) {
      super(props, context);
      // const { func } = this.props.location.state;
      this.StockageData = this.StockageData.bind(this);
      this.StockageData2 = this.StockageData2.bind(this);
      this.state = {
         // func: func,
         data: [],
         oeedata: [],
         timedata: [],
         speeddata: [],
      }
   }

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

      this.dataAjax = Http.getJSON2("/ds/data/costmap/kb_costbyoee").done((result) => {
         try {
            this.setState(
               {
                  oeedata: this.packageing(result, 'oee'),
                  timedata: this.packageing(result, 'time'),
                  speeddata: this.packageing(result, 'speed'),
               }, () => {
                  console.log(this.state.oeedata)
                  console.log(this.state.timedata)
                  console.log(this.state.speeddata)
                  this.chartRender();
               }
            )
         } catch (error) {
            console.error(error.message);
            console.error(error.stack);
         }
      })

      this.dataAjax2 = Http.getJSON2("/ds/data/maintain/maintaindata").done((result) => {
         try {
            this.setState(
               {
                  data: result,
               }, () => {
                  console.log(this.state.data)
                  this.chartRender();
               }
            )
         } catch (error) {
            console.error(error.message);
            console.error(error.stack);
         }
      })
   }

   //数据重新封装
   packageing = (values, sign) => {
      console.log("packageing--" + sign);
      var vdata = []
      if (values.length && values.length > 0) {
         for (let i = 0; i < values.length; i++) {
            const element = values[i]
            if (sign === 'oee') {
               vdata.push({ 'ddate': element.ddate, 'type': '日成本', 'value': element.日成本 })
               vdata.push({ 'ddate': element.ddate, 'type': '日有效成本', 'value': element.日有效成本 })
            } else if (sign === 'time') {
               vdata.push({ 'ddate': element.ddate, 'type': '日成本', 'value': element.日成本 })
               vdata.push({ 'ddate': element.ddate, 'type': '日有效时间成本', 'value': element.日有效时间成本 })
            } else if (sign === 'speed') {
               vdata.push({ 'ddate': element.ddate, 'type': '日成本', 'value': element.日成本 })
               vdata.push({ 'ddate': element.ddate, 'type': '日有效性能成本', 'value': element.日有效性能成本 })
            }
         }
      }

      return vdata;
   }

   chartRender = () => {
      console.log("chartrender...")
      this.StockageData(this.state.oeedata, 'oee')

      this.StockageData(this.state.timedata, 'time')

      this.StockageData(this.state.speeddata, 'speed')

      this.StockageData2(this.state.data)
   }

   StockageData = (senddata, sign) => {
      // console.log(i);
      //F2 绘制图表
      F2.Global.pixelRatio = window.devicePixelRatio;
      const chart = new F2.Chart({
         id: sign,
         padding: ['auto', 'auto', 40, 'auto']
      });
      try {
         chart.source(senddata, {
            ddate: {
               type: 'timeCat',
               tickCount: 6,
               range: [0, 1],
               mask: 'MM-DD',
               size: 3
            },
            value: {
               min: 0,
               tickCount: 6,
            },
         });
         //自定义提示信息Tooltip
         chart.tooltip({
            showItemMarker: false,
            showXTip: true,
         });
      } catch (error) {
         console.error(error.message)
      }

      //将数据值映射到图形
      chart.line().position('ddate*value').color('type').size(2).shape('smooth');
      chart.point().position('ddate*value').color('type').size(2).shape('smooth');
      //渲染图表
      chart.render();
   }

   StockageData2 = (senddata) => {
      F2.Global.pixelRatio = window.devicePixelRatio;
      const chart = new F2.Chart({
         id: "maintain",
         padding: ['auto', 'auto', 40, 'auto']
      });

      try {
         chart.source(senddata, {
            ddate: {
               type: 'timeCat',
               tickCount: 6,
               range: [0, 1],
               mask: 'MM-DD',
               size: 3
            },
            次数: {
               min: 0,
               tickCount: 6,
            },
            时长: {
               min: 0,
               tickCount: 6,
            },
         });
         chart.legend({
            custom: true,
            items: [
               {
                  name: "时长",
                  fill: '#fdae6b',
               },
               {
                  name: "次数",
                  fill: '#3182bd',
               },
            ]
         });
         //自定义提示信息Tooltip
         chart.tooltip({
            showItemMarker: false,
            showXTip: true,
         });
      } catch (error) {
         console.error(error.message)
      }
      //将数据值映射到图形
      chart.interval().position('ddate*次数').color('#3182bd');
      chart.line().position('ddate*时长').color('#fdae6b').size(2).shape('smooth');
      chart.point().position('ddate*时长').color('#fdae6b').size(2).shape('smooth');
      //渲染图表
      chart.render();
   }

   render() {
      return (
         <div key={"key1"} style={{ height: '100%' }}>
            <WhiteSpace size="sm" />
            <WingBlank key="1" size="sm">
               <Card key="card1">
                  <Card.Header
                     title={"OEE有效成本"}
                  />
                  <Card.Body>
                     <div key="body1" style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                     {  
                        this.state.oeedata&&this.state.oeedata.length>0?
                        <canvas id={"oee"} style={{ width: "100%", height: "100%" }}></canvas>
                        :
                        <div style={{textAlign:'center'}}>
                           <p>暂无数据</p>
                        </div>
                     }
                     </div>
                    
                  </Card.Body>
               </Card>
            </WingBlank>
            <WhiteSpace size="sm" />
            <WingBlank key="2" size="sm">
               <Card key="card2">
                  <Card.Header
                     title={"时间有效成本"}
                  />
                  <Card.Body>
                     <div key="body2" style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                     {
                        this.state.timedata && this.state.timedata.length > 0 ?
                        <canvas id={"time"} style={{ width: "100%", height: "100%" }}></canvas>
                        :
                        <div style={{textAlign:'center'}}>
                           <p>暂无数据</p>
                        </div>
                     }
                     </div>
                  </Card.Body>
               </Card>
            </WingBlank>
            <WhiteSpace size="sm" />
            <WingBlank key="3" size="sm">
               <Card key="card3">
                  <Card.Header
                     title={"性能有效成本"}
                  />
                  <Card.Body>
                     <div key="body3" style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                        {
                           this.state.speeddata&& this.state.speeddata.length > 0 ?
                           <canvas id={"speed"} style={{ width: "100%", height: "100%" }}></canvas>
                           :
                           <div style={{textAlign:'center'}}>
                              <p>暂无数据</p>
                           </div>
                        }
                        
                     </div>
                  </Card.Body>
               </Card>
            </WingBlank>
            <WhiteSpace size="sm" />
            <WingBlank key="4" size="sm">
               <Card key="card4">
                  <Card.Header
                     title={"维修数据"}
                  />
                  <Card.Body>
                     <div key="body4" style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                        {this.state.data&&this.state.data.length ?
                        <canvas id={"maintain"} style={{ width: "100%", height: "100%" }}></canvas>
                        :
                        <div style={{textAlign:'center'}}>
                           <p>暂无数据</p>
                        </div>
                        }
                     </div>
                  </Card.Body>
               </Card>
            </WingBlank>
            <WhiteSpace size="sm" />
         </div>
      )
   }
}


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