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';
import F2 from '@antv/f2';
//import PieLabel from '@antv/f2'
import Legend from '@antv/f2';

export default class speed extends React.Component{
    constructor(props){
        super(props)
       // const { func } = this.props.location.state;
        this.makeData = this.makeData.bind(this);
        this.StockageData = this.StockageData.bind(this);
        this.StockageData2 = this.StockageData2.bind(this);
        this.StockageData4 = this.StockageData4.bind(this);
        this.getdevice = this.getdevice.bind(this);
        this.onOk = this.onOk.bind(this);
        this.getDayDataAndMakeData = this.getDayDataAndMakeData.bind(this)
        this.chartRender = this.chartRender.bind(this);
        this.state = {
            //func: func,
            isLoading:false,
            //Grid selected item
            //macspeeddata:[],
            //跑马灯被选中的机台
            selecteddevice:{},
            //Grid data
            gddata:{},
            //按天请求的JSON数据
            //dayspeedall:[],
            //当天饼图数组
            dayspeed:[],
            //近七天速度折线图数组
            sevenspeedlinearray:[],
            //近七天速度分布图数组
            sevenspeeddistributionarray:[],
            //时间类型 day/week/month
            // datetype:{},
            // //时间类型中文名称
            // datetypename:'天',
            tag: {"DAY":'primary'},
            type:"DAY",
            typech:"7日",


        }
    }

