<template>
    <div class="left_bottom_item inner_header">
        <div class="inner_right">
            <div class="flex w-[100%] h-[20px]">
                <div class="info w-[20%]">
                    <span>告警级别</span>
                </div>
                <div class="info w-[20%]">
                    <span>告警资源</span>
                </div>
                <div class="info w-[35%]">
                    <span>告警标题</span>
                </div>
                <div class="info w-[25%]">
                    <span>告警内容</span>
                </div>
            </div>
        </div>
    </div>
    <div class="left_bottom_wrap beautify-scroll-def">
        <component
            :is="SeamlessScroll"
            v-if="state.list.length >= 5"
            v-model="state.scroll"
            :list="state.list"
            :single-height="state.defaultOption.singleHeight"
            :step="state.defaultOption.step"
            :hover="state.defaultOption.hover"
        >
            <renderList />
        </component>
        <renderList v-else />
    </div>
</template>

<script setup lang="jsx">
import { reactive } from 'vue';
import SeamlessScroll from './common/seamless-scroll/seamless-scroll.vue';
import { keyColor } from '../config';

const state = reactive({
    list: [],
    scroll: true,
    defaultOption: {
        singleHeight: 0,
        step: 0.3,
        hover: true,
    },
});

const renderList = () => {
    return (
        <ul class="left_bottom screen-scroll-ul">
            {state.list.map((item, index) => (
                <li
                    key={index}
                    class="left_bottom_item border"
                >
                    <div class="inner_right">
                        <div class="flex w-[100%] h-[20px]">
                            <div class="info w-[20%]">
                                <span
                                    class="text-level"
                                    style={`color: ${keyColor(item.severity)}`}
                                >
                                    {item.severity}
                                </span>
                            </div>

                            <div class="info w-[20%]">
                                <span
                                    class="truncate"
                                    title={item.instance}
                                >
                                    {item.instance}
                                </span>
                            </div>

                            <div class="info w-[35%]">
                                <span
                                    class="truncate"
                                    title={item.summary}
                                >
                                    {item.summary}
                                </span>
                            </div>

                            <div class="info w-[25%]">
                                <span
                                    class="truncate"
                                    title={item.description}
                                >
                                    {item.description}
                                </span>
                            </div>
                        </div>
                    </div>
                </li>
            ))}
        </ul>
    );
};

const getAlarmDynamicData = () => {
    console.log('执行请求AlarmDynamic');
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([
                {
                    description: '节点已宕机超过2分钟',
                    instance: '1.1.1.1:9000',
                    severity: 'critical',
                    summary: 'IP为1.1.1.1:9000节点宕机',
                },
                {
                    description: '节点已宕机超过2分钟',
                    instance: '1.1.1.1:9000',
                    severity: 'info',
                    summary: 'IP为1.1.1.1:9000节点宕机',
                },
                {
                    description: '节点已宕机超过2分钟',
                    instance: '1.1.1.1:9000',
                    severity: 'major',
                    summary: 'IP为1.1.1.1:9000节点宕机',
                },
                {
                    description: '节点已宕机超过2分钟',
                    instance: '1.1.1.1:9000',
                    severity: 'critical',
                    summary: 'IP为1.1.1.1:9000节点宕机',
                },
                {
                    description: '节点已宕机超过2分钟',
                    instance: '1.1.1.1:9000',
                    severity: 'critical',
                    summary: 'IP为1.1.1.1:9000节点宕机',
                },
            ]);
        }, 1000);
    });
};

const initFN = () => {
    getAlarmDynamicData().then((res) => {
        state.list = res;
    });
};

defineExpose({
    name: 'AlarmDynamic',
    init: initFN,
});
</script>

<style lang="scss">
.screen-wrapper {
    .left_bottom_wrap {
        overflow: hidden;
        width: 100%;
        height: calc(100% - 70px);
    }

    .left_bottom {
        width: 100%;
        height: 100%;
    }

    .left_bottom_item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px 8px;
        font-size: 14px;
    }

    .left_bottom_item.border {
        border-bottom: 1px dashed #6f6f6f;
    }

    .info {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #b3b3b3;
        padding: 0 5px;

        .text-level {
            display: inline-block;
            width: 80px;
            text-align: center;
            padding: 8px 15px;
            border-radius: 5px;
            border-width: 1px;
            border-style: solid;
        }
    }

    .inner_right {
        position: relative;
        height: 100%;
        width: 100%;
        flex-shrink: 0;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .dibu {
            height: 1px;
            width: 100%;
            border: 1px solid #fff;
        }
    }

    .inner_header {
        background: rgba(67, 128, 229, 0.1);

        .info {
            font-size: 16px;
            font-weight: bold;
            color: rgb(39, 175, 254);
        }
    }
}
</style>
