import {useRouter} from "next/router";
import React, {useEffect, useMemo, useRef, useState} from "react";
import {Carousel} from 'antd'
import _ from "lodash";
import Footer from "../../../components/screen/Footer";
import Header from "../../../components/screen/Header";
import Chart from "../../../components/screen/Chart";
import Row from "../../../components/screen/Row";
import Card from '../../../components/screen/Card';
import ProcessTaskCard from "../../components/processTaskCard";
import {useSocket} from "../../../utils/hooks";
import moment from "moment/moment";

/**
 * 生产分工序
 */
const socketScreenType = 'BranchOperationType';
const gutter = 20;
const bottom = 0;
const chartsBgColor = '#102242';

//关键生产信息
const getProdOpt = ({xData, yData}) => {
    let opt = {
        xAxis: {
            type: 'category',
            data: []
        },
        title: {
            text: "L7车间生产进度",
            textStyle: {
                fontSize: "14px"
            },
            top: 10,
            left: 60
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            top: 40,
            left: 55
        },
        series: [
            {
                data: [],
                type: 'bar'
            }
        ]
    };
    opt.xAxis.data = xData
    opt.series[0].data = yData
    return opt;
};

//车间OEE
const getOEEOpt = (data = {}, params = []) => {
    const {oeeOfMonth = {}, oeeOfDay = {}} = data;
    // passRate 良品率, performanceRate 性能稼动率, timeRate 时间稼动率, oee OEE
    if (params.length > 0) {
        params[0].values = [oeeOfDay.timeRate || 0, oeeOfDay.performanceRate || 0, oeeOfDay.passRate || 0] //当日
        params[0].result = [oeeOfDay.oee || 0]
        params[1].values = [oeeOfMonth.timeRate || 0, oeeOfMonth.performanceRate || 0, oeeOfMonth.passRate || 0] //当日
        params[1].result = [oeeOfMonth.oee || 0]
    }

    let opt = {
        title: {
            text: "",
            left: "center",
            top: 180,
        },
        graphic: {
            elements: [
                {
                    type: "text",
                    left: "center",
                    top: 85,
                    style: {
                        fill: "#fff",
                        text: "",
                        fontSize: 16,
                        fontWeight: "bold",
                    },
                },
            ],
        },
        legend: {
            // icon: "rect",
            data: ["时间稼动率", "性能稼动率", "良品率"],
            bottom: 10,
            orient: "vertical",
            itemHeight: 16,
            textStyle: {
                fontSize: 14,
                lineHeight: 14,
            },
        },
        polar: {
            radius: ["25%", "65%"],
            center: ["50%", "30%"],
        },
        angleAxis: {
            show: false,
            max: 100,
            startAngle: 90,
        },
        radiusAxis: {
            show: false,
            type: "category",
            data: ["%"],
        },
        tooltip: {
            formatter: "{a}",
        },
        series: [
            {
                name: "时间稼动率",
                type: "bar",
                barGap: "0",
                barWidth: 14,
                data: [12],
                coordinateSystem: "polar",
            },
            {
                name: "性能稼动率",
                type: "bar",
                barGap: "0",
                barWidth: 14,
                data: [13],
                coordinateSystem: "polar",
            },
            {
                name: "良品率",
                type: "bar",
                barGap: "0",
                barWidth: 14,
                data: [14],
                coordinateSystem: "polar",
            },
        ],
    };
    let res = [];
    params.forEach(({name, values, result}) => {
        let newOpt = _.cloneDeep(opt);
        newOpt.title.text = name;
        newOpt.graphic.elements[0].style.text = result + "%";
        const names = ["时间稼动率    ", "性能稼动率    ", "良品率          "];
        newOpt.legend.data = names.map(
            (name, index) => (name = name + ` ${values[index]}%`)
        );
        newOpt.series = newOpt.series.map((item, index) => {
            item.name = names[index] + ` ${values[index]}%`;
            item.data[0] = values[index];
            return item;
        });
        res.push(newOpt);
    });
    return res;
};

