<template>
    <div class="major-alert-wrap">
        <SeamlessScroll
            v-model="state.scroll"
            :list="state.list"
            :single-height="state.defaultOption.singleHeight"
            :step="state.defaultOption.step"
            :limit-scroll-num="state.defaultOption.limitScrollNum"
            :hover="state.defaultOption.hover"
            :single-wait-time="state.defaultOption.singleWaitTime"
        >
            <div
                v-for="(item, index) in state.list"
                :key="index"
                class="warning"
            >
                <iconifyIconOffline
                    :icon="WarnIcon"
                    class="warn-icon"
                />
                <span>{{ item }}</span>
            </div>
        </SeamlessScroll>
    </div>
</template>

<script setup>
import { reactive, inject } from 'vue';
import SeamlessScroll from './common/seamless-scroll/seamless-scroll.vue';
import WarnIcon from '@iconify-icons/ep/warn-triangle-filled';

const currentOrg = inject('currentOrg');
const state = reactive({
    list: [],
    scroll: true,
    defaultOption: {
        singleHeight: 40,
        step: 0.5,
        limitScrollNum: 1,
        hover: false,
        singleWaitTime: 5000,
    },
});

const getMajorAlertData = () => {
    console.log('执行请求MajorAlert');
    return new Promise((resolve) => {
        setTimeout(() => {
            if (currentOrg.value.id === 'all') {
                resolve([
                    '重大事件告警：系统all服务器 IP为1.1.1.1 节点宕机',
                    '重大事件告警：系统all服务器 IP为2.2.2.2 节点宕机',
                    '重大事件告警：系统all服务器 IP为3.3.3.3 节点宕机',
                ]);
            } else {
                resolve([
                    '重大事件告警：系统org服务器 IP为1.1.1.1 节点宕机',
                    '重大事件告警：系统org服务器 IP为2.2.2.2 节点宕机',
                    '重大事件告警：系统org服务器 IP为3.3.3.3 节点宕机',
                ]);
            }
        }, 1000);
    });
};

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

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

<style lang="scss" scoped>
.major-alert-wrap {
    position: relative;
    margin: 0 auto -15px;
    color: rgb(252, 87, 77);
    width: 700px;
    height: 40px;
    font-size: 18px;
    overflow: hidden;
    background: linear-gradient(to right, rgba (255, 255, 255, 0), rgba(67, 128, 229, 0.3), rgba(0, 0, 0, 0.5) 100%);

    .warning {
        position: relative;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

        .warn-icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: 5px;
        }
    }
}
</style>
