import React, { useRef, useEffect, useCallback } from 'react';
import _ from 'lodash';
import { withRouter } from 'next/router';
import Footer from '../../../components/screen/Footer';
import Header from '../../../components/screen/Header';
import Row from '../../../components/screen/Row';
import Card from '../../../components/screen/Card';
import Chart from '../../../components/screen/Chart';
import Table from '../../../components/screen/Table';
import TableProgress from '../../../components/screen/TableProgress';
import io from '../../../utils/socket.io.js';


const gutter = 20;
const bottom = 20;

// 返回结果是个字符串，需要转一下
let testData = {
  "code": "0000",
  "data": { 
    //今日生产总数
    "productCount": {
        "planQty": 3162.000000,  //计划总数
        "productQty": 199.000000, //生产总数
        "unFinishedQty": 2963.000000 //未完成数量
    },
    //今日生产统计
    "productDayCountList": [
        {
            "productQty": 0.000000, //生产数量
            "qualityQty": 0.000000, //合格数量
            "time": "00:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "01:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "02:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "03:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "04:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "05:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "06:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "07:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "08:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "09:00"
        },
        {
            "productQty": 69.000000,
            "qualityQty": 17.000000,
            "time": "10:00"
        },
        {
            "productQty": 12.000000,
            "qualityQty": 12.000000,
            "time": "11:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "12:00"
        },
        {
            "productQty": 15.000000,
            "qualityQty": 15.000000,
            "time": "13:00"
        },
        {
            "productQty": 25.000000,
            "qualityQty": 25.000000,
            "time": "14:00"
        },
        {
            "productQty": 26.000000,
            "qualityQty": 26.000000,
            "time": "15:00"
        },
        {
            "productQty": 52.000000,
            "qualityQty": 51.000000,
            "time": "16:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "17:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "18:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "19:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "20:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "21:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "22:00"
        },
        {
            "productQty": 0.000000,
            "qualityQty": 0.000000,
            "time": "23:00"
        }
    ],
    //日产能概况
    "productDayRecordList": [
        {
            "code": "WO202203300001",  //工单号
            "materialCode": "L5CP",    //产品编码
            "materialName": "L5车间成品",  //产品名称
            "planQty": 1000.000000,  //计划数量
            "productQty": 10.000000,  //生产数量
            "productRate": 0.010,    //生产进度
            "productStatus": "已完工",  //生产状态
            "unQualityQty": 0.000000,  //不合格数量
            "unQualityRate": 0.000, //不合格率
            "workCenterCode": "L5",  //产线编码
            "workCenterName": "L5车间" //产线名称
        },
        {
            "code": "WO202204010001",
            "materialCode": "L5CP",
            "materialName": "L5车间成品",
            "planQty": 100.000000,
            "productQty": 15.000000,
            "productRate": 0.150,
            "productStatus": "已创建",
            "unQualityQty": 0.000000,
            "unQualityRate": 0.000,
            "workCenterCode": "L5",
            "workCenterName": "L5车间"
        },
        {
            "code": "WO202204010002",
            "materialCode": "L5CP",
            "materialName": "L5车间成品",
            "planQty": 10.000000,
            "productQty": 15.000000,
            "productRate": 1.500,
            "productStatus": "生产中",
            "unQualityQty": 0.000000,
            "unQualityRate": 0.000,
            "workCenterCode": "L5",
            "workCenterName": "L5车间"
        },
        {
            "code": "WO202204010003",
            "materialCode": "L5CP",
            "materialName": "L5车间成品",
            "planQty": 10.000000,
            "productQty": 12.000000,
            "productRate": 1.200,
            "productStatus": "生产中",
            "unQualityQty": 0.000000,
            "unQualityRate": 0.000,
            "workCenterCode": "L5",
            "workCenterName": "L5车间"
        },
        {
            "code": "WO202204060001",
            "materialCode": "L5CP",
            "materialName": "L5车间成品",
            "planQty": 1000.000000,
            "productQty": 14.000000,
            "productRate": 0.014,
            "productStatus": "生产中",
            "unQualityQty": 0.000000,
            "unQualityRate": 0.000,
            "workCenterCode": "L5",
            "workCenterName": "L5车间"
        },
        {
            "code": "WO202204060002",
            "materialCode": "L5CP",
            "materialName": "L5车间成品",
            "planQty": 10.000000,
            "productQty": 12.000000,
            "productRate": 1.200,
            "productStatus": "生产中",
            "unQualityQty": 0.000000,
            "unQualityRate": 0.000,
            "workCenterCode": "L5",
            "workCenterName": "L5车间"
        },
        {
            "code": "WO202204060003",
            "materialCode": "L5CP",
            "materialName": "L5车间成品",
            "planQty": 10.000000,
            "productQty": 14.000000,
            "productRate": 1.400,
            "productStatus": "生产中",
            "unQualityQty": 0.000000,
            "unQualityRate": 0.000,
            "workCenterCode": "L5",
            "workCenterName": "L5车间"
        },
        {
            "code": "WO202204070001",
            "materialCode": "L5CP",
            "materialName": "L5车间成品",
            "planQty": 10.000000,
            "productQty": 52.000000,
            "productRate": 5.200,
            "productStatus": "生产中",
            "unQualityQty": 1.000000,
            "unQualityRate": 0.019,
            "workCenterCode": "L5",
            "workCenterName": "L5车间"
        },
        {
            "code": "WO202204080001",
            "materialCode": "L5CP",
            "materialName": "L5车间成品",
            "planQty": 12.000000,
            "productQty": 55.000000,
            "productRate": 4.583,
            "productStatus": "生产中",
            "unQualityQty": 52.000000,
            "unQualityRate": 0.945,
            "workCenterCode": "L5",
            "workCenterName": "L5车间"
        },
        {
            "code": "RcQuickWearStr",
            "materialCode": "L5CP",
            "materialName": "L5车间成品",
            "planQty": 1000.000000,
            "productQty": 0.000000,
            "productRate": 0.000,
            "productStatus": "待生产",
            "unQualityQty": 0.000000,
            "unQualityRate": 0.000,
            "workCenterCode": "L5",
            "workCenterName": "L5车间"
        }
    ],
    // 今日生产合格数
    "qualityDayCount": {
        "qualityQty": 146.000000, //合格数量
        "qualityRate": 0.734, //合格率
        "unQualityQty": 53.000000 //不合格数量
    }
  },
  "success": true
};