//能耗信息
const getUsedOpt = (data = {}, params = []) => {
    const {
        energyOfMonth = 0, //电（KW/H） 今日用量
        energyOfDay = 0, // 当月累计用量
        gasOfMonth = 0, //气 (m3)
        gasOfDay = 0,
        waterOfDay = 0, //水（T）
        waterOfMonth = 0,
    } = data;
    if (params.length > 0) {
        params[0].values[0].value = gasOfMonth;
        params[0].values[1].value = gasOfDay;
        params[1].values[0].value = waterOfMonth;
        params[1].values[1].value = waterOfDay;
        params[2].values[0].value = energyOfMonth;
        params[2].values[1].value = energyOfDay;
    }
    let opt = {
        title: {
            text: "",
            left: "center",
            top: 70,
            textStyle: {
                fontWeight: "normal",
                fontSize: "16px"
            },
        },
        tooltip: {
            trigger: "item",
        },
        legend: {
            bottom: 15,
            left: "center",
            orient: "vertical",
            textStyle: {
                fontSize: 14,
                lineHeight: 14
            },
        },
        series: [
            {
                type: "pie",
                radius: ["45%", "70%"],
                center: ["50%", "40%"],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: "center",
                },
                labelLine: {
                    show: false,
                },
                data: [],
            },
        ],
    };
    let res = [];
    let colors = ["#6FE621", "#FF005A", "#4D7BF3", "#4FCCFF"]
    params.forEach(({name, unit, values}, index) => {
        let newOpt = _.cloneDeep(opt);
        newOpt.color = [colors[index], "#FFC760"];
        newOpt.title.text = `${name}\n(${unit})`;
        newOpt.series[0].data = values;
        newOpt.legend.formatter = name => {
            let {value = ""} = values.find(item => item.name === name) || {};
            return `${name}: ${value}`
        }
        res.push(newOpt);
    });
    return res;
};

//设备监控参数
const getEquipMonitorOpt = (data = []) => {
    let option = {
        type: "equip",
        backgroundColor: chartsBgColor,
        grid: {
            top: 25,
            left: 60,
            right: "5%"
        },
        title: {
            text: "",
            x: "center",
            y: "top",
            textStyle: {
                fontSize: "14px"
            }
        },
        xAxis: {
            type: "category",
            data: [],
        },
        yAxis: {
            type: "value",
            min: 0,
        },
        series: [
            {
                symbol: "circle",
                symbolSize: 5,
                data: [],
                type: "line",
            },
        ],
    };
    let newOpt = []
    if (data.length > 0) {
        data.forEach((item, index) => {
            let opt = _.cloneDeep(option);
            opt.title.text = item.name;
            opt.xAxis.data = item.time.slice().reverse();
            opt.series[0].data = item.data.slice().reverse();
            newOpt.push(opt)
        })
    }
    return newOpt;
}

