<template>
    <!-- 常用工具 -->
    <div class="commonToolsPage flex-col">
        <s-header :name="$t('home.commonTools')" :noback="false"></s-header>
        <div class="commonToolsBox flex-col">
            <div class="outer11 flex-row">
                <div class="main25 flex-col" v-for="(item, index) in pushToolList" :key="index"
                    @click="pushToolPage(item)">
                    <img class="mod7 flex-col" :src="showLogo(item)" />
                    <div class="TextGroup14 flex-col">
                        <!-- <span class="info15" v-html="item.label"></span> -->
                        <span class="info15">{{ $t("permission." + item) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { useRouter } from "vue-router";
import { getAdminRole } from "@/service/user";
import { getLoginUser, styleUrl } from "../../common/js/utils";

export default {
    components: { sHeader },
    setup() {
        const router = useRouter();
        const user = getLoginUser();
        const pushToolList = ref([]);
        const menuList = ref([]);

        // 常用操作跳转页面
        const pushToolPage = (index) => {
            switch (index) {
                case "M3":
                    router.push({ path: "/accountOperation" }); // 账户操作
                    break;
                case "M5":
                    router.push({ path: "/advertManage" }); // 广告管理
                    break;
                case "M7":
                    router.push({ path: "/discountCode" });
                    break;
                case "M9":
                    router.push({ path: "/orderExport" });
                    break;
                case "M15":
                    router.push({ path: "/alarmHistory" }); // 报警历史
                    break;
                case "M19":
                    router.push({ path: "/apkManage" });
                    break;
                case "M22":
                    router.push({ path: "/terminal" });
                    break;
            }
        };

        // 显示logo
        const showLogo = (url) => {
            return require(`../../assets/home/${url}.png`);
        };

        // 初始化页面获取列表
        onMounted(async () => {
            styleUrl('commonTools');
            // 设置菜单权限
            // menuSet();
            getAccountPer();
        });


        // 解析 + 排序计算属性
        const sortedArray = (value) => {
            try {
                // 1. 安全解析JSON
                const parsed = JSON.parse(value)
                if (!Array.isArray(parsed)) return []

                // 2. 自定义排序函数
                const getNumber = str => parseInt(str.match(/\d+/)?.[0] || 0)

                // 3. 执行排序（数字从小到大）
                return [...parsed].sort((a, b) => {
                    return getNumber(a) - getNumber(b)
                })

            } catch (error) {
                console.error('解析失败:', error)
                return []
            }
        };

        // 获取账号权限
        const getAccountPer = async () => {
            const { data } = await getAdminRole({ adminId: user.id });
            if (data.code === '00000') {
                if (data.data.menuCodesJson !== null) {
                    menuList.value = sortedArray(data.data.menuCodesJson);
                }
                // 组合菜单权限
                menuList.value.forEach((item) => {
                    // 设备管理M1，设备查看M2，订单数据M4，任务消息M6，销售排行M11，数据概览M14，订单退款M16，系统脱机M17 这些图标不用加载到底部菜单上
                    if (
                        item !== "M1" &&
                        item !== "M2" && // M2本身就无logo
                        item !== "M4" &&
                        item !== "M6" &&
                        item !== "M8" &&
                        item !== "M11" &&
                        item !== "M12" &&
                        item !== "M13" &&
                        item !== "M18" &&
                        item !== "M14" &&
                        item !== "M16" &&
                        item !== "M17" &&
                        item !== "M20"
                    ) {
                        pushToolList.value.push(item);
                    }
                });
            }
        }
        const pushPageList = (url) => {
            router.push(url);
        }
        return {
            pushToolList,
            pushPageList,
            user,
            pushToolPage,
            showLogo,
        };
    }
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
</style>