<template>
    <scale-screen
        width="1920"
        height="1080"
        :delay="300"
        :full-screen="false"
        :box-style="{
            background: '#03050c',
            overflow: 'hidden',
        }"
        :wrapper-style="{}"
    >
        <div class="content_wrap">
            <Headers
                :orgList="orgList"
                @changeOrg="changeOrg"
            />

            <div class="content_box">
                <div class="content_left">
                    <ItemWrap
                        v-for="item in layoutData.left"
                        :key="item.componentName"
                        :class="[getComponentClass(item.componentName)]"
                        :title="item.title"
                        :tips="getComponentTips(item.componentName)"
                    >
                        <component
                            :is="item.component"
                            :ref="(el) => setRef(el, item.componentName)"
                        />
                    </ItemWrap>
                </div>

                <div class="content_center">
                    <template
                        v-for="item in layoutData.center"
                        :key="item.componentName"
                    >
                        <MajorAlert
                            v-if="item.componentName === 'MajorAlert'"
                            :ref="(el) => setRef(el, item.componentName)"
                        />
                        <ItemWrap
                            v-else
                            :class="[getComponentClass(item.componentName)]"
                            :title="item.title"
                            :tips="getComponentTips(item.componentName)"
                        >
                            <component
                                :is="item.component"
                                :ref="(el) => setRef(el, item.componentName)"
                            />
                        </ItemWrap>
                    </template>
                </div>

                <div class="content_right">
                    <ItemWrap
                        v-for="item in layoutData.right"
                        :key="item.componentName"
                        :class="[getComponentClass(item.componentName)]"
                        :title="item.title"
                        :tips="getComponentTips(item.componentName)"
                    >
                        <component
                            :is="item.component"
                            :ref="(el) => setRef(el, item.componentName)"
                        />
                    </ItemWrap>
                </div>
            </div>
        </div>
    </scale-screen>
</template>

<script setup lang="jsx">
import { ref, provide, computed, shallowRef, onMounted, nextTick, onBeforeUnmount } from 'vue';
import ScaleScreen from './components/common/scale-screen';
import Headers from './components/Headers.vue';
import ItemWrap from './components/common/item-wrap';
import AccessStatus from './components/AccessStatus.vue';
import MajorSystemHealthStatus from './components/MajorSystemHealthStatus.vue';
import MajorAlert from './components/MajorAlert.vue';
import AccessSituation from './components/AccessSituation.vue';
import AlarmDynamic from './components/AlarmDynamic.vue';
import AccessUsageStatus from './components/AccessUsageStatus.vue';
import ResourceType from './components/ResourceType.vue';
import AlarmTrend from './components/AlarmTrend.vue';
import AlarmStatistics from './components/AlarmStatistics.vue';

/** 机构切换配置 */
const orgList = ref([
    {
        id: 'all',
        name: '全局',
    },
    {
        id: 'org1',
        name: '机构一',
    },
    {
        id: 'org2',
        name: '机构二',
    },
]);
const currentOrg = ref({
    id: 'all',
    name: '全局',
});
provide('currentOrg', currentOrg); //currentOrg这里不能使用currentOrg.value，需要下层组件自行.value
const changeOrg = async (item) => {
    clearTimer();
    layoutData.value = await getLayout(item.id);
    currentOrg.value = item;
    refreshRequest();
    setTimer();
};