//质量监控参数
const getQualityMonitorOpt = (data = {}) => {
    let res = [];
    let option = {
        type: "quality",
        backgroundColor: chartsBgColor,
        title: {
            show: false,
            /* text: '',
             x: 'right',
             textStyle: {
                 color: '#ffffff',
                 fontSize: "14px"
             }*/
        },
        tooltip: {
            trigger: 'axis'
        },
        markLine: {},
        legend: {
            x: 'left',
            y: 'bottom',
            // data: ['极差值', 'UCLmr', 'LCLmr', 'CLmr'],
            textStyle: { //文字 样式
                color: '#ffffff',
                fontSize: "12px"
            },
            itemStyle: { //圆点样式
                opacity: 0
            },
            lineStyle: { //线样式
                // type: [4, 4],
                dashOffset: 4
            }
        },
        grid: {
            top: 15,
            left: '3%',
            right: '3%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: '#ffffff'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitNumber: 8,
            //轴线
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: '#ffffff'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#ffffff'
                }
            }
        },
        series: []
    };
    if (data.spcBasicDatas && data.topData) {
        let {spcBasicDatas = [], topData = {}} = data;
        let {
            usl = 0, lsl = 0,
            uclx = 0, averx = 0, lclx = 0,
            uclr = 0, averr = 0, lclr = 0,
        } = topData

        let xData = [], yValData = [], yMrValData = [];
        spcBasicDatas.forEach(item => {
            if (!item.seq) item.seq = 0
            if (!item.value) item.value = 0
            if (!item.mrValue) item.mrValue = 0
            xData.push(item.seq)
            yValData.push(item.value)
            yMrValData.push(item.mrValue)
        })
        //标准点数据处理
        let basicOpt = _.cloneDeep(option);
        const basicName = ['数据点', 'USLi', 'UCli', 'CLi', 'LCLi', 'LSLi'];
        basicOpt.xAxis.data = xData
        let min = _.min(yValData)
        basicOpt.yAxis.min = min;
        basicName.forEach((item, index) => {
            basicOpt.series[index] = {
                type: 'line',
                smooth: true, //平滑
                symbolSize: 4,
                symbol: 'circle',
                data: [],
                lineStyle: {
                    type: 'dashed', //'dotted'点线 'dashed' 虚线 'solid' 实线
                    width: 1
                },
                markLine: {
                    symbol: 'none',
                    label: {
                        show: false
                    },
                    lineStyle: {},
                    data: [{
                        yAxis: 0,
                        x: '6.8%'
                    }]
                }
            }
            basicOpt.series[index].name = basicName[index]
        })
        basicOpt.series[0].data = yValData;
        basicOpt.series[0].lineStyle.type = "solid";
        basicOpt.series[1].markLine.data[0].yAxis = usl
        basicOpt.series[2].markLine.data[0].yAxis = lsl
        basicOpt.series[3].markLine.data[0].yAxis = uclx
        basicOpt.series[4].markLine.data[0].yAxis = averx
        basicOpt.series[5].markLine.data[0].yAxis = lclx

        //极差点数据处理
        let mrOpt = _.cloneDeep(option);
        const mrName = ['极差点', 'UCLmr', 'CLmr', 'LCLmr'];
        mrOpt.xAxis.data = xData
        mrName.forEach((item, index) => {
            mrOpt.series[index] = {
                type: 'line',
                smooth: true, //平滑
                symbolSize: 4,
                data: [],
                lineStyle: {
                    type: 'dashed', //'dashed'点线 'dashed' 虚线 'solid' 实线
                    width: 1
                },
                markLine: {
                    symbol: 'none',
                    label: {
                        show: false
                    },
                    data: [{
                        yAxis: 0,
                        x: '6.8%'
                    }]
                }
            }
            mrOpt.series[index].name = mrName[index]
        })
        mrOpt.series[0].data = yMrValData;
        mrOpt.series[0].lineStyle.type = "solid";
        mrOpt.series[1].markLine.data[0].yAxis = uclr
        mrOpt.series[2].markLine.data[0].yAxis = averr
        mrOpt.series[3].markLine.data[0].yAxis = lclr

        res = _.concat([], [basicOpt], [mrOpt])
    }
    return res;
}

