<template>
    <div style="display: flex;width: 100%;height: 100%;">
        <div class="left">
            <div class="real-data-bg">
                <img src="../../assets/img/big_screen_1.png" />
                <div class="real-data-title">实时数据</div>
            </div>

            <div class="big-car-bg">
                <img src="../../assets/img/big_screen_big_car.png" />

                <div class="big-car-lable">大车档位</div>

                <div class="gear" style="width: 100px;text-align: center;">{{ formatGears(deviceData.craneGear) }}</div>

                <div style="background: transparent;width: 50px;height: 2px;"></div>
            </div>


            <div class="small-car-bg">

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

                        <div class="small-car-list">
                            <div class="car-name">{{ item.name }}</div>

                            <div style="margin-top: 14px;display: flex;width: 100%;align-items: center;">
                                <div style="width: 195px;">
                                    <img style="object-position:-10px;" src="../../assets/img/big_screen_small_car.png" />
                                </div>

                                <div style="display: flex;width: 100%;">
                                    <div class="col-block">主钩</div>

                                    <div class="hook-bg" style="align-items: center;">

                                        <div style="display: flex;flex-direction: column;flex: 1;padding-left: 15%;">
                                            <div class="car-name">档位</div>
                                            <div class="gear" style="margin: 10px 0px 0px 0px;">{{
                                                formatGears(item.hoists[0].gear) }}
                                            </div>
                                        </div>
                                        <div style="display: flex;flex-direction: column;flex: 1;">
                                            <div style="display: flex;">
                                                <div class="car-name">载荷</div>
                                                <div class="overloading"
                                                    :class="{ 'alarm': item.hoists[0].weight.light?.value == 'true' }"
                                                    style="margin-left: 5px;">{{ item.hoists[0].weight.light?.value ==
                                                        'true'
                                                        ? '超载'
                                                        :
                                                        '正常' }}
                                                </div>
                                            </div>
                                            <div class="gear"
                                                :class="{ 'alarm': item.hoists[0].weight.light?.value == 'true' }"
                                                style="margin: 10px 0px 0px 0px;">{{ (item.hoists[0].weight.value ?? '0') +
                                                    item.hoists[0].weight.unit }}
                                            </div>
                                        </div>

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


                            <div style="display: flex;width: 100%;margin-top: 5px;">
                                <div style="display: flex;flex-direction: column;width: 195px;">
                                    <div class="car-name">档位</div>
                                    <div class="gear" style="margin: 9px 0px 15px 0px;">{{ formatGears(item.gear) }}</div>
                                    <div hidden style="background: #19FE85;width: 50px;height: 2px;"></div>
                                </div>

                                <div style="display: flex;width: 100%;" v-if="item.hoists.length > 1">
                                    <div class="col-block">副钩</div>
                                    <div class="hook-bg" style="align-items: center;">
                                        <div style="display: flex;flex-direction: column;flex: 1;padding-left: 15%;">
                                            <div class="car-name">档位</div>
                                            <div class="gear" style="margin: 10px 0px 0px 0px;">{{
                                                formatGears(item.hoists[1].gear) }}
                                            </div>
                                        </div>
                                        <div style="display: flex;flex-direction: column;flex: 1;">
                                            <div style="display: flex;">
                                                <div class="car-name">载荷</div>
                                                <div class="overloading"
                                                    :class="{ 'alarm': isTrue(item.hoists[1].weight.light?.value) }"
                                                    style="margin-left: 5px;">{{ isTrue(item.hoists[1].weight.light?.value) ?
                                                        '超载' : '正常' }}
                                                </div>
                                            </div>
                                            <div class="gear"
                                                :class="{ 'alarm': isTrue(item.hoists[1].weight.light?.value) }"
                                                style="margin: 10px 0px 0px 0px;">{{ (item.hoists[1].weight.value ?? '0') +
                                                    item.hoists[1].weight.unit }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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

            </div>


            <div class="real-data-bg" style="margin-top: 31px;">
                <img src="../../assets/img/big_screen_1.png" />
                <div class="real-data-title">实时状态</div>
            </div>

            <div class="real-data-container" ref="realDataContainerRef">

                <el-carousel indicator-position="outside" :height="realDataBinnerHeight + 'px'" :interval="10000">
                    <el-carousel-item v-for="(group, index1) in switchVariableArr" :key="index1">

                        <div class="real-data-list">
                            <template v-for="child in group">
                                <div :class="['real-data-list-item', child.value ? child.trueColor : child.falseColor]">
                                    <div
                                        :class="['real-data-text-color', child.value ? child.trueColor : child.falseColor]">
                                        {{ child.variableName }}
                                    </div>
                                    <div
                                        :class="['real-data-state-rectangle', child.value ? child.trueColor : child.falseColor]">
                                    </div>
                                </div>
                            </template>
                        </div>

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

            </div>

        </div>



        <div class="middle">
            <div class="total-contactor-container" v-if="deviceData.totalContactor">
                <div class="total-contactor">{{ '总接触器｜' + deviceData.totalContactor ? '开启' : '闭合' }}</div>
            </div>

            <div class="device-img-concainer">
                <img style="max-width: 100%;max-height: 100%;" :src="deviceData.imageSource" />
            </div>

        </div>


        <div class="right" style="align-items: flex-end;">
            <div class="real-data-bg">
                <img src="../../assets/img/big_screen_1.png" />
                <div class="real-data-title">报警</div>
            </div>


            <div class="alarm-warning-container">
                <div style="display: flex;flex-direction: column;align-items: center;" v-if="alarmRecordArr.length == 0">
                    <img style="width: 170px; height: 170px;" src="../../assets/img/big_screen_no_alarm_.png" />
                    <div style="color: white;font-size: 13px;margin-top: 10px;">暂无报警记录</div>
                </div>
                <vue3-seamless-scroll v-if="alarmRecordArr.length > 0" :list="alarmRecordArr" :step="0.3" :hover="true">
                    <template v-for="item in alarmRecordArr">
                        <div :class="['item', item.status == 1 ? 'red' : '']">
                            <div class="alarm-warning-state" :class="{ 'red': item.status == 1 }">{{ item.status == 1 ? '报警'
                                :
                                '恢复' }}</div>
                            <div class="alarm-warning-state-right">
                                <div class="alarm-warning-text" :class="{ 'red': item.status == 1 }">{{ item.message }}
                                </div>
                                <div class="alarm-warning-text" :class="{ 'red': item.status == 1 }">{{
                                    filterTime(item.time)
                                }}</div>
                            </div>
                        </div>
                    </template>
                </vue3-seamless-scroll>

            </div>


            <div class="real-data-bg" style="margin-top: 31px;">
                <img src="../../assets/img/big_screen_1.png" />
                <div class="real-data-title">工作电流</div>
            </div>

            <div class="working-current-container">

                <el-carousel indicator-position="outside" height="122px" :interval="10000">
                    <el-carousel-item v-for="(group, index1) in workingCurrentArr" :key="index1">

                        <div class="working-current-list">
                            <template v-for="child in group">
                                <echart-gauge :value="child.value" :unit="child.unitName" :maxValue="child.formula"
                                    :title="child.variableName" style="width: 142px;height: 120px;">
                                </echart-gauge>
                            </template>
                        </div>

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


            <div class="real-data-bg" style="margin-top: 31px;">
                <img src="../../assets/img/big_screen_1.png" />
                <div class="real-data-title">工作数据</div>
            </div>


            <div class="real_data_variable_container" ref="valueVariableContainerRef">

                <el-carousel indicator-position="outside" :height="valueVariableCarouselHeight + 'px'" :interval="10000">
                    <el-carousel-item v-for="(group, index1) in valueVariableArr" :key="index1">
                        <div class="variable_list">
                            <template v-for="child in group">
                                <div class="real_data_variable_item">
                                    <div class="variable_name">{{ child.variableName }}</div>
                                    <div style="display: flex;margin-top: 5px;">
                                        <div class="variable_value">{{ child.value ?? '--' }}</div>
                                        <div class="variable_value">{{ child.unitName }}</div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </el-carousel-item>
                </el-carousel>

            </div>

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

<script setup lang="ts">
import { getAlarmRecord, getSingleDeviceData } from '@/api/bigScreen';
import { filterTime } from '@/utils/dateUtil'
import { onSubscribe, onUnsubscribe, formatGears, formatValue, isTrue } from '@/utils/tools';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const realDataBinnerHeight = ref(320)
const valueVariableCarouselHeight = ref(270)
const realDataContainerRef: any = ref(null)
const valueVariableContainerRef: any = ref(null)

const props = defineProps({
    deviceId: {
        type: Number,
        default: 0
    },
    deviceCode: {
        type: String,
        default: ''
    }
})


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

const deviceData: any = ref({})

const switchVariableArr: any = ref([])

const workingCurrentArr: any = ref([])

const alarmRecordArr: any = ref([]);

const valueVariableArr: any = ref([]);



/**
 * 拆分数组
 * @param array 数组
 * @param size 拆分的数量
 */
const chunkArray = (array: any, size: number) => {
    const arr: any = []
    for (let index = 0; index < array.length; index += size) {
        arr.push(array.slice(index, index + size));
    }
    return arr;
}



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

    window.addEventListener('resize', () => {

        let a = realDataContainerRef.value.clientHeight
        realDataBinnerHeight.value = a - 40
        switchVariableArr.value = chunkArray(deviceData.value.switchVariables, a > 400 ? 14 : 12)


        var b = valueVariableContainerRef.value.clientHeight - 40
        valueVariableCarouselHeight.value = b
        valueVariableArr.value = chunkArray(deviceData.value.valueVariables, b > 350 ? 14 : 12)

    });

})