const polarBarOpt = {
  title: {
    text: '计划总数',
    left: 'center',
    bottom: 24,
    textStyle: {
      fontSize: 20,
    }
  },
  legend: {
    show: false
  },
  radiusAxis: {
    show: false,
    type: 'category',
    data: ['%']
  },
  tooltip: {
    show: false,
  },
  series: {
    type: 'gauge',
    center: ['50%', "40%"],
    radius: "70%",
    startAngle: 90,
    endAngle: -270,
    pointer: {
      show: false
    },
    progress: {
      show: true,
      overlap: false,
      roundCap: false,
      clip: false,
      itemStyle: {
        borderWidth: 0,
      },
    },
    axisLine: {
      lineStyle: {
        width: 20,
        color: [[1, 'rgba(40, 163, 255, 0.2)']],
      }
    },
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false,
    },
    data: [{
      value: 0,
      name: '生产总数'
    }],
    title: {
      offsetCenter: ['0%', '20'],
      color: "#fff",
      fontSize: 20,
    },
    detail: {
      show: true,
      offsetCenter: ['0%', '-20'],
      width: 'auto',
      height: 32,
      fontSize: 32,
      color: '#00E1FA',
      borderColor: 'auto',
      borderWidth: 0,
      formatter: '{value}'
    }
  }
};
const setNumOpt = (total, done, title) => {
  let res = _.cloneDeep(polarBarOpt);
  if(title) res.title.text = `${title}：${total}`;
  let percent = (100 * done / total).toFixed(2);
  res.series.data[0].name = "生产总数";
  res.series.data[0].value = percent;
  res.series.detail.formatter = () => done;
  return res;
}
const setOkNumOpt = (total, done, title) => {
  let res = _.cloneDeep(polarBarOpt);
  let percent = (100 * done / (total === 0 ? 1 : total)).toFixed(2);
  if(isNaN(percent)) percent = 0;
  if(title) res.title.text = `${title}：${percent}%`;
  res.series.data[0].value = percent;
  res.series.data[0].name = "合格数量";
  res.series.detail.formatter = () => done;
  res.series.detail.color = "#6FE621";
  res.series.progress.itemStyle.color = "#6FE621";
  return res;
}

