<template>
    <div class="container">

        <div class="left">

            <div style="display: flex;align-items: center;height: 44px;">
                <img src="../../assets/img/big_screen_1.png" />
                <div style="font-size: 18px;color: white;margin-left: 5px;">大车</div>


                <div style="display: flex;flex: 1;justify-content: end;">

                    <template v-for="(item) in deviceData.craneCurrent">
                        <div style="display: flex;flex-direction: column;align-items: center;margin-right: 20px;">
                            <div style="color: #9BAEC4;font-size: 16px;">{{ item.variableName }}</div>
                            <div style="color: white;font-size: 16px;margin-top: 5px;font-weight: Bold;">{{
                                item.value ?? '--' }}{{ item.unitName ?? '' }}</div>
                        </div>
                    </template>

                    <template v-for="(item) in deviceData.cranePower">
                        <div style="display: flex;flex-direction: column;align-items: center;margin-right: 20px;">
                            <div style="color: #9BAEC4;font-size: 16px;">{{ item.variableName }}</div>
                            <div style="color: white;font-size: 16px;margin-top: 5px;font-weight: Bold;">{{
                                item.value ?? '--' }}{{ item.unitName ?? '' }}</div>
                        </div>
                    </template>

                </div>

            </div>

            <div style="background: rgba(87, 253, 243, 0.3);margin: 60px 0;width: 100%;height: 1px;"></div>

            <div style="display: flex;width: 100%;flex: 1;" ref="bigCarElectricCurrentRef"></div>


            <div style="height: 50px;"></div>

            <div style="display: flex;width: 100%;flex: 1;" ref="bigCarPowerRef"></div>

        </div>

        <div class="right" ref="rightRef">

            <el-carousel indicator-position="outside" :height="carouselHeight + 'px'" :interval="10000">
                <el-carousel-item v-for="(item, index) in deviceData.trolleys" :key="index">

                    <div style="display: flex;align-items: center;height: 44px;">
                        <img src="../../assets/img/big_screen_1.png" />
                        <div style="font-size: 18px;color: white;margin-left: 5px;">{{ item.name }}</div>

                        <div style="display: flex;flex: 1;justify-content: end;">

                            <template v-for="(item2) in item.currents">
                                <div style="display: flex;flex-direction: column;align-items: center;margin-right: 20px;">
                                    <div style="color: #9BAEC4;font-size: 16px;">{{ item2.variableName }}</div>
                                    <div style="color: white;font-size: 16px;margin-top: 8px;font-weight: Bold;">{{
                                        item2.value ?? '--' }}{{ item2.unitName ?? '' }}</div>
                                </div>
                            </template>

                            <template v-for="(item2) in item.powers">
                                <div style="display: flex;flex-direction: column;align-items: center;margin-right: 20px;">
                                    <div style="color: #9BAEC4;font-size: 16px;">{{ item2.variableName }}</div>
                                    <div style="color: white;font-size: 16px;margin-top: 5px;font-weight: Bold;">{{
                                        item2.value ?? '--' }}{{ item2.unitName ?? '' }}</div>
                                </div>
                            </template>

                            <template v-for="(item2) in item.hoists.currents">
                                <div style="display: flex;flex-direction: column;align-items: center;margin-right: 20px;">
                                    <div style="color: #9BAEC4;font-size: 16px;">{{ item2.variableName }}</div>
                                    <div style="color: white;font-size: 16px;margin-top: 5px;font-weight: Bold;">{{
                                        item2.value ?? '--' }}{{ item2.unitName ?? '' }}</div>
                                </div>
                            </template>

                            <template v-for="(item2) in item.hoists.weights">
                                <div style="display: flex;flex-direction: column;align-items: center;margin-right: 20px;">
                                    <div style="color: #9BAEC4;font-size: 16px;">{{ item2.variableName }}</div>
                                    <div style="color: white;font-size: 16px;margin-top: 5px;font-weight: Bold;">{{
                                        item2.value ?? '--' }}{{ item2.unitName ?? '' }}</div>
                                </div>
                            </template>

                        </div>

                    </div>


                    <div style="background: rgba(87, 253, 243, 0.3);margin: 60px 0;width: 100%;height: 1px;"></div>

                    <div style="display: flex;width: 100%;height: calc(100% - 164px);">
                        <div style="display: flex;flex: 1;flex-direction: column;height: calc(100% - 10px);">
                            <small-car-curve name="小车电流" :data="item.currents" style="width: 100%;flex: 1;">

                            </small-car-curve>
                            <div style="height: 50px;"></div>
                            <small-car-curve name="小车功率" :data="item.powers" style="width: 100%;flex: 1;">

                            </small-car-curve>
                        </div>

                        <div style="width: 20px;"></div>

                        <div style="display: flex;flex: 1;flex-direction: column;height: calc(100% - 10px);">
                            <hoist-curve name="起升电流" :data="item.hoists.currents" style="width: 100%;flex: 1;">

                            </hoist-curve>
                            <div style="height: 50px;"></div>
                            <hoist-curve name="起升载荷" :data="item.hoists.weights" style="width: 100%;flex: 1;">

                            </hoist-curve>
                        </div>
                    </div>

                </el-carousel-item>
            </el-carousel>

        </div>
    </div>