/** 组件配置 */
const layoutData = ref({});
const getComponent = (componentName) => {
    let component = null;
    switch (componentName) {
        case 'AccessStatus':
            component = shallowRef(AccessStatus);
            break;
        case 'MajorSystemHealthStatus':
            component = shallowRef(MajorSystemHealthStatus);
            break;
        case 'MajorAlert':
            component = shallowRef(MajorAlert);
            break;
        case 'AccessSituation':
            component = shallowRef(AccessSituation);
            break;
        case 'AlarmDynamic':
            component = shallowRef(AlarmDynamic);
            break;
        case 'AccessUsageStatus':
            component = shallowRef(AccessUsageStatus);
            break;
        case 'ResourceType':
            component = shallowRef(ResourceType);
            break;
        case 'AlarmTrend':
            component = shallowRef(AlarmTrend);
            break;
        case 'AlarmStatistics':
            component = shallowRef(AlarmStatistics);
            break;
    }
    return component;
};
const getComponentClass = computed(() => (componentName) => {
    let className = '';
    switch (componentName) {
        case 'AccessStatus':
            className = 'content_kb-item';
            break;
        case 'MajorSystemHealthStatus':
            className = 'content_lb-item';
            break;
        case 'AccessSituation':
        case 'AccessUsageStatus':
            className = 'content_ct-item';
            break;
        case 'AlarmDynamic':
            className = 'content_cb-item';
            break;
        case 'ResourceType':
        case 'AlarmTrend':
        case 'AlarmStatistics':
            className = 'content_lr-item';
            break;
    }
    return className;
});
const getComponentTips = computed(() => (componentName) => {
    let tips = '';
    switch (componentName) {
        case 'AccessStatus':
            tips = '全网接入情况';
            break;
        case 'MajorSystemHealthStatus':
            tips = '重要系统健康状态';
            break;
        case 'MajorAlert':
            tips = '重要告警';
            break;
        case 'AccessSituation':
            tips = 'IT资源接入情况';
            break;
        case 'AlarmDynamic':
            tips = '实时告警动态';
            break;
        case 'AccessUsageStatus':
            tips = '各资源接入及使用情况';
            break;
        case 'ResourceType':
            tips = '资源类型';
            break;
        case 'AlarmTrend':
            tips = '告警趋势图';
            break;
        case 'AlarmStatistics':
            tips = '告警级别统计';
            break;
    }
    return tips;
});
const getLayout = (id) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            /** 模拟切换全局和不同机构获得不同的布局数据 */
            let layoutDataValue = {};
            switch (id) {
                case 'all':
                    layoutDataValue = {
                        left: [
                            { title: '综合看板', componentName: 'AccessStatus' },
                            { title: '重要系统健康状态', componentName: 'MajorSystemHealthStatus' },
                        ],
                        center: [
                            { title: '重要告警', componentName: 'MajorAlert' },
                            { title: 'IT资源接入情况', componentName: 'AccessSituation' },
                            { title: '实时告警动态', componentName: 'AlarmDynamic' },
                        ],
                        right: [
                            { title: '资源类型', componentName: 'ResourceType' },
                            { title: '告警趋势图', componentName: 'AlarmTrend' },
                            { title: '告警级别统计', componentName: 'AlarmStatistics' },
                        ],
                    };
                    break;
                case 'org1':
                    layoutDataValue = {
                        left: [
                            { title: '告警级别统计', componentName: 'AlarmStatistics' },
                            { title: '告警趋势图', componentName: 'AlarmTrend' },
                            { title: '资源类型', componentName: 'ResourceType' },
                        ],
                        center: [
                            { title: '重要告警', componentName: 'MajorAlert' },
                            { title: '实时告警动态', componentName: 'AlarmDynamic' },
                            { title: '各资源接入及使用情况', componentName: 'AccessUsageStatus' },
                        ],
                        right: [
                            { title: '重要系统健康状态', componentName: 'MajorSystemHealthStatus' },
                            { title: '综合看板', componentName: 'AccessStatus' },
                        ],
                    };
                    break;
            }
            for (const key in layoutDataValue) {
                for (let index = 0; index < layoutDataValue[key].length; index++) {
                    layoutDataValue[key][index].component = getComponent(layoutDataValue[key][index].componentName);
                }
            }
            resolve(layoutDataValue);
        }, 500);
    });
};

/** 组件的实例ref */
const refs = {};
const setRef = (el, componentName) => {
    if (el) {
        refs[componentName] = el;
    }
};
const refreshRequest = () => {
    nextTick(() => {
        console.log(refs, '当前存在的refs');
        Object.keys(refs).map((item) => {
            // 这里可以根据视图数据，判断哪些子组件ref在视图数据中，存在再执行
            refs[item].init();
        });
    });
};

/** 定时器，每隔60s刷新一次数据 */
let timer = null;
const setTimer = () => {
    timer = setInterval(() => {
        refreshRequest();
    }, 60000);
};
const clearTimer = () => {
    clearInterval(timer);
    timer = null;
};

onMounted(async () => {
    layoutData.value = await getLayout(currentOrg.value.id);
    refreshRequest();
    setTimer();
});

onBeforeUnmount(() => {
    clearTimer();
});
</script>

<style lang="scss" scoped>
.content_wrap {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    background-image: url('./img/pageBg.png');
    background-size: cover;
    background-position: center center;

    .content_box {
        width: 100%;
        display: flex;
        min-height: calc(100% - 64px);
        justify-content: space-between;

        //左边 右边 结构一样
        .content_left,
        .content_right {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            position: relative;
            width: 520px;
            box-sizing: border-box;
            flex-shrink: 0;
        }
        .content_center {
            flex: 1;
            margin: 0 54px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            overflow: hidden;

            .content_center-bottom {
                height: 315px;
            }
        }

        .content_lr-item {
            height: 310px;
        }

        .content_kb-item {
            height: 310px;
        }

        .content_lb-item {
            height: 560px;
        }

        .content_ct-item {
            height: 510px;
        }

        .content_cb-item {
            height: 400px;
        }
    }
}
</style>