const barOpt = {
  legend: {
    show: true,
    data: ['生产数量', '合格数量'],
    top: 10,
    right: 10,
    textStyle: {
      fontSize: 14,
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    axisTick: {
      lineStyle: {opacity: 0.3},
      alignWithLabel: true,
    },
    axisLine: {
      lineStyle: {opacity: 0.3},
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)'
    },
    data: []
  },
  yAxis: {
    type: 'value',
    axisTick: {
      lineStyle: {opacity: 0.3}
    },
    axisLine: {
      lineStyle: {opacity: 0.3}
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)'
    },
  },
  grid: {
    bottom: 40,
    top: 60,
    left: 50,
  },
  barWidth: 20,
  series: [{
    name: '生产数量',
    type: 'bar',
    barGap: -1,
    data: []
  },
  {
    name: '合格数量',
    itemStyle: {
      color: "#6FE621",
    },
    type: 'bar',
    data: []
  }]
}
const setBarOpt = (data) => {
  let res = _.cloneDeep(barOpt);
  data.forEach(({productQty, qualityQty, time}, index) => {
    res.xAxis.data.push(time);
    res.series[0].data[index] = productQty;
    res.series[1].data[index] = qualityQty;
  })
  return res;
};

const productTableColumns = [
  {title: "机台", code: "workCenterName"},
  {title: "生产状态", code: "productStatus",
    color: val => {
      if(val === '待生产') return "#d5542d";
      if(val === '已创建') return "#1a7cc6";
      if(val === '生产中') return "#0aac61";
      if(val === '已完工') return "#0db5a4";
      if(val === '已关闭') return "#c1c1c1";
      if(val === '已取消') return "#c1c1c1";
    },
    render: (text, config, rowData) => {
      const {color} = config;
      let resColor = color(text);
      return (
        <div style={{color: resColor}}>
          <span style={{
            background: resColor, 
            width: '8px', 
            height: '8px',
            display: 'inline-block',
            borderRadius: '50%',
            verticalAlign: 'middle',
          }}></span>
          <span style={{
            verticalAlign: 'middle',
            marginLeft: '6px',
          }}>{text}</span>
        </div>
      )
    },
  },
  {title: "产品编码", code: "materialCode"},
  {title: "产品名称", code: "materialName"},
  {title: "工单编号", code: "code"},
  {title: "生产数量", code: "productQty"},
  {title: "计划数量", code: "planQty"},
  {title: "生产进度", code: "productRate", 
    width: 200,
    render: (value, config, rowData) => {
      return <TableProgress percent={value}/>
    },
  },
  {title: "不良品数量", code: "unQualityQty"},
  {title: "不良品率", code: "unQualityRate",
    render: (value, config, rowData) => {
      return <span>{value * 100}%</span>
    },
  },
]