</template>

<script setup lang="ts">
import { getDeviceCurves } from '@/api/bigScreen';
import { getM_S } from '@/utils/dateUtil';
import * as echarts from 'echarts'
import { onSubscribe, onUnsubscribe } from '@/utils/tools'
import smallCarCurve from '@/components/small-car-curve/index.vue'
import hoistCurve from '@/components/hoist-curve/index.vue'
const props = defineProps({
    deviceId: {
        type: Number,
        default: 0
    },
    deviceCode: {
        type: String,
        default: ''
    }
})



const deviceId = ref(0)
const deviceCode = ref('')

const bigCarElectricCurrentRef: any = ref(null)
const bigCarElectricCurrentChart: any = markRaw({ value: null })
const carouselHeight = ref(700)
const rightRef: any = ref(null)

const bigCarPowerRef: any = ref(null)
const bigCarPowerChart: any = markRaw({ value: null })


const deviceData: any = ref({})

const timer: any = ref('')

const colors1 = ['rgba(121, 80, 253, 1)', 'rgba(17, 212, 104, 1)', 'rgba(128, 147, 69, 1)', 'rgba(21, 157, 253, 1)']
const colors2 = ['rgba(121, 80, 253, 0.4)', 'rgba(17, 212, 104, 0.4)', 'rgba(128, 147, 69, 0.4)', 'rgba(21, 157, 253, 0.4)']


onMounted(async () => {
    deviceId.value = props.deviceId
    deviceCode.value = props.deviceCode

    bigCarElectricCurrentChart.value = echarts.init(bigCarElectricCurrentRef.value)
    bigCarPowerChart.value = echarts.init(bigCarPowerRef.value)
    getData()


    var rightHeight = rightRef.value.clientHeight
    carouselHeight.value = rightHeight - 60
    window.addEventListener('resize', () => {

        rightHeight = rightRef.value.clientHeight
        carouselHeight.value = rightHeight - 65
        setTimeout(() => {
            bigCarElectricCurrentChart.value.resize()
            bigCarPowerChart.value.resize()
        }, 300);
    })
})



const getData = async () => {
    const res: any = await getDeviceCurves({ deviceId: deviceId.value })
    deviceData.value = res

    //大车电流
    const series = res.craneCurrent.map((item: any, index: number) => {
        return {
            data: [item.value ?? '0'],
            type: 'line',
            color: colors1[index],
            name: item.variableName,
            areaStyle: {
                color: colors2[index]
            },
            symbolSize: 0,
        }
    })
    if (series.length > 0) {
        bigCarElectricCurrentOption.series = series
    }
    bigCarElectricCurrentChart.value.setOption(bigCarElectricCurrentOption)


    //大车功率
    const series2 = res.cranePower.map((item: any, index: number) => {
        return {
            data: [item.value ?? '0'],
            type: 'line',
            color: colors1[index],
            name: item.variableName,
            areaStyle: {
                color: colors2[index]
            },
            symbolSize: 0,
        }
    })
    if (series2.length > 0) {
        bigCarPowerOption.series = series2
    }
    bigCarPowerChart.value.setOption(bigCarPowerOption)


    startTimer()


    onSubscribe([`Json/${deviceCode.value}`], (topic: string, payload: any) => {

        const jsonArray = JSON.parse(payload).Items
        jsonArray.forEach((item: any) => {
            const mqttValue = item.Value
            const mqttCode = item.Code

            //大车电流
            deviceData.value.craneCurrent.forEach((item2: any) => {
                if (item2.code == mqttCode) {
                    item2.value = formatValue(mqttValue, item2.translate)
                    return
                }
            })

            //大车功率
            deviceData.value.cranePower.forEach((item2: any) => {
                if (item2.code == mqttCode) {
                    item2.value = formatValue(mqttValue, item2.translate)
                    return
                }
            })

            //小车
            deviceData.value.trolleys.forEach((item2: any) => {

                //电流
                item2.currents.forEach((item3: any) => {
                    if (item3.code == mqttCode) {
                        item3.value = formatValue(mqttValue, item3.translate)
                        return
                    }
                })

                //功率
                item2.powers.forEach((item3: any) => {
                    if (item3.code == mqttCode) {
                        item3.value = formatValue(mqttValue, item3.translate)
                        return
                    }
                })

                //吊钩 电流
                item2.hoists.currents.forEach((item3: any) => {
                    if (item3.code == mqttCode) {
                        item3.value = formatValue(mqttValue, item3.translate)
                        return
                    }
                })
                //吊钩 重量
                item2.hoists.weights.forEach((item3: any) => {
                    if (item3.code == mqttCode) {
                        item3.value = formatValue(mqttValue, item3.translate)
                        return
                    }
                })
            })
        })
    })

}


