<template>
    <div style="height: 100%">
        <ChartsBox :boxTitle="`报警信息`">
            <div class="container">
                <!-- <div class="feel-box"></div> -->
                <dv-scroll-board class="dv-scr-board" :config="config" />
            </div>
        </ChartsBox>
    </div>
</template>

<script>
import ChartsBox from '@/components/ChartsBox/index'
import { getWarnInfoAPI } from '@/api/home-high-formwork.js'
export default {
    components: { ChartsBox },
    props: {
        queryId: {
            type: [String, Number],
            default: () => '',
        },
    },
    data() {
        return {
            config: {
                data: [],
                rowNum: 5, //表格行数
                headerHeight: 35,
                headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
                oddRowBGC: '', //奇数行
                evenRowBGC: '', //偶数行

                columnWidth: [80],
                align: ['center'],
                hoverPause: true,
                waitTime: 3000,
            },
        }
    },
    methods: {
        async getWarnInfoData(id) {
            const { data: res } = await getWarnInfoAPI({ id })
            console.log(
                `%c🔍 报警信息 ----> 设备列表(右三) 数据出参 %c`,
                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
                '',
                res,
            )

            if (res.length > 0) {
                console.log('996')

                const newData = res.map((e) => [
                    `<img src="${require('@/assets/image/pro-view/blue.png')}" class="table-img">`,
                    `<span class="colorBlue">${e.remark}</span>`,
                    `<span class="colorBlue">${e.devName}</span>`,
                    `<span class="time-box colorBlue">${e.createTime}</span>`,
                ])

                // 替换整个 config 对象，触发组件更新
                this.config = {
                    ...this.config, // 保留原有配置
                    data: newData, // 更新数据
                }
            }
        },
    },
    watch: {
        queryId: {
            handler(newValue) {
                this.getWarnInfoData(newValue)
            },
            deep: true,
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;

    .dv-scr-board {
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to bottom right,
            rgba(21, 53, 81, 0.2),
            rgba(6, 30, 66, 0.7)
        );
    }
}

::v-deep .img-box {
    display: flex;
    align-items: center;

    .three-img {
        transform: translateX(10px);
    }
    .red-img {
        transform: translateX(3px);
    }
}
::v-deep .dv-scroll-board .rows .ceil {
    display: flex;
    align-items: center;
    justify-content: center;
}

::v-deep .colorBlue {
    color: #6aaef3 !important;
    font-size: 14px !important;
}

::v-deep.colorRed {
    color: #ff5534;
    font-size: 12px !important;
}

::v-deep .time-box {
    font-family: 'DS-TITle';
    display: block;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

::v-deep .dv-scroll-board .rows .ceil {
    width: auto !important;
    min-width: 80px; /* 最小宽度 */
}
</style>
