<template>
    <div>
        <div class="card">
            <h4 style="display: flex; align-items: center; margin: 0">
                <el-icon :size="20" style="margin-right: 2px"><BellFilled /></el-icon>信息
            </h4>
            <el-divider style="margin: 10px 0" />
            <div style="padding: 20px; color: #ffffff; background: #027415; border-radius: 4px">
                <div style="display: flex; align-items: center">
                    <el-icon :size="18"><Select /></el-icon>
                    <div style="margin-left: 10px; font-size: 20px; font-weight: 900">欢迎 !</div>
                </div>
                <div style="margin-top: 10px">欢迎来到首页 !</div>
            </div>
        </div>
        <div class="card" style="margin-top: 20px">
            <h4 style="display: flex; align-items: center; margin: 0">
                <el-icon :size="20" style="margin-right: 2px"><DArrowLeft /></el-icon>快速进入
            </h4>
            <el-divider style="margin: 10px 0" />
            <!-- 按钮组 -->
            <div style="padding-top: 12px">
                <el-button
                    style="margin-bottom: 12px; margin-left: 12px"
                    type="primary"
                    v-for="(item, index) in menuList"
                    :key="index"
                    @click="handleClickMenu(item)"
                    >{{ item.meta.title }}</el-button
                >
            </div>
        </div>
        <div class="card" style="padding-bottom: 4%; margin-top: 20px">
            <h4 style="display: flex; align-items: center; margin: 0">
                <el-icon :size="20" style="margin-right: 2px"><Tools /></el-icon>系统信息
            </h4>
            <el-divider style="margin: 10px 0" />
            <div style="min-width: 1340px; border: 1px solid #eeeeee; border-bottom: none">
                <div style="display: flex; height: 34px" v-for="(item, index) in tableData" :key="index">
                    <div class="tableItem1" style="font-weight: 900">
                        {{ item.name }}
                    </div>
                    <div class="tableItem1">
                        {{ item.text }}
                    </div>
                    <div class="tableItem1" style="font-weight: 900">
                        {{ item.name1 }}
                    </div>
                    <div class="tableItem">
                        {{ item.text1 }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="home">
import { Select, Tools, BellFilled, DArrowLeft } from "@element-plus/icons-vue";
import { useAuthStore } from "@/stores/modules/auth";
import { getSystemInfoApi } from "@/api/modules/home";
const $router = useRouter();
const tableData = ref<any>([]);

const authStore = useAuthStore();
const menuList = computed(() =>
    authStore.flatMenuListGet.filter(item => {
        const ON_PATH = [
            "产品管理",
            "视频管理",
            "下载管理",
            "文章管理",
            "Banner管理",
            "用户角色管理",
            "问答管理",
            "反馈管理",
            "网站管理"
        ];
        return item.hidden && !ON_PATH.includes(item.meta.title);
    })
);
const handleClickMenu = (item: any) => {
    $router.push({ path: item.path });
};
const getSystemInfo = async () => {
    const result = await getSystemInfoApi();
    if (result?.code === 0) {
        const newArray = [];
        const batchSize = 2; // 每个对象包含的属性对数，这里设置为2

        for (let i = 0; i < result?.data.length; i += batchSize) {
            const obj: any = {};
            for (let j = 0; j < batchSize && i + j < result?.data.length; j++) {
                const keyPrefix = j === 0 ? "" : j.toString();
                obj[`name${keyPrefix}`] = result?.data[i + j].name;
                obj[`text${keyPrefix}`] = result?.data[i + j].value;
            }
            newArray.push(obj);
        }
        tableData.value = newArray;
    }
};
getSystemInfo();
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