    //取得JSON数据
    componentWillMount(){
        //数据用于初始加载灯和列表
        this.setState({ isLoading: true });  
        this.dataAjax = Http.getJSON2("ds/data/kbmacspeedcon/kbmacspeed")
        .done(macspeed=>{
            this.makeData(macspeed)
            console.log('macspeed:', macspeed)
            this.setState({
                    //macspeeddata:macspeed,
                    selecteddevice:macspeed.length>0?macspeed[0]:[],
                    isLoading:false
                },()=>{
                  this.onOk();
                })
            console.log('this.state.gddata',this.state.gddata)
            console.log('macspeed:', macspeed,this.state.selecteddevice)
           
        })
        
    }
    componentDidMount(){}

    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();
      });
      }
    };
    onOk = () =>{
      this.dataAjaxTopday = Http.getJSON2('ds/data/kbmacspeedcon/kbmacspeedlist', {'devcode':this.state.selecteddevice.devcode, 'type': this.state.type}, this.getDayDataAndMakeData)
    }
    getDayDataAndMakeData(topday){
      //拿到top1的天数据
      //this.setState({ isLoading: true }); 
      //this.dataAjaxTopday = Http.getJSON2('ds/data/kbmacspeedcon/kbmacspeedlist', {'devcode':this.state.selecteddevice.devcode, 'type': this.state.type})
      //.done(topday=>{
        if(topday.length>0){
        console.log("topday:", topday)
        let today = topday.filter(item => item.dispart === 0)
        console.log('today', today)
        let todayall = 0
        if(today.length>0){
          today.map(item=>todayall += item.spqty)
        }
        console.log(todayall)
        let todayitem={}
        let todayarray=[]
        today.map(item=>{
            todayitem.devcode = item.devcode
            todayitem.name = item.speedtype
            todayitem.value = item.spqty
            todayitem.aa = 1
            todayitem.allvalue = todayall
            let percent = item.spqty*todayitem.aa/todayall
            todayitem.percent = (Number)(percent.toFixed(2))
            todayarray.push(todayitem)
            todayitem = {}
         })
        console.log("todayarray", todayarray)
        
        //捞取近七天的折线图数据
        let sevenspeedlinedata = topday.filter(item => item.dispart === 1)
        let sevenspeedlineitem = {}
        let sevenspeedlinearray = []
        sevenspeedlinedata.map(item =>{
          sevenspeedlineitem.type = '上限速度'
          sevenspeedlineitem.value = item.speed_down
          sevenspeedlineitem.date = item.typename
          sevenspeedlinearray.push(sevenspeedlineitem)
          sevenspeedlineitem = {}
          sevenspeedlineitem.type = '平均速度'
          sevenspeedlineitem.value = item.avgspeed
          sevenspeedlineitem.date = item.typename
          sevenspeedlinearray.push(sevenspeedlineitem)
          sevenspeedlineitem = {}
          sevenspeedlineitem.type = '下限速度'
          sevenspeedlineitem.value = item.speed_up
          sevenspeedlineitem.date = item.typename
          sevenspeedlinearray.push(sevenspeedlineitem)
          sevenspeedlineitem = {}
        })
        console.log("sevenspeedlinearray", sevenspeedlinearray)
        

        //捞取最近七天线速度分布
        let sevenspeeddistribution = topday.filter(item => item.dispart === 2)
        let sevenspeeddistributionitem = {}
        let sevenspeeddistributionarray = []
        sevenspeeddistribution.map(item =>{
          sevenspeeddistributionitem.type = item.speedtype
          sevenspeeddistributionitem.value = item.spqty
          sevenspeeddistributionitem.date = item.typename
          sevenspeeddistributionarray.push(sevenspeeddistributionitem)
          sevenspeeddistributionitem = {}
        })

        this.setState({
          isLoading:false,
          dayspeed:todayarray,
          sevenspeedlinearray,
          sevenspeeddistributionarray,
        })
        //渲染
        this.chartRender()
      }//end of if
      //})
    }
    chartRender = () => {
      console.log("chartrender...")
      this.StockageData(this.state.dayspeed)
      this.StockageData2(this.state.sevenspeedlinearray)
      //this.StockageData3(this.state.linedata)
      this.StockageData4(this.state.sevenspeeddistributionarray)
    }
    //当天
    StockageData = (data) => {
      console.log("stockagetodaydata:",data)
      if(data && data.length>0 ){
          try {
            var map = {};
            data.map(function(obj) {
              map[obj.name] = (obj.percent*100).toFixed(2) + '%';
            });
            var chart = new F2.Chart({
              id: 'mountNode1',
              pixelRatio: window.devicePixelRatio,
              plugins: Legend,
              padding: [25, 'auto'],
            });
            //chart.clear(); // 清除
            chart.source(data, {
              percent: {
                formatter: function formatter(val) {
                  return val * 100 + '%';
                }
              }
            });
            chart.tooltip(false);
            chart.legend({
              position: 'right',
              itemFormatter: function itemFormatter(val) {
                return val + '    ' + map[val];
              }
            });
            chart.coord('polar', {
              transposed: true,
              innerRadius:0,
              radius: 0.68,
            });
            chart.axis(false);
            chart.interval().position('aa*percent').color('name', [ '#2FC25B','#FACC14','#F04864']).adjust('stack')
            


            //渲染图表
            chart.render();
      
          } catch (error) {
              console.error(error.message)
          } 
      }//end if
    } 
    //近七天折线图
    StockageData2 = (linedata) => {
      if(linedata && linedata.length>0){
      console.log('linedata', linedata)
      var chart = new F2.Chart({
        id: 'mountNode2',
        pixelRatio: window.devicePixelRatio
      });
      //chart.clear(); // 清除
      chart.source(linedata, {
        date: {
          type: 'cat',
          //mask: 'MM-DD',
          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();
      }//end if
    }
    //近七天速度统计点分布图
    StockageData4 = (comparedata) => {
      if(comparedata && comparedata.length>0){
      var chart = new F2.Chart({
        id: 'mountNode4',
        pixelRatio: window.devicePixelRatio
      });
      
      //onokchart.clear(); // 清除
      
      this.state.typech.indexOf('月')>0?
      chart.source(comparedata, {
        value: {
          tickInterval: 500
        }
      }):chart.source(comparedata, {
        value: {
          tickInterval: 150
        }
      });
      chart.coord({
        transposed: true
      });
  
      chart.tooltip({
        custom: true, // 自定义 tooltip 内容框
        onChange: function onChange(obj) {
          var legend = chart.get('legendController').legends.top[0];
          var tooltipItems = obj.items;
          var legendItems = legend.items;
          var map = {};
          legendItems.map(function (item) {
            map[item.name] = _.clone(item);
          });
          tooltipItems.map(function (item) {
            var name = item.name;
            var value = item.value;
            if (map[name]) {
              map[name].value = value;
            }
          });
          legend.setItems(_.values(map));
        },
        onHide: function onHide() {
          var legend = chart.get('legendController').legends.top[0];
          legend.setItems(chart.getLegendItems().country);
        }
      });
      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').adjust({
        type: 'dodge',
        marginRatio: 1 / 32
      });
      chart.render();
    }//end if
    }
    
    //Grid选择
    getdevice=(el, index)=>{
      console.log('getdevice', el, index)
      //let selecteddevice = this.state.gddata.fun.filter( item =>el.text === item.devcode)
      let selecteddevice = this.state.gddata.fun[index]
      console.log('selecteddevice', selecteddevice)
      this.setState({
        selecteddevice: selecteddevice,
      },()=>{
        this.onOk();
       })
      
    } 
   
    //灯展示逻辑
    makeData = (funcs) => {
        if (!funcs || !Array.isArray(funcs)) {
          return;
        }
        let func = {};
        let func_use = {};
        funcs.map((data, index) => {
          // console.log("data数据：",data)
          let nd = {};
          let imgp;
          imgp = data.level == '0' ? 'green1.png' : data.level != '0' ? (data.level == '1' ? 'h3.png' : 'red1.png') : 'green1.png';
          nd["icon"] = require('../../images/' + imgp);
          nd["text"] = data.devcode
          nd["level"] = data.level
          if (!func.fun)
            func = { "fun": [], "data": [] };
          if (!func_use.fun)
            func_use = { "fun": [], "data": [] };
          func.fun[func.fun.length] = data;
          func.data[func.data.length] = nd;
          if (data.inused == '1') {
              console.log('func.use:', data)
            func_use.fun[func_use.fun.length] = data;
            func_use.data[func_use.data.length] = nd;
          }
        });
        this.setState({
          gddata: func,
        });
      }
    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.status == 1 ? 'blue' : 'red' }}>{dataItem.text}</div>} </span>
                      </div>
                    </div>
                  )}
                  onClick={this.getdevice}
                />
              </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" />

          <WhiteSpace size="lg" />
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={this.state.selecteddevice.devcode + "机台"+this.state.typech+"平均线速度数据"}
            />
            <Card.Body>
              <div>
                {console.log('机台今天平均线速度数据card', this.state.selecteddevice) }
                {
                    this.state.selecteddevice !==null && this.state.selecteddevice !== undefined?
                        <div key={'speedcardselectdevice'}>
                            <div style={{marginTop:'2px'}}>机台: {this.state.selecteddevice.devcode}</div>
                            <div>时间: {this.state.selecteddevice.creatime}</div>
                            <div>平均速度: {this.state.selecteddevice.avgspeed}</div>
                            <br/>
                        </div>
                    :'没有数据'
                }
              </div>
            </Card.Body>
          </Card>
          <Card style={{ marginTop: 5 }}>
            <Card.Header
              title={this.state.selecteddevice.devcode+"机台"+ this.state.typech +"速度占比"}
            />
            <Card.Body>
              {
                this.state.dayspeed && this.state.dayspeed.length>0 ? 
              <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={this.state.selecteddevice.devcode +"机台近"+this.state.typech+"平均速度数据"}
            />
            <Card.Body >
              {
                this.state.sevenspeedlinearray && this.state.sevenspeedlinearray.length>0 ?
              <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.selecteddevice.devcode+"机台近"+this.state.typech+"速度分布"}
            />
            <Card.Body >
              {
                this.state.sevenspeeddistributionarray && this.state.sevenspeeddistributionarray.length>0 ?
              <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                <canvas id={"mountNode4"} style={{ width: "100%", height: "100%" }}></canvas>
              </div>: '没有数据!'
              }
            </Card.Body>
          </Card>

          </WingBlank>
          </div>
        )
    }
}