const startTimer = () => {

    timer.value = setInterval(() => {

        setBigCurrent()
        setBigPower()
    }, 1000)
}


const setBigCurrent = () => {
    let timeArr: any = bigCarElectricCurrentOption.xAxis.data
    if (timeArr.length > 60) {
        timeArr.shift()
    }
    timeArr.push(getM_S())
    bigCarElectricCurrentOption.xAxis.data = timeArr

    //循环图表series
    bigCarElectricCurrentOption.series.forEach((item: any, index: number) => {
        let arr: any = item.data
        if (arr.length > 60) {
            arr.shift()
        }

        //取出电流数据
        if (index <= deviceData.value.craneCurrent.length - 1) {
            const item2 = deviceData.value.craneCurrent[index]
            arr.push(item2.value ?? '0')
            item.data = arr
        } else {
            arr.push('0')
            item.data = arr
        }

    })
    //取出最大值
    const a: any = bigCarElectricCurrentOption.series.map((item: any) => {
        return Math.max(...item.data)
    })
    bigCarElectricCurrentOption.yAxis.max = Math.ceil(Math.max(...a) * 1.2)
    bigCarElectricCurrentChart.value.setOption(bigCarElectricCurrentOption)
}


const setBigPower = () => {
    let timeArr: any = bigCarPowerOption.xAxis.data
    if (timeArr.length > 60) {
        timeArr.shift()
    }
    timeArr.push(getM_S())
    bigCarPowerOption.xAxis.data = timeArr

    //循环图表series
    bigCarPowerOption.series.forEach((item: any, index: number) => {
        let arr: any = item.data
        if (arr.length > 60) {
            arr.shift()
        }
        //取出电流数据
        if (index <= deviceData.value.cranePower.length - 1) {
            const item2 = deviceData.value.cranePower[index]
            arr.push(item2.value ?? '0')
            item.data = arr
        } else {
            arr.push('0')
            item.data = arr
        }
    })

    //取出最大值
    const a: any = bigCarPowerOption.series.map((item: any) => {
        return Math.max(...item.data)
    })
    bigCarPowerOption.yAxis.max = Math.ceil(Math.max(...a) * 1.2)
    bigCarPowerChart.value.setOption(bigCarPowerOption)
}




onUnmounted(() => {
    clearInterval(timer.value)
    onUnsubscribe(`Json/${deviceCode.value}`)
})


let bigCarElectricCurrentOption = {
    grid: {
        left: '3%', top: '25%', right: '3%', bottom: 0, containLabel: true
    },
    legend: {
        icon: 'roundRect',
        textStyle: {
            color: colors1,
        },
        right: '2%'
    },
    title: {
        text: '大车电流',
        textStyle: {
            color: '#ffffff',
            fontSize: 16
        },
        top: 0
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
            show: false,
        },
        axisTick: { show: false },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(87, 253, 243, 0.2)',
                width: 0.5,
            }
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        data: []
    },
    yAxis:
    {
        max: 5,
        type: 'value',
        splitLine: {
            lineStyle: {
                color: 'rgba(87, 253, 243, 0.2)',
                width: 0.5,
            }
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        axisTick: { show: false },
    }
    ,
    series: [{
        data: [0],
        type: 'line',
        color: 'rgba(121, 80, 253, 0.4)',
        areaStyle: {
            color: 'rgba(121, 80, 253, 0.4)'
        },
        symbolSize: 0,
    }]
};


let bigCarPowerOption = {
    grid: {
        left: '3%', top: '25%', right: '3%', bottom: 0, containLabel: true
    },
    legend: {
        icon: 'roundRect',
        textStyle: {
            color: colors1,
        },
        right: '2%'
    },
    title: {
        text: '大车功率',
        textStyle: {
            color: '#ffffff',
            fontSize: 16
        },
        top: 0
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisTick: { show: false },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(87, 253, 243, 0.2)',
                width:0.5,
            }
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        data: []
    },
    yAxis: {
        max: 5,
        type: 'value',
        splitLine: {
            lineStyle: {
                color: 'rgba(87, 253, 243, 0.2)',
                width:0.5,
            }
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        axisTick: { show: false },
    },
    series: [
        {
            data: [0],
            type: 'line',
            color: 'rgba(121, 80, 253, 0.4)',
            areaStyle: {
                color: 'rgba(121, 80, 253, 0.4)'
            },
            symbolSize: 0,
        }
    ]
};



</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.left {
    width: calc(35% - 50px);
    height: calc(100% - 120px);
    display: flex;
    flex-direction: column;
    margin-left: 50px;
    padding: 30px 27px 50px 27px;
    background: rgba(2, 69, 135, 0.6);
}





.right {
    width: calc(65% - 80px);
    height: calc(100% - 120px);
    display: flex;
    flex-direction: column;
    margin-right: 50px;
    margin-left: 30px;
    padding: 30px 27px 0 27px;
    background: rgba(2, 69, 135, 0.6);
}
</style>
