<template>
    <div class="left_bottom_item inner_header">
        <div class="inner_right">
            <div class="flex w-[100%] h-[20px]">
                <div class="info w-[35%]">
                    <span>资源系统</span>
                </div>
                <div class="info w-[20%]">
                    <span>资源接入数</span>
                </div>
                <div class="info w-[20%]">
                    <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';

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-[35%]">
                                <span
                                    class="truncate"
                                    title={item.resourceSystem}
                                >
                                    {item.resourceSystem}
                                </span>
                            </div>

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

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

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

const getAccessUsageStatusData = () => {
    console.log('执行请求AccessUsageStatus');
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([
                {
                    accessNumber: 15,
                    accessRate: '100%',
                    redundancyRate: '100%',
                    resourceSystem: '机构一',
                },
                {
                    accessNumber: 10,
                    accessRate: '100%',
                    redundancyRate: '100%',
                    resourceSystem: '机构二',
                },
                {
                    accessNumber: 8,
                    accessRate: '100%',
                    redundancyRate: '100%',
                    resourceSystem: '机构三',
                },
                {
                    accessNumber: 3,
                    accessRate: '100%',
                    redundancyRate: '100%',
                    resourceSystem: '机构四',
                },
                {
                    accessNumber: 13,
                    accessRate: '100%',
                    redundancyRate: '100%',
                    resourceSystem: '机构五',
                },
            ]);
        }, 1000);
    });
};

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

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