const ProcessItem = () => {
    const tableTimeoutRef = useRef();
    const equipMonitorRef = useRef();
    const router = useRouter();
    const [isClear, setClear] = useState(false)
    const [length, setLength] = useState(4) //卡片轮播个数
    const [len, setLen] = useState(2) //监控轮播个数
    const [height, setHeight] = useState(0);
    const [width, setWidth] = useState(0);
    const [monitorTitle, setMonitorTitle] = useState("设备")
    const [isQuality, setIsQuality] = useState(false)
    const {operationCode, workCenterCode, date = moment().format('YYYY-MM-DD')} = router.query;
    const {
        processItem: {
            reloadTime, cardAutoNext, pages = {}, energyParams = [], OEEParams = []
        } = {}
    } = global.config || {};
    //监控类型名，质量、设备
    let title = "";
    if (operationCode && pages[operationCode]) {
        title = pages[operationCode].title;
    }
    const [
        {
            keyEnergy = {}, //关键能耗
            keyProduction = {}, //关键生产
            taskExecution = [], //任务执行状态
            oee = {}, //车间OEE
            paramMonitor = {} //监控
        } = {},
        reload,
    ] = useSocket({socketScreenType, operationCode, workCenterCode, date});
    const {iotEquipResultData = [], spcResultData = {}} = paramMonitor; //监控
    const {topData = {}} = spcResultData;
    //质量监控检测项
    let featureName = "";
    if (topData.featureName) {
        featureName = topData.featureName
    }

    //工序任务执行状态
    const taskExecutData = useMemo(() => {
        let res = [];
        taskExecution.forEach((item, index) => {
            let row = Math.ceil((index + 1) / length);
            let rowIndex = index % length;
            if (!res[row]) res[row] = [];
            res[row][rowIndex] = item;
        })
        res = res.filter(item => item);
        return res;
    }, [taskExecution]);

    //设备、质量参数监控
    const monitorOpt = useMemo(() => {
        let equipData = getEquipMonitorOpt(iotEquipResultData);
        let qualityData = getQualityMonitorOpt(spcResultData);

        let res = [], equipRes = [], qualityRes = [];
        //设备参数分组
        equipData.forEach((item, index) => {
            let row = Math.ceil((index + 1) / len);
            let rowIndex = index % len;
            if (!equipRes[row]) equipRes[row] = [];
            equipRes[row][rowIndex] = item;
        })
        //质量参数分组
        qualityData.forEach((item, index) => {
            let row = Math.ceil((index + 1) / len);
            let rowIndex = index % len;
            if (!qualityRes[row]) qualityRes[row] = [];
            qualityRes[row][rowIndex] = item;
        })
        res = _.concat([], equipRes, qualityRes)
        res = res.filter(item => item);
        return res
    }, [iotEquipResultData, spcResultData])

    //关键生产信息
    const prodOpt = useMemo(() => {
        return getProdOpt(keyProduction)
    }, [keyProduction])

    //车间能耗信息
    const usedOpt = useMemo(() => {
        return getUsedOpt(keyEnergy, energyParams);
    }, [keyEnergy])

    //车间OEE
    const OEEOpt = useMemo(() => {
        return getOEEOpt(oee, OEEParams);
    }, [oee]);

    useEffect(() => {
        if (operationCode) {
            setClear(true);
        }
    }, [operationCode]);

    useEffect(() => {
        setTimeout(() => {
            //轮播图标的宽高设置
            if (equipMonitorRef.current) {
                setHeight(equipMonitorRef.current.clientHeight)
                setWidth(equipMonitorRef.current.clientWidth)
            }
        }, 100)
    }, [])

    //整体刷新
    useEffect(() => {
        tableTimeoutRef.current = setInterval(() => {
            reload()
        }, reloadTime);
        return () => {
            clearInterval(tableTimeoutRef.current)
        }
    }, [reload])

    useEffect(() => {
        if (iotEquipResultData.length <= 0 && _.get(spcResultData, "spcBasicDatas.length") > 0) {
            setMonitorTitle('质量')
            setIsQuality(true)
        }
    }, [iotEquipResultData, spcResultData])

    //当前轮播位置,更新标题
    const afterChange = (current) => {
        let index = _.findIndex(monitorOpt, item => item[0].type == 'quality');
        if (index == current) {
            setMonitorTitle('质量')
            setIsQuality(true)
        } else {
            setMonitorTitle('设备')
            setIsQuality(false)
        }
    }

    return (
        <div className="screen-container">
            {isClear && (
                <React.Fragment>
                    <Header title={`${title}工序`}/>
                    <div className="screen-container-content">
                        <Row className='height-100' gutter={gutter} bottom={bottom}>
                            <Row.Col span={5}>
                                <Row className="height-55">
                                    <Card title={`${title}工序设备示意图`} overVisible={true}
                                          padding={"40px 20px 25px 20px"}>
                                        <div className='screen-img img-gxsb'/>
                                    </Card>
                                </Row>

                                <Row className="height-45" style={{paddingTop: `${gutter}px`}}>
                                    <Card title={`${title}工序成品示意图`} overVisible={true}
                                          padding={"40px 20px 25px 20px"}>
                                        <div className='screen-img img-gxzzp'/>
                                    </Card>
                                </Row>
                            </Row.Col>

                            <Row.Col span={12}>
                                <Row className="height-55">
                                    <Card title="工序任务执行状态" overVisible={true} padding={"40px 20px 25px 20px"}>
                                        <div className='process-task-list'>
                                            <Carousel autoplay dots={false} autoplaySpeed={cardAutoNext}>
                                                {taskExecutData.map((row, rowIndex) => {
                                                    return <div key={Math.random()}>
                                                        <div className='process-task'>
                                                            {row.map((item, index) => {
                                                                return <div className='process-task-item'
                                                                            key={item.code}>
                                                                    <ProcessTaskCard itemData={item}
                                                                                     operationCode={operationCode}/>
                                                                </div>
                                                            })}
                                                        </div>
                                                    </div>
                                                })}
                                            </Carousel>
                                        </div>
                                    </Card>
                                </Row>

                                <Row className="height-45" style={{paddingTop: `${gutter}px`}}>
                                    <Card title={`${monitorTitle}参数监控`} overVisible={true}
                                          padding={"35px 16px 16px 16px"}>
                                        {
                                            isQuality &&
                                            <div className='monitor-quality-item'>
                                                {`最新检测项：${featureName}`}
                                            </div>
                                        }
                                        <div className='equip-monitor-list' ref={equipMonitorRef}>
                                            <Row className='height-100'>
                                                <Carousel autoplay dots={false} dotPosition={"right"}
                                                          autoplaySpeed={cardAutoNext} adaptiveHeight={true}
                                                          afterChange={afterChange}>
                                                    {monitorOpt.map((row, rowIndex) => {
                                                        return <div>
                                                            <div key={Math.random()}
                                                                 style={{height: height, width: width}}>
                                                                {row.map((item, index) => {
                                                                    return <div className='equip-monitor-item'
                                                                                key={rowIndex + index}>
                                                                        <Chart option={item}/>
                                                                    </div>
                                                                })}
                                                            </div>
                                                        </div>
                                                    })}
                                                </Carousel>
                                            </Row>
                                        </div>
                                    </Card>
                                </Row>
                            </Row.Col>

                            <Row.Col span={7}>
                                <Card>
                                    <div className="used-content">
                                        <Row className="height-30">
                                            <Card title="关键生产信息" titleSpace={true} overVisible={true}
                                                  withBorder={false}>
                                                <Chart option={prodOpt}/>
                                            </Card>
                                        </Row>

                                        <Row className="height-30">
                                            <Card title="关键能耗信息" titleSpace={true} overVisible={true}
                                                  withBorder={false} padding={"0 16px"}>
                                                <Row className='height-100'>
                                                    {usedOpt.map((opt, index) => {
                                                        return (
                                                            <Row.Col span={8} key={index}>
                                                                <Chart option={opt}/>
                                                            </Row.Col>
                                                        );
                                                    })}
                                                </Row>
                                            </Card>
                                        </Row>

                                        <Row className="height-40">
                                            <Card title="车间OEE" titleSpace={true} overVisible={true}
                                                  withBorder={false} padding={"0 16px"}>
                                                <Row className='height-100'>
                                                    {OEEOpt.map((opt, index) => {
                                                        return (
                                                            <Row.Col span={12} key={index}>
                                                                <Chart option={opt}/>
                                                            </Row.Col>
                                                        );
                                                    })}
                                                </Row>
                                            </Card>
                                        </Row>
                                    </div>
                                </Card>
                            </Row.Col>
                        </Row>
                    </div>

                    <Footer/>
                </React.Fragment>
            )
            }
            <style jsx>{`
              .screen-container {
                font-family: PingFangSC-Semibold;
                height: 100vh;
                min-height: 1080px;
                min-width: 1920px;
                background: url("/img/bg.png") center center;
                position: relative;
                padding-top: 96px;
                padding-bottom: 82px;
                overflow: hidden;
              }

              .screen-container-content {
                height: 100%;
                padding: ${gutter}px;
              }

              .OEE-content {
                position: absolute;
                width: 900px;
                height: 320px;
                top: 660px;
                left: 460px;
              }

              .monitor-quality-item {
                text-align: right;
                margin-top: -22px;
                font-weight: bold;
              }

              .equip-monitor-list {
                width: 100%;
                height: 100%;
                overflow: hidden;
              }

              .equip-monitor-item {
                width: 100%;
                height: 50%;;
                padding: 4px 0;
              }

              .process-task-list {
                width: 100%;
                height: 100%;
                overflow: hidden;
              }

              .process-task {
                display: flex;
                justify-content: space-around;
              }

              .process-task-item {
                width: calc(100% / 4);
                padding: 0 16px;
              }

              .used-content {
                overflow: hidden;
                height: 100%;
              }

              .used-content :global(.screen-card) {
                border: none !important;
              }

              .aaa {
                width: 50%;
                display: flex;
                justify-content: center;
              }

              .screen-img {
                height: 100%;
              }

              .img-gxsb {
                background: url(/img/process/${operationCode}-SB.png) center center no-repeat;
              }

              .img-gxzzp {
                background: url(/img/process/${operationCode}-ZZP.png) center center no-repeat;
              }

            `}</style>
        </div>
    );
};

export default ProcessItem;