//获取设备数据
const getDeviceData = async () => {

    const res: any = await getSingleDeviceData({ deviceId: deviceId.value })
    deviceData.value = res

    let a = realDataContainerRef.value.clientHeight - 70
    realDataBinnerHeight.value = a
    //开关量
    switchVariableArr.value = chunkArray(res.switchVariables, a > 400 ? 14 : 12)
    //工作电流
    workingCurrentArr.value = chunkArray(res.currentVariables, 3)

    const b = valueVariableContainerRef.value.clientHeight - 40
    valueVariableCarouselHeight.value = b
    valueVariableArr.value = chunkArray(res.valueVariables, b > 350 ? 14 : 12)

    const record = await getAlarmRecord({ deviceId: deviceId.value, maxCount: 10 })
    alarmRecordArr.value = record


    onSubscribe([`Json/${deviceCode.value}`], (topic: string, payload: any) => {
        const jsonArray = JSON.parse(payload).Items
        parseMqttData(jsonArray)
    })
}


//解析数据
const parseMqttData = (jsonArray: any) => {
    jsonArray.forEach((res: any) => {
        const { Value, Code } = res

        //大车档位
        const craneGear = deviceData.value.craneGear
        if (craneGear) {
            if (parseGear(craneGear, Code, Value)) {
                return
            }
        }

        //小车
        deviceData.value.trolleys.forEach((item: any) => {
            //档位
            if (parseGear(item.gear, Code, Value)) {
                return
            }
            //吊钩
            item.hoists.forEach((item: any) => {
                //档位
                if (parseGear(item.gear, Code, Value)) {
                    return
                }
                //重量
                const weight = item.weight
                if (weight?.code == Code) {
                    weight.value = formatValue(Value, weight.translate)
                    return
                }
                //超载
                const light = weight?.light
                if (light?.code == Code) {
                    light.value = light.isReverse != Value
                    return
                }
            })
        })

        //开关量
        switchVariableArr.value.forEach((item: any) => {
            const result = item.find((item: any) => item.code == Code)
            if (result) {
                result.value = result.isReverse != Value
                return
            }
        })

        //工作电流
        workingCurrentArr.value.forEach((item: any) => {
            const result = item.find((item: any) => item.code == Code)
            if (result) {
                console.log(res)
                result.value = formatValue(Value, result.translate)
                return
            }
        })

        //模拟量
        valueVariableArr.value.forEach((item: any) => {
            const result = item.find((item: any) => item.code == Code)
            if (result) {
                if (result.variableType == 10) {
                    result.value = Value === true ? '开启' : '闭合'
                } else {
                    result.value = formatValue(Value, result.translate)
                }
                return
            }
        })
    })
}