function PlanBoard(props) {
  const {config : {ioSocketUrl, planBoard = {}} = {}} = global;
  const tableToNextPage = planBoard.productTableNext;

  const {router} = props;

  const planNumRef = useRef();
  const okNumRef = useRef();
  const productNumRef = useRef();
  const productTableRef = useRef();

  const socket = useRef();
  const workCenterCodeRef = useRef();
  const tableTimeoutRef = useRef();
  const getQueryVariable = (variable) => {
    let query = window.location.search.substring(1);
    let vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
      let pair = vars[i].split("=");
      if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
  }
  const getData = () => {
    let workCenterCode = workCenterCodeRef.current
    let date = getQueryVariable('date');

    console.log("fetch", workCenterCode)
    if(!workCenterCode) return;
    let query = {
      workCenterCode,
      screenType: "ProductPlanType",
    }
    if (date) query.date = date;
    else{
      query.date = new Date().toJSON().split('T').join(' ').substr(0,10)
    }
    socket.current.emit('timePerformanceGoodProduct', 'channel', {query})
    setTimeGetData()
  };
  const setTimeGetData = () => {
    setTimeout(() => {
      getData()
    }, 300000)
  }
  const pageFinished = useCallback(() => {
    console.log("finished")
    clearInterval(tableTimeoutRef.current);
    getData();
  })
  const setTableNextPage = useCallback(() => {
    tableTimeoutRef.current = setInterval(() => {
      productTableRef.current.nextPage();
    }, tableToNextPage);
  }, [])

  const update = (data) => {
    try{ data = JSON.parse(data) }catch(e){console.log(e)}
    // if(!data) data = testData;
    const {productCount, productDayCountList, qualityDayCount, productDayRecordList} = data.data;
    console.log("data", data.data)

    planNumRef.current.setOption(setNumOpt(
      productCount.planQty, 
      productCount.productQty, 
      "计划总数"
    ));
    okNumRef.current.setOption(setOkNumOpt(
      qualityDayCount.qualityQty, 
      qualityDayCount.qualityQty - qualityDayCount.unQualityQty, 
      "合格率"
    ));

    productNumRef.current.setOption(setBarOpt(productDayCountList));

    productTableRef.current.setData(productDayRecordList);
    setTableNextPage();
  };

  useEffect(() => {
    const {workCenterCode} = router.query;
    if(!workCenterCode) return;
    workCenterCodeRef.current = workCenterCode;
  }, [router])

  useEffect(() => {
    socket.current = io.connect(ioSocketUrl, {transports:['websocket']});

    socket.current.on('connect', function() {
      console.log("msg页面连接成功！");
      getData();
    });

    socket.current.on('timePerformanceGoodProduct', function(data) {
      update(data)
    });

    // update();
  }, [])

  return (
    <div className='screen-container'>
      <Header title={"计划看板"} />
      <div className="screen-container-content">
        <Row className='height-45' gutter={gutter} bottom={bottom}>
          <Row.Col span={5}>
            <Card title="今日生产总数" titleSpace={true} overVisible={true}>
              <Chart ref={planNumRef} />
            </Card> 
          </Row.Col>
          <Row.Col span={14}>
            <Card title="今日生产统计" overVisible={true}>
              <Chart ref={productNumRef} />
            </Card>
          </Row.Col>
          <Row.Col span={5}>
            <Card title="今日生产合格总数" titleSpace={true} overVisible={true}>
              <Chart ref={okNumRef} />
            </Card>
          </Row.Col>
        </Row>
        <Row className='height-55' gutter={gutter}>
          <Row.Col span={24}>
            <Card title="生产概况" titleSpace={true} padding={`15px ${gutter}px`}>
              <Table
                ref={productTableRef}
                mainKey="code"
                columns={productTableColumns}
                autoNext={false}
                pageFinished={pageFinished}
              />
            </Card>
          </Row.Col>
        </Row>
      </div>
      <Footer />
      <style jsx>{`
        .screen-container{
          height: 100vh;
          overflow: auto;
          background: url('/img/bg.png') center center;
          position: relative;
          padding-top: 96px;
          padding-bottom: 82px;
        }
        .screen-container-content{
          height: 100%;
          padding: 0 ${gutter}px;
        }
      `}</style>
    </div>
  );
}

export default withRouter(PlanBoard)