import * as echarts from 'echarts'
import { color } from 'echarts'
import _ from 'lodash'

export default (publicProps, showGridTipColor) => {
    const {
        mainSize,
        derrickConfig,
        platformSize,
        partSize,
        derrickSize,
        strataSize,
        pumpPoolSize,
        pipeSize,
        platformData,
        endPoints,
        pumpSize,
        poolSize,
        colors
    } = publicProps
    return {
        legend: {
        },
        tooltip: {
        },
        backgroundColor: 'transparent',
        grid: [{
            id: 'allGrid_0',
            left: 0,
            top: 0,
            show: true,
            containLabel: false,
            backgroundColor: 'transparent',
            width: mainSize.width,
            height: mainSize.height,
            borderWidth: 0
        },
        {
            id: 'derrickGrid_1',
            left: derrickConfig.padLeft + (platformSize.width - derrickSize.width) / 2,
            top: partSize.topRed.height,
            show: true,
            containLabel: false,
            backgroundColor: showGridTipColor, // || 'lavender',
            width: derrickSize.width,
            height: derrickSize.height,
            borderWidth: 0
        },
        {
            id: 'platformGrid_2',
            left: derrickConfig.padLeft,
            top: platformSize.top,
            show: true,
            containLabel: false,
            backgroundColor: showGridTipColor, // || 'azure',
            width: platformSize.width,
            height: platformSize.height,
            borderWidth: 0
        },
        {
            id: 'pipeGrid_3',
            left: pipeSize.gridLeft,
            top: pipeSize.gridTop,
            show: true,
            containLabel: false,
            backgroundColor: showGridTipColor, // || 'powderblue',
            width: pipeSize.gridWidth,
            height: pipeSize.gridHeight,
            borderWidth: 0
        },
        {
            id: 'leftStrata_4',
            left: strataSize.firstLeft,
            top: strataSize.top,
            show: true,
            containLabel: false,
            backgroundColor: 'sandybrown',
            width: strataSize.width,
            height: strataSize.height,
            borderWidth: 0
        },
        {
            id: 'rightStrata_5',
            left: strataSize.secondLeft,
            top: strataSize.top,
            show: true,
            containLabel: false,
            backgroundColor: 'sandybrown',
            width: strataSize.width,
            height: strataSize.height,
            borderWidth: 0
        },
        {
            id: 'pumpPool_6',
            left: strataSize.secondLeft + strataSize.width,
            top: 0,
            show: true,
            containLabel: false,
            backgroundColor: showGridTipColor, // || 'sandybrown',
            width: pumpPoolSize.width,
            height: pumpPoolSize.height,
            borderWidth: 0
        }],
        xAxis: [{
            show: false
        }, {
            id: 'topAxisUseX',
            gridIndex: 1,
            min: 0,
            max: derrickSize.width,
            show: false
        }, {
            id: 'platUseX',
            gridIndex: 2,
            min: 0,
            max: platformSize.width,
            show: false
        }, {
            id: 'pipeUseX',
            gridIndex: 3,
            min: 0,
            max: pipeSize.gridWidth,
            show: false
        }, {
            id: 'strataLeftUseX',
            gridIndex: 4,
            min: 0,
            max: strataSize.width,
            show: false
        }, {
            id: 'strataRightUseX',
            gridIndex: 5,
            min: 0,
            max: strataSize.width,
            show: false
        }, {
            id: 'pumpPoolUseX',
            gridIndex: 6,
            min: 0,
            max: pumpPoolSize.width,
            show: false
        }],
        yAxis: [{
            show: false
        }, {
            id: 'topAxisUseY',
            gridIndex: 1,
            inverse: true,
            min: 0,
            max: derrickSize.height,
            show: false
        }, {
            id: 'platUseY',
            gridIndex: 2,
            inverse: true,
            min: 0,
            max: platformSize.height,
            show: false
        }, {
            id: 'pipeUseY',
            gridIndex: 3,
            inverse: true,
            min: 0,
            max: pipeSize.gridHeight,
            show: false
        }, {
            id: 'strataLeftUseY',
            gridIndex: 4,
            inverse: true,
            min: 0,
            max: strataSize.height,
            show: false
        }, {
            id: 'strataRightUseY',
            gridIndex: 5,
            inverse: true,
            min: 0,
            max: strataSize.height,
            show: false
        }, {
            id: 'pumpPoolUseY',
            gridIndex: 6,
            inverse: true,
            min: 0,
            max: pumpPoolSize.height,
            show: false
        }],
        graphic: [
            {
                type: 'group',
                left: derrickConfig.padLeft + ((platformSize.width - derrickSize.width) / 2),
                top: 0,
                width: derrickSize.width,
                height: derrickSize.height,
                children: [
                    {
                        id: 'topRed',
                        type: 'rect',
                        z: 100,
                        left: (derrickSize.width - partSize.topRed.width) / 2,
                        top: 0,
                        shape: {
                            width: partSize.topRed.width,
                            height: partSize.topRed.height
                        },
                        style: {
                            fill: 'red',
                            stroke: '#555',
                            lineWidth: 1
                        }
                    },
                    {
                        id: 'outter',
                        type: 'rect',
                        z: 110,
                        left: 0,
                        top: 0,
                        shape: {
                            width: derrickSize.width,
                            height: derrickSize.height
                        },
                        style: {
                            fill: 'none',
                            stroke: '#555',
                            opacity: 0,
                            lineWidth: 1
                        }
                    }
                ]
            }
        ],
        series: [
            {
                id: 'axisBeside',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                polyline: true,
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: [
                    {
                        coords: [
                            partSize.topRedBottom.start,
                            partSize.topRedBottom.end
                        ]
                    },
                    {
                        coords: [
                            partSize.axisLeft.start,
                            partSize.axisLeft.end
                        ]
                    },
                    {
                        coords: [
                            partSize.axisRight.start,
                            partSize.axisRight.end
                        ]
                    }
                ].concat(derrickConfig.echartsStricks),
                silent: true,
                lineStyle: {
                    color: colors.besideLine,
                    opacity: 1,
                    width: derrickConfig.lineWidth
                },
                zlevel: 80,
                progressiveThreshold: 500,
                progressive: 200,
                animation: false
            },
            {
                id: 'axisLeftLabels',
                type: 'custom',
                xAxisIndex: 1,
                yAxisIndex: 1,
                zlevel: 80,
                renderItem: function (params, api) {
                    const group = {
                        type: 'group',
                        children: []
                    }
                    const intervalCount = Math.floor(derrickConfig.axisData.strickLines.left.length / 5)
                    derrickConfig.axisData.strickLines.left.forEach((p, index) => {
                        if (index % 5 === 0 && Math.floor(index / 5) !== intervalCount) {
                            const echartStrick = derrickConfig.echartsStricks[index].coords[0]
                            const label = {
                                id: 'axisLeftLabel' + index,
                                type: 'text',
                                style: {
                                    text: (derrickConfig.axisMax / intervalCount) * (intervalCount - Math.floor(index / 5)),
                                    font: 'normal 700 22px Microsoft YaHei',
                                    textAlign: 'right',
                                    textVerticalAlign: 'top',
                                    fill: colors.leftLabel
                                },
                                position: [echartStrick[0] + derrickConfig.padLeft + (platformSize.width - derrickSize.width) / 2 - 15, echartStrick[1] + partSize.topRed.height]
                            }
                            group.children.push(label)
                        }
                    })

                    return group
                },
                data: [{ value: 1 }]
            },
            {
                id: 'axisBackTartans',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                polyline: true,
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: derrickConfig.backTartans
                    .concat(derrickConfig.sealBottomRect),
                silent: true,
                lineStyle: {
                    color: colors.backTartans,
                    opacity: 1,
                    width: 1
                },
                zlevel: 70,
                progressiveThreshold: 500,
                progressive: 200,
                animation: false
            },
            {
                id: 'platformRects',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                polyline: true,
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: platformData,
                silent: true,
                lineStyle: {
                    color: colors.platformRect,
                    opacity: 1,
                    width: 1
                },
                zlevel: 90,
                progressiveThreshold: 500,
                progressive: 200
            },
            {
                id: 'drillPipe',
                type: 'custom',
                xAxisIndex: 3,
                yAxisIndex: 3,
                zlevel: 100,
                tooltip: {
                    formatter: (params, ticket, callback) => {
                        return `大钩高度：${params.value[0]}<br/>钻头位置：${params.value[1]}`
                    }
                },
                renderItem: function (parasm, api) {
                    const hookYm = api.value(0) // 大钩位置
                    const bitY_m = api.value(1) // 钻头位置
                    const leftTop = api.coord([0, 0])
                    const wellBottom = _.max([Math.ceil(bitY_m / 1000) * 1000, 6000])
                    // const rightBottom = api.coord([pipeSize.gridWidth, pipeSize.yAxisMax])
                    const hookTopPostionY = ((derrickConfig.axisMax - hookYm) / derrickConfig.axisMax) * derrickSize.height
                    const pipeStartY = hookTopPostionY + pipeSize.hookHeight + pipeSize.hookPipeSapce
                    const pipeHeight = (bitY_m / wellBottom) * 550 + 350 // 像素, 500
                    const pipeEndY = pipeHeight - pipeSize.hookHeight - pipeSize.drillToolHeight
                    const topCenterX = leftTop[0] + pipeSize.gridWidth / 2

                    const group = {
                        type: 'group',
                        children: []
                    }
                    const topToHookTop = {
                        id: 'topToHookLine',
                        type: 'line',
                        shape: {
                            x1: topCenterX,
                            y1: partSize.topRed.height,
                            x2: topCenterX,
                            y2: hookTopPostionY
                        },
                        style: {
                            stroke: colors.hookLine,
                            lineWidth: 3
                        },
                        transition: ['shape']
                    }

                    const hook = {
                        id: 'hook',
                        name: '大钩高度',
                        type: 'image',
                        style: {
                            image: 'data:image/png;base64,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',
                            x: leftTop[0] + pipeSize.gridWidth / 2 - (15) / 2,
                            y: hookTopPostionY,
                            width: 15,
                            height: 15
                        }
                    }
                    const hookText = {
                        id: 'hookText',
                        type: 'text',
                        x: 10,
                        y: hookTopPostionY - 10,
                        style: {
                            text: `${hookYm}`,
                            font: api.font({ fontSize: pumpSize.pumpTextSize, fontWeight: 600 }),
                            textAlign: 'left',
                            textVerticalAlign: 'top',
                            fill: colors.pumpText
                        },
                        z: 100
                    }
                    const hookBottomToPipe = {
                        id: 'hookToPipeLine',
                        type: 'line',
                        shape: {
                            x1: topCenterX,
                            y1: hookTopPostionY + pipeSize.hookHeight,
                            x2: topCenterX,
                            y2: hookTopPostionY + pipeSize.hookHeight + pipeSize.hookPipeSapce
                        },
                        style: {
                            stroke: colors.hookLine,
                            lineWidth: 3
                        },
                        transition: ['shape']
                    }
                    const pipe = {
                        id: 'drillPipe',
                        type: 'rect',
                        shape: {
                            x: leftTop[0] + (pipeSize.gridWidth - pipeSize.pipeWidth) / 2, // + (pipeSize.pipeWidth - partSize.topRed.width) / 2,
                            y: pipeStartY,
                            width: pipeSize.pipeWidth,
                            height: pipeEndY - pipeStartY
                        },
                        style: api.style(),
                        transition: ['shape']
                    }
                    const tool = {
                        id: 'drillTool',
                        name: '钻头位置',
                        type: 'rect',
                        shape: {
                            x: leftTop[0] + (pipeSize.gridWidth - pipeSize.drillToolWidth) / 2,
                            y: pipeEndY,
                            width: pipeSize.drillToolWidth,
                            height: pipeSize.drillToolHeight,
                            r: [1, 1, 5, 5]
                        },
                        style: api.style(),
                        transition: ['shape']
                    }
                    const bit = {
                        id: 'drillBit',
                        name: '钻头位置',
                        type: 'path',
                        x: leftTop[0] + (pipeSize.gridWidth - pipeSize.drillBitWidth) / 2,
                        y: pipeEndY + pipeSize.drillToolHeight,
                        shape: {
                            width: pipeSize.drillBitWidth,
                            height: pipeSize.drillBitHeight,
                            pathData: 'M543,237v-58v-58c0-3.9,1.6-7.4,4.1-9.9c2.5-2.5,6-4.1,9.9-4.1h209.5H976c4.1,0,7.9,3.8,10.6,7.5c2.7,3.8,4.4,7.5,4.4,7.5v57.5V237l58,25l58,25v90v90H895L766.5,353.5L639,467H427v-90v-90l58-25L543,237z'
                        },
                        style: api.style(),
                        transition: ['y']
                    }
                    const bitText = {
                        id: 'bitText',
                        type: 'text',
                        x: 10,
                        y: pipeEndY + pipeSize.drillToolHeight - 10,
                        style: {
                            text: `${bitY_m}`,
                            font: api.font({ fontSize: pumpSize.pumpTextSize, fontWeight: 600 }),
                            textAlign: 'left',
                            textVerticalAlign: 'top',
                            fill: colors.pumpText
                        },
                        z: 100
                    }
                    group.children = [topToHookTop, hook, hookText, hookBottomToPipe, pipe, tool, bit, bitText]
                    return group
                },
                data: [{
                    // [drillHookMeter, drillBitMeter]
                    value: [10, 100, -1],
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#222'
                            }, {
                                offset: 0.5, color: '#fff'
                            }, {
                                offset: 1, color: '#222'
                            }]
                        }
                    }
                }]
            },
            {
                id: 'strata',
                type: 'custom',
                xAxisIndex: 4,
                yAxisIndex: 4,
                zlevel: 100,
                renderItem: function (params, api) {
                    const leftTop = api.coord([0, 0])
                    const part1Bottom = strataSize.height * 0.6

                    // const topCenterX = leftTop[0] + strataSize.width / 2
                    const group = {
                        type: 'group',
                        children: []
                    }
                    const rect1 = {
                        id: 'leftLayer1',
                        type: 'rect',
                        shape: {
                            x: leftTop[0],
                            y: leftTop[1] + 1,
                            width: strataSize.width - 1,
                            height: part1Bottom
                        },
                        style: {
                            fill: 'transparent',
                            decal: {
                                symbol: 'circle',
                                symbolSize: 0.5,
                                color: 'rgba(0,0,0, 0.6)'
                            }
                        }
                    }
                    const rect2 = {
                        id: 'layer2',
                        type: 'rect',
                        shape: {
                            x: leftTop[0],
                            y: leftTop[1] + 1 + part1Bottom,
                            width: strataSize.width - 1,
                            height: strataSize.height * 0.4
                        },
                        style: {
                            fill: 'transparent',
                            decal: {
                                symbol: 'arraow',
                                symbolSize: 0.85,
                                color: 'rgba(0,0,0, 0.6)'
                            }
                        }
                    }
                    const firstLeft = {
                        id: 'firstLeftLine',
                        type: 'line',
                        shape: {
                            x1: leftTop[0] + strataSize.width,
                            y1: leftTop[1],
                            x2: leftTop[0] + strataSize.width,
                            y2: leftTop[1] + strataSize.height
                        }
                    }
                    group.children = [rect1, rect2, firstLeft]
                    return group
                },
                data: [
                    {
                        // strata Layer Meter [top, end, resizeFlag]
                        value: [10, 100, -1]
                    }
                ]
            },
            {
                id: 'strataRight',
                type: 'custom',
                xAxisIndex: 5,
                yAxisIndex: 5,
                zlevel: 100,
                renderItem: function (params, api) {
                    const leftTop = api.coord([0, 0])
                    const part1Bottom = strataSize.height * 0.6

                    const group = {
                        type: 'group',
                        children: []
                    }
                    const rect1 = {
                        id: 'layer1',
                        type: 'rect',
                        shape: {
                            x: leftTop[0],
                            y: leftTop[1] + 1,
                            width: strataSize.width - 1,
                            height: strataSize.height
                        },
                        style: {
                            fill: 'transparent',
                            decal: {
                                symbol: 'circle',
                                symbolSize: 0.5,
                                color: 'rgba(0,0,0, 0.6)'
                            }
                        }
                    }
                    const rect2 = {
                        id: 'layer2',
                        type: 'rect',
                        shape: {
                            x: leftTop[0],
                            y: leftTop[1] + 1 + part1Bottom,
                            width: strataSize.width - 1,
                            height: strataSize.height * 0.4
                        },
                        style: {
                            fill: 'transparent',
                            decal: {
                                symbol: 'arraow',
                                symbolSize: 0.85,
                                color: 'rgba(0,0,0, 0.6)'
                            }
                        }
                    }
                    const firstLeft = {
                        id: 'firstLeftLine',
                        type: 'line',
                        shape: {
                            x1: leftTop[0],
                            y1: leftTop[1],
                            x2: leftTop[0],
                            y2: leftTop[1] + strataSize.height
                        }
                    }
                    group.children = [rect1, rect2, firstLeft]
                    return group
                },
                data: [
                    {
                        // strata Layer Meter [top, end, resizeFalg]
                        value: [10, 100, -1]
                    }
                ]
            },
            {
                id: 'pumpPool',
                type: 'custom',
                xAxisIndex: 6,
                yAxisIndex: 6,
                zlevel: 100,
                renderItem: function (params, api) {
                    const leftTop = [0, 0] // api.coord([0, 0]);
                    const pumpValue1 = api.value(0)
                    const pumpValue2 = api.value(1)
                    const pumpValue3 = api.value(2)
                    const poolValue1 = api.value(3)
                    const poolValue2 = api.value(4)

                    const lgylValue = api.value(5)
                    const ckllValue = api.value(6)
                    function relative (src) {
                        return [leftTop[0] + src.x, leftTop[1] + src.y]
                    }

                    const group = {
                        type: 'group',
                        children: [],
                        x: strataSize.secondLeft + strataSize.width,
                        y: 0
                    }
                    function addLines () {
                        const polyline = {
                            id: 'plPart1',
                            type: 'polyline',
                            shape: {
                                points: [
                                    relative(endPoints.fromPlat),
                                    relative(endPoints.topToRight),
                                    relative(endPoints.pump2Right)
                                ]
                            },
                            style: {
                                stroke: colors.pump,
                                fill: 'transparent',
                                lineWidth: 2
                            }
                        }
                        const polyline3 = {
                            id: 'plPart3',
                            type: 'polyline',
                            shape: {
                                points: [
                                    relative(endPoints.pump1Right),
                                    relative(endPoints.pump3Right)
                                ]
                            },
                            style: {
                                stroke: colors.pump,
                                fill: 'transparent',
                                lineWidth: 2
                            }
                        }
                        const polyline2 = {
                            id: 'plPart2',
                            type: 'polyline',
                            shape: {
                                points: [
                                    relative(endPoints.pump1Right),
                                    relative(endPoints.pump1Left),
                                    relative(endPoints.pump3Left),
                                    relative(endPoints.pump3Right),
                                    relative(endPoints.rightBottom),
                                    relative(endPoints.pool1),
                                    relative(endPoints.pool2),
                                    relative(endPoints.ckll),
                                    relative(endPoints.platRight)
                                ]
                            },
                            style: {
                                stroke: colors.pump,
                                fill: 'transparent',
                                lineWidth: 2
                            }
                        }
                        group.children.push(polyline)
                        group.children.push(polyline2)
                        group.children.push(polyline3)
                    }
                    function addReferencePoints (use) {
                        if (!use) return
                        for (var name in endPoints) {
                            const circle = {
                                id: name,
                                type: 'circle',
                                shape: {
                                    cx: leftTop[0] + endPoints[name].x,
                                    cy: leftTop[1] + endPoints[name].y,
                                    r: 3
                                }
                            }
                            group.children.push(circle)
                        }
                    }

                    const lgyl = {
                        addText: function () {
                            const position = relative({
                                x: endPoints.topToRight.x,
                                y: endPoints.topToRight.y + (endPoints.fromPlat.y - endPoints.topToRight.y) / 2
                            })
                            const text1 = {
                                id: 'lgylText1',
                                type: 'text',
                                rotation: -1 * Math.PI / 2,
                                x: 6 + pumpSize.vTextHeight - pumpSize.vTextFontSize,
                                style: {
                                    text: lgylValue,
                                    font: api.font({ fontSize: pumpSize.vTextFontSize }),
                                    textAlign: 'center',
                                    textVerticalAlign: 'middle',
                                    fill: 'black'
                                },
                                position: position,
                                z: 100
                            }
                            const textTag1 = {
                                id: 'lgylTextTag1',
                                type: 'text',
                                x: 6 + pumpSize.vTextHeight - pumpSize.vTextFontSize + pumpSize.vTextHeight,
                                style: {
                                    text: '立\n管\n压\n力',
                                    font: api.font({ fontSize: 26 }),
                                    textAlign: 'center',
                                    textVerticalAlign: 'middle',
                                    fill: colors.pumpText
                                },
                                position: position,
                                z: 100
                            }
                            const back1 = {
                                id: 'lgylBack',
                                type: 'rect',
                                rotation: -1 * Math.PI / 2,
                                originX: position[0],
                                originY: position[1],
                                shape: {
                                    x: endPoints.topToRight.x - pumpSize.vTextWidth / 2,
                                    y: position[1] - pumpSize.vTextHeight / 2,
                                    width: pumpSize.vTextWidth,
                                    height: pumpSize.vTextHeight
                                },
                                style: {
                                    stroke: '#000',
                                    fill: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#84b0d0'
                                        }, {
                                            offset: 0.5, color: '#87cbe8'
                                        }, {
                                            offset: 1, color: '#84b0d0'
                                        }]
                                    },
                                    lineWidth: 1,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.2)'
                                },
                                z: 90
                            }

                            // const circle = {
                            //     id: name,
                            //     type: 'circle',
                            //     shape: {
                            //         cx: position[0],
                            //         cy: position[1],
                            //         r: 3
                            //     }
                            // }
                            group.children.push(back1, text1, textTag1)
                        }
                    }
                    const ckll = {
                        position: relative({
                            x: endPoints.platRight.x,
                            y: endPoints.platRight.y + pumpSize.vTextWidth / 2 + 25
                        }),
                        addText: function () {
                            const position = this.position
                            const text1 = {
                                id: 'lgylText1',
                                type: 'text',
                                rotation: -1 * Math.PI / 2,
                                x: 6 + pumpSize.vTextHeight - pumpSize.vTextFontSize + (endPoints.platRight.x - endPoints.fromPlat.x),
                                style: {
                                    text: ckllValue,
                                    font: api.font({ fontSize: pumpSize.vTextFontSize }),
                                    textAlign: 'center',
                                    textVerticalAlign: 'middle',
                                    fill: 'black'
                                },
                                position: position,
                                z: 100
                            }
                            const textTag1 = {
                                id: 'lgylTextTag1',
                                type: 'text',
                                x: 12 + pumpSize.vTextHeight - pumpSize.vTextFontSize + pumpSize.vTextHeight,
                                y: endPoints.ckll.y + 55,
                                style: {
                                    text: '出\n口\n流\n量',
                                    font: api.font({ fontSize: 26 }),
                                    textAlign: 'center',
                                    textVerticalAlign: 'middle',
                                    fill: colors.pumpText
                                },
                                position: position,
                                z: 100
                            }
                            const back1 = {
                                id: 'lgylBack',
                                type: 'rect',
                                rotation: -1 * Math.PI / 2,
                                originX: position[0],
                                originY: position[1],
                                shape: {
                                    x: endPoints.topToRight.x - pumpSize.vTextWidth / 2,
                                    y: position[1] - pumpSize.vTextHeight / 2,
                                    width: pumpSize.vTextWidth,
                                    height: pumpSize.vTextHeight
                                },
                                style: {
                                    stroke: '#000',
                                    fill: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#84b0d0'
                                        }, {
                                            offset: 0.5, color: '#87cbe8'
                                        }, {
                                            offset: 1, color: '#84b0d0'
                                        }]
                                    },
                                    lineWidth: 1,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.2)'
                                },
                                z: 90
                            }

                            group.children.push(back1, text1, textTag1)
                        },
                        addReferencePoint: function () {
                            const position = this.position
                            const circle = {
                                id: name,
                                type: 'circle',
                                shape: {
                                    cx: position[0],
                                    cy: position[1],
                                    r: 3
                                }
                            }

                            group.children.push(circle)
                        }
                    }

                    const pumpHeightFix = pumpSize.pumpHeight - 10
                    const pumpLinear = {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#d4d4d4'
                        }, {
                            offset: 0.5, color: '#fff'
                        }, {
                            offset: 1, color: '#d4d4d4'
                        }]
                    }
                    const pump1 = {
                        valueWidth: function () {
                            return (pumpValue1 / pumpSize.valueMax) * pumpSize.pumpWidthTotal + pumpSize.pumpWidthZero
                        },
                        draw: function () {
                            const valueRect = {
                                id: 'pump1Rect',
                                type: 'rect',
                                shape: {
                                    x: endPoints.pump1Left.x + pumpSize.padLeft,
                                    y: endPoints.pump1Left.y - pumpHeightFix / 2,
                                    width: this.valueWidth(),
                                    height: pumpHeightFix
                                },
                                style: {
                                    stroke: '#a52a2a',
                                    fill: pumpLinear,
                                    lineWidth: 2,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.2)'
                                },
                                z: 110,
                                transition: ['shape']
                            }

                            const blankRect = {
                                id: 'pump1RectBlankRight',
                                type: 'rect',
                                shape: {
                                    x: endPoints.pump1Left.x + pumpSize.padLeft + this.valueWidth(),
                                    y: endPoints.pump1Left.y - pumpHeightFix / 2,
                                    width: pumpSize.pumpWidthTotal - this.valueWidth(),
                                    height: pumpHeightFix
                                },
                                style: {
                                    stroke: '#a52a2a',
                                    fill: 'transparent',
                                    lineWidth: 2,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.2)'
                                },
                                z: 110,
                                transition: ['shape']
                            }

                            const textDown = {
                                id: 'pump1Value',
                                type: 'text',
                                x: endPoints.pump1Left.x + pumpSize.padLeft,
                                y: endPoints.pump1Left.y + pumpSize.pumpHeight / 2 + 1,
                                style: {
                                    text: pumpValue1,
                                    font: api.font({ fontSize: pumpSize.pumpTextSize }),
                                    textAlign: 'left',
                                    textVerticalAlign: 'top',
                                    fill: colors.pump
                                },
                                z: 100
                            }

                            const textRight = {
                                id: 'pump1Label',
                                type: 'text',
                                x: endPoints.pump1Left.x + pumpSize.padLeft + pumpSize.pumpWidthTotal + 2,
                                y: 4,
                                style: {
                                    text: '1#',
                                    font: api.font({ fontSize: pumpSize.pumpTextSize }),
                                    textAlign: 'left',
                                    textVerticalAlign: 'top',
                                    fill: colors.pump
                                },
                                z: 100
                            }

                            group.children.push(valueRect, blankRect, textDown, textRight)
                        }
                    }
                    const pump2 = {
                        valueWidth: function () {
                            return (pumpValue2 / pumpSize.valueMax) * pumpSize.pumpWidthTotal + pumpSize.pumpWidthZero
                        },
                        draw: function () {
                            const valueRect = {
                                id: 'pump2Rect',
                                type: 'rect',
                                shape: {
                                    x: endPoints.pump2Left.x + pumpSize.padLeft,
                                    y: endPoints.pump2Left.y - pumpHeightFix / 2,
                                    width: this.valueWidth(),
                                    height: pumpHeightFix
                                },
                                style: {
                                    stroke: '#a52a2a',
                                    fill: pumpLinear,
                                    lineWidth: 2,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.2)'
                                },
                                z: 110,
                                transition: ['shape']
                            }

                            const blankRect = {
                                id: 'pump2RectBlankRight',
                                type: 'rect',
                                shape: {
                                    x: endPoints.pump2Left.x + pumpSize.padLeft + this.valueWidth(),
                                    y: endPoints.pump2Left.y - pumpHeightFix / 2,
                                    width: pumpSize.pumpWidthTotal - this.valueWidth(),
                                    height: pumpHeightFix
                                },
                                style: {
                                    stroke: '#a52a2a',
                                    fill: 'transparent',
                                    lineWidth: 2,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.2)'
                                },
                                z: 110,
                                transition: ['shape']
                            }

                            const textDown = {
                                id: 'pump2Value',
                                type: 'text',
                                x: endPoints.pump2Left.x + pumpSize.padLeft,
                                y: endPoints.pump2Left.y + pumpSize.pumpHeight / 2 + 1,
                                style: {
                                    text: pumpValue2,
                                    font: api.font({ fontSize: pumpSize.pumpTextSize }),
                                    textAlign: 'left',
                                    textVerticalAlign: 'top',
                                    fill: colors.pump
                                },
                                z: 100
                            }

                            const textRight = {
                                id: 'pump2Label',
                                type: 'text',
                                x: endPoints.pump1Left.x + pumpSize.padLeft + pumpSize.pumpWidthTotal + 2,
                                y: 4 + endPoints.pump2Right.y - (pumpSize.pumpHeight / 2),
                                style: {
                                    text: '2#',
                                    font: api.font({ fontSize: pumpSize.pumpTextSize }),
                                    textAlign: 'left',
                                    textVerticalAlign: 'top',
                                    fill: colors.pump
                                },
                                z: 100
                            }

                            group.children.push(valueRect, blankRect, textDown, textRight)
                        }
                    }
                    const pump3 = {
                        valueWidth: function () {
                            return (pumpValue3 / pumpSize.valueMax) * pumpSize.pumpWidthTotal + pumpSize.pumpWidthZero
                        },
                        draw: function () {
                            const valueRect = {
                                id: 'pump3Rect',
                                type: 'rect',
                                shape: {
                                    x: endPoints.pump3Left.x + pumpSize.padLeft,
                                    y: endPoints.pump3Left.y - pumpHeightFix / 2,
                                    width: this.valueWidth(),
                                    height: pumpHeightFix
                                },
                                style: {
                                    stroke: '#a52a2a',
                                    fill: pumpLinear,
                                    lineWidth: 2,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.2)'
                                },
                                z: 110,
                                transition: ['shape']
                            }

                            const blankRect = {
                                id: 'pump3RectBlankRight',
                                type: 'rect',
                                shape: {
                                    x: endPoints.pump3Left.x + pumpSize.padLeft + this.valueWidth(),
                                    y: endPoints.pump3Left.y - pumpHeightFix / 2,
                                    width: pumpSize.pumpWidthTotal - this.valueWidth(),
                                    height: pumpHeightFix
                                },
                                style: {
                                    stroke: '#a52a2a',
                                    fill: 'transparent',
                                    lineWidth: 2,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.2)'
                                },
                                z: 110,
                                transition: ['shape']
                            }

                            const textDown = {
                                id: 'pump3Value',
                                type: 'text',
                                x: endPoints.pump3Left.x + pumpSize.padLeft,
                                y: endPoints.pump3Left.y + pumpSize.pumpHeight / 2 + 1,
                                style: {
                                    text: pumpValue3,
                                    font: api.font({ fontSize: pumpSize.pumpTextSize, fontWeight: 700 }),
                                    textAlign: 'left',
                                    textVerticalAlign: 'top',
                                    fill: 'red'
                                },
                                z: 100
                            }

                            const textRight = {
                                id: 'pump3Label',
                                type: 'text',
                                x: endPoints.pump3Left.x + pumpSize.padLeft + pumpSize.pumpWidthTotal + 2,
                                y: 4 + endPoints.pump3Right.y - (pumpSize.pumpHeight / 2),
                                style: {
                                    text: '3#',
                                    font: api.font({ fontSize: pumpSize.pumpTextSize }),
                                    textAlign: 'left',
                                    textVerticalAlign: 'top',
                                    fill: colors.pump
                                },
                                z: 100
                            }

                            group.children.push(valueRect, blankRect, textDown, textRight)
                        }
                    }

                    const ringRadial = {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'white'
                            },
                            {
                                offset: 1,
                                color: '#a6d3a6'
                            }
                        ]
                    }
                    const valueRingRadial = {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#abd6ab'
                            },
                            {
                                offset: 1,
                                color: '#3fa03f'
                            }
                        ]
                    }
                    const linear = {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#a6d3a6'
                        }, {
                            offset: 0.2, color: '#fff'
                        }, {
                            offset: 1, color: '#a6d3a6'
                        }]
                    }
                    const valueLinear = {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#3fa03f'
                        }, {
                            offset: 0.8, color: '#abd6ab'
                        }, {
                            offset: 1, color: '#3fa03f'
                        }]
                    }
                    const pool1 = {
                        draw: function () {
                            const leftTop = { x: endPoints.pool1.x - poolSize.width / 2, y: endPoints.pool1.y - poolSize.height / 2 }
                            const topRing = {
                                id: 'pool1TopRing',
                                type: 'circle',
                                originX: endPoints.pool1.x,
                                originY: leftTop.y,
                                scaleY: poolSize.ellipseScaleY,
                                shape: {
                                    cx: endPoints.pool1.x,
                                    cy: leftTop.y,
                                    r: poolSize.width / 2
                                },
                                style: {
                                    stroke: '#008000',
                                    fill: ringRadial,
                                    lineWidth: 2
                                },
                                z2: 150,
                                transition: ['shape']
                            }
                            const middleRect = {
                                id: 'pool1Rect',
                                type: 'rect',
                                shape: {
                                    x: leftTop.x,
                                    y: leftTop.y,
                                    width: poolSize.width,
                                    height: poolSize.height
                                },
                                style: {
                                    stroke: 'transparent',
                                    fill: linear,
                                    lineWidth: 0
                                },
                                z2: 130,
                                transition: ['shape']
                            }
                            const bottomRing = {
                                id: 'pool1TopRing',
                                type: 'circle',
                                originX: endPoints.pool1.x,
                                originY: leftTop.y + poolSize.height,
                                scaleY: poolSize.ellipseScaleY,
                                shape: {
                                    cx: endPoints.pool1.x,
                                    cy: leftTop.y + poolSize.height,
                                    r: poolSize.width / 2
                                },
                                style: {
                                    stroke: '#008000',
                                    fill: poolValue1 > 0 ? valueLinear : linear,
                                    lineWidth: 2
                                },
                                z2: 10,
                                transition: ['shape']
                            }
                            const leftLine = {
                                id: 'pool1LeftLine',
                                type: 'line',
                                shape: {
                                    x1: leftTop.x,
                                    y1: leftTop.y,
                                    x2: leftTop.x,
                                    y2: leftTop.y + poolSize.height
                                },
                                style: {
                                    stroke: '#008000',
                                    lineWidth: 2
                                }
                            }
                            const rightLine = {
                                id: 'pool1LeftLine',
                                type: 'line',
                                shape: {
                                    x1: leftTop.x + poolSize.width,
                                    y1: leftTop.y,
                                    x2: leftTop.x + poolSize.width,
                                    y2: leftTop.y + poolSize.height
                                },
                                style: {
                                    stroke: '#008000',
                                    lineWidth: 2
                                }
                            }
                            const textCenter = {
                                id: 'pool1ValueText',
                                type: 'text',
                                style: {
                                    text: poolValue1,
                                    font: api.font({ fontSize: 26, fontWeight: 700 }),
                                    textAlign: 'center',
                                    textVerticalAlign: 'middle',
                                    fill: '#990099'
                                },
                                position: [endPoints.pool1.x, endPoints.pool1.y],
                                z2: 200
                            }
                            const textLabel = {
                                id: 'pool1Label',
                                type: 'text',
                                style: {
                                    text: '总池体积',
                                    font: api.font({ fontSize: 26 }),
                                    textAlign: 'left',
                                    textVerticalAlign: 'bottom',
                                    fill: colors.pumpText
                                },
                                position: [leftTop.x + 20, leftTop.y],
                                z2: 200
                            }

                            group.children.push(bottomRing, middleRect, topRing, leftLine, rightLine, textCenter, textLabel)

                            if (poolValue1 > 0) {
                                const offsetUp = (poolValue1 / poolSize.pool1ValueMax) * poolSize.height
                                const valueTopRing = {
                                    id: 'pool1ValueTopRing',
                                    type: 'circle',
                                    originX: endPoints.pool1.x,
                                    originY: leftTop.y + poolSize.height - offsetUp,
                                    scaleY: poolSize.ellipseScaleY,
                                    shape: {
                                        cx: endPoints.pool1.x,
                                        cy: leftTop.y + poolSize.height - offsetUp,
                                        r: poolSize.width / 2
                                    },
                                    style: {
                                        stroke: '#008000',
                                        fill: valueRingRadial,
                                        lineWidth: 2
                                    },
                                    z2: poolValue1 >= poolSize.pool1ValueMax ? 160 : 140,
                                    transition: ['shape']
                                }
                                const valueRect = {
                                    id: 'pool1ValueRect',
                                    type: 'rect',
                                    shape: {
                                        x: leftTop.x,
                                        y: leftTop.y + poolSize.height - offsetUp,
                                        width: poolSize.width,
                                        height: offsetUp + 1
                                    },
                                    style: {
                                        stroke: 'transparent',
                                        fill: valueLinear,
                                        lineWidth: 0
                                    },
                                    z2: 130,
                                    transition: ['shape']
                                }
                                group.children.push(valueRect, valueTopRing)
                            }
                        }
                    }
                    const pool2 = {
                        draw: function () {
                            const leftTop = { x: endPoints.pool2.x - poolSize.width / 2, y: endPoints.pool2.y - poolSize.height / 2 }
                            const topRing = {
                                id: 'pool2TopRing',
                                type: 'circle',
                                originX: endPoints.pool2.x,
                                originY: leftTop.y,
                                scaleY: poolSize.ellipseScaleY,
                                shape: {
                                    cx: endPoints.pool2.x,
                                    cy: leftTop.y,
                                    r: poolSize.width / 2
                                },
                                style: {
                                    stroke: '#008000',
                                    fill: ringRadial,
                                    lineWidth: 2
                                },
                                z2: 150,
                                transition: ['shape']
                            }
                            const middleRect = {
                                id: 'pool2Rect',
                                type: 'rect',
                                shape: {
                                    x: leftTop.x,
                                    y: leftTop.y,
                                    width: poolSize.width,
                                    height: poolSize.height
                                },
                                style: {
                                    stroke: '#008000',
                                    fill: linear,
                                    lineWidth: 0
                                },
                                z2: 130,
                                transition: ['shape']
                            }
                            const bottomRing = {
                                id: 'pool2TopRing',
                                type: 'circle',
                                originX: endPoints.pool2.x,
                                originY: leftTop.y + poolSize.height,
                                scaleY: poolSize.ellipseScaleY,
                                shape: {
                                    cx: endPoints.pool2.x,
                                    cy: leftTop.y + poolSize.height,
                                    r: poolSize.width / 2
                                },
                                style: {
                                    stroke: '#008000',
                                    fill: poolValue2 > 0 ? valueLinear : linear,
                                    lineWidth: 2
                                },
                                z2: 10,
                                transition: ['shape']
                            }
                            const leftLine = {
                                id: 'pool2LeftLine',
                                type: 'line',
                                shape: {
                                    x1: leftTop.x,
                                    y1: leftTop.y,
                                    x2: leftTop.x,
                                    y2: leftTop.y + poolSize.height
                                },
                                style: {
                                    stroke: '#008000',
                                    lineWidth: 2
                                }
                            }
                            const rightLine = {
                                id: 'pool2LeftLine',
                                type: 'line',
                                shape: {
                                    x1: leftTop.x + poolSize.width,
                                    y1: leftTop.y,
                                    x2: leftTop.x + poolSize.width,
                                    y2: leftTop.y + poolSize.height
                                },
                                style: {
                                    stroke: '#008000',
                                    lineWidth: 2
                                }
                            }
                            const textCenter = {
                                id: 'pool2ValueText',
                                type: 'text',
                                style: {
                                    text: poolValue2,
                                    font: api.font({ fontSize: 26, fontWeight: 700 }),
                                    textAlign: 'center',
                                    textVerticalAlign: 'middle',
                                    fill: '#990099'
                                },
                                position: [endPoints.pool2.x, endPoints.pool2.y],
                                z2: 200
                            }
                            const textLabel = {
                                id: 'pool2Label',
                                type: 'text',
                                style: {
                                    text: '体积变化量',
                                    font: api.font({ fontSize: 26 }),
                                    textAlign: 'left',
                                    textVerticalAlign: 'top',
                                    fill: colors.pumpText
                                },
                                position: [leftTop.x + 20, leftTop.y + poolSize.height + 15],
                                z2: 200
                            }

                            group.children.push(bottomRing, middleRect, topRing, leftLine, rightLine, textCenter, textLabel)

                            if (poolValue2 > 0) {
                                const offsetUp = (poolValue2 / poolSize.pool2ValueMax) * poolSize.height
                                const valueTopRing = {
                                    id: 'pool2ValueTopRing',
                                    type: 'circle',
                                    originX: endPoints.pool2.x,
                                    originY: leftTop.y + poolSize.height - offsetUp,
                                    scaleY: poolSize.ellipseScaleY,
                                    shape: {
                                        cx: endPoints.pool2.x,
                                        cy: leftTop.y + poolSize.height - offsetUp,
                                        r: poolSize.width / 2
                                    },
                                    style: {
                                        stroke: '#008000',
                                        fill: valueRingRadial,
                                        lineWidth: 2
                                    },
                                    z2: poolValue2 >= poolSize.pool2ValueMax ? 160 : 140,
                                    transition: ['shape']
                                }
                                const valueRect = {
                                    id: 'pool2ValueRect',
                                    type: 'rect',
                                    shape: {
                                        x: leftTop.x,
                                        y: leftTop.y + poolSize.height - offsetUp,
                                        width: poolSize.width,
                                        height: offsetUp + 1
                                    },
                                    style: {
                                        stroke: 'transparent',
                                        fill: valueLinear,
                                        lineWidth: 0
                                    },
                                    z2: 130,
                                    transition: ['shape']
                                }
                                group.children.push(valueRect, valueTopRing)
                            } else {

                            }
                        }
                    }

                    addLines()
                    lgyl.addText()
                    ckll.addText()
                    pump1.draw()
                    pump2.draw()
                    pump3.draw()
                    pool1.draw()
                    pool2.draw()
                    addReferencePoints()
                    return group
                },
                data: [
                    {
                        value: [0, 0, 0, 0, 0, 0, 0, 0]
                    }
                ]
            }
        ]
    }
}