onUnmounted(() => {
    onUnsubscribe(`Json/${deviceCode.value}`)
})
</script>

<style lang="less" scoped>
.left {
    width: 31%;
    display: flex;
    flex-direction: column;
    padding-left: 30px;
}


.real-data-bg {
    width: 100%;
    max-width: 450px;
    height: 40px;
    display: flex;
    background-image: url(../../assets/img/big_screen_real_data_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    align-items: center;
    padding: 0 20px;
}



.real-data-title {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-left: 15px;
}

.big-car-bg {
    width: 100%;
    max-width: 450px;
    height: 100px;
    margin-top: 27px;
    display: flex;
    background-image: url(../../assets/img/big_screen_left_col_line.png);
    background-repeat: repeat-x;
    background-size: 100% 100%;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
}

.small-car-bg {
    margin-top: 27px;
    background-image: url(../../assets/img/big_screen_left_col_line2.png);
    background-repeat: repeat-x;
    background-size: 100% 100%;
    max-width: 450px;
    min-height: 150px;
    padding: 19px 20px 13px 20px;
    display: flex;
    flex-direction: column;
}


.small-car-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.car-name {
    font-size: 16px;
    color: white;
}

.col-block {
    width: 35px;
    height: 90px;
    background: #267685;
    color: white;
    font-weight: bold;
    font-size: 16px;
    writing-mode: vertical-lr;
    text-align: center;
    padding-left: 5px;
    letter-spacing: 5px;

}

.hook-bg {
    width: 100%;
    min-height: 90px;
    background-image: url(../../assets/img/big_screen_left_hor_line1.png);
    background-size: 100% 100%;
    display: flex;
}


.overloading {
    background-image: url(../../assets/img/big_screen_rect1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 10px;
    text-align: center;
    padding-right: 3px;
    color: white;
    width: 45px;
    height: 19px;
    line-height: 19px;

    &.alarm {
        background-image: url(../../assets/img/big_screen_rect2.png);
    }
}

.big-car-lable {
    font-size: 16px;
    color: white;
}

.gear {
    color: #57FDF3;
    font-weight: bold;

    &.alarm {
        color: #FD4142;
    }
}


.real-data-container {
    margin-top: 20px;
    max-width: 450px;
    overflow: hidden;
    flex: 1;
}

.real-data-list {
    display: grid;
    gap: 15px 20px;
    grid-template-columns: 1fr 1fr;
}

.real-data-list-item {
    display: flex;
    width: 200px;
    height: 38px;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    background-image: url(../../assets/img/real_data_green_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &.green {
        background-image: url(../../assets/img/real_data_green_bg.png);
    }

    &.yellow {
        background-image: url(../../assets/img/real_data_yellow_bg.png);
    }

    &.red {
        background-image: url(../../assets/img/real_data_red_bg.png);
    }
}

.real-data-text-color {
    color: #11B967;
    font-size: 16px;

    &.green {
        color: #11B967;
    }

    &.yellow {
        color: #FB9C40;
    }

    &.red {
        color: #FD4142;
    }

}

.real-data-state-rectangle {
    width: 22px;
    height: 12px;
    background: #19FE85;
    border-radius: 2px 2px 2px 2px;

    &.green {
        background: #11B967;
    }

    &.yellow {
        background: #FC7E03;
    }

    &.red {
        background: #FD4142;
    }
}

.middle {
    width: 38%;
    padding: 0 20px;
    position: relative;
}



.total-contactor-container {
    width: 110px;
    border: 1px solid #19FE85;
    border-radius: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10%;

    .total-contactor {
        font-size: 13px;
        color: #19FE85;
        margin: 2px 5px;
    }
}


.device-img-concainer {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 15%;
}


.right {
    width: 31%;
    display: flex;
    flex-direction: column;
    padding: 0 30px 0 0;
}


.alarm-warning-container {
    margin-top: 30px;
    width: 100%;
    max-width: 450px;
    height: 200px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}




.alarm-warning-state {
    font-size: 16px;
    width: 70px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    color: rgba(18, 188, 113, 1);
    background: rgba(18, 188, 113, 0.17);

    &.red {
        background: rgba(253, 65, 66, 0.17);
        color: rgba(253, 65, 66, 1);
    }
}

.alarm-warning-text {
    font-size: 16px;
    color: rgba(18, 188, 113, 1);

    &.red {
        color: rgba(253, 65, 66, 1);
    }
}

.alarm-warning-state-right {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 0 20px;
}

.alarm-warning-container .item {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
    background: rgba(18, 188, 113, 0.17);

    &.red {
        background: rgba(253, 65, 66, 0.17);
    }

}

.working-current-container {
    width: 100%;
    max-width: 450px;
    margin-top: 20px;
    height: 122px;
}

.working-current-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.real_data_variable_container {
    width: 100%;
    max-width: 450px;
    margin-top: 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.variable_list {
    display: grid;
    width: 100%;
    gap: 10px 5px;
    grid-template-columns: 1fr 1fr 1fr;
}

.real_data_variable_item {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.variable_name {
    color: white;
    font-size: 16px;
}

.variable_value {
    color: #57FDF3;
    font-size: 18px;
    font-family: OPPOSans;
}
</style>
