<template>

    <!--  <ul class="flex space-x-2 rtl:space-x-reverse">
        <li>
            <a href="javascript:;" class="text-primary hover:underline">首页</a>
        </li>
        <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
            <span>所有应用</span>
        </li>
    </ul> -->
    <div class="grid grid-cols-2 gap-8">
        <div v-for="(item, index) in cols" :key="index" @click="goPageList(item)">
           <!--  {{ menuList }} -->
            <div v-for="(it) in menuList" :key="it.id">
                <img v-if="it.title==item.title" :src="it.icon" alt="" class="bg-white rounded-md " />
            </div>
            <!-- <svg class="w-40 h-40 text-gray-500 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"border-dotted border-2 border-white
                fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd"
                    d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z"
                    clip-rule="evenodd" />
                <path fill-rule="evenodd"
                    d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z"
                    clip-rule="evenodd" />
            </svg> -->
            <div class="h-4 mx-10 my-2">
                <span class="text-center text-base font-bold whitespace-nowrap">{{
                    item.title }}</span>
            </div>

        </div>
        <!--    <div>
            <svg class="w-40 h-40 text-gray-500 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd"
                    d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z"
                    clip-rule="evenodd" />
                <path fill-rule="evenodd"
                    d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z"
                    clip-rule="evenodd" />
            </svg>

            <div class="h-4 mx-10 my-2"><span class="text-center text-base font-bold">订单查询</span></div>
        </div>
        <div class="goods-transfer">
            <svg class="w-40 h-40 text-gray-500 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd"
                    d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z"
                    clip-rule="evenodd" />
                <path fill-rule="evenodd"
                    d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z"
                    clip-rule="evenodd" />
            </svg>
            <div class="h-4 mx-10 my-2"><span class="text-center text-base font-bold">订单查询</span></div>
        </div> -->

    </div>

    <!-- <div class="relative inline-flex align-middle">
  <button type="button" @click="godashbord" class="btn btn-dark ltr:rounded-r-none rtl:rounded-l-none">Left</button>
  <button type="button" class="btn btn-dark rounded-none">Middle</button>
  <button type="button" class="btn btn-dark ltr:rounded-l-none rtl:rounded-r-none">Right</button>
</div>
 -->
    <!-- 
 <div class="relative inline-flex align-middle fixed-bottom button-group">
  <button type="button" @click="godashbord" class="btn btn-dark ltr:rounded-r-none rtl:rounded-l-none">Left</button>
  <button type="button" @click="godashbord" class="btn btn-dark rounded-none">Middle</button>
  <button type="button" class="btn btn-dark ltr:rounded-l-none rtl:rounded-r-none">Right</button>
</div> -->

</template>

<script lang="ts" setup>
import { ref, computed, onMounted, inject } from 'vue'; // Added onMounted here
import { useAppStore } from '@/stores/index';
import { useMeta } from '@/composables/use-meta';
import router from '@/router';
import { infoApi } from '@/api/api'
import { AxiosInstance } from 'axios';
const $axios = inject('axios') as AxiosInstance;
const cols: any = ref([
    { path: 'InventoryList', title: '库存列表', },
    { path: 'locationList', title: '库位管理' },
    { path: 'InventoryLoss', title: '库存报损' },
    { path: 'warehouseList', title: '仓库列表' },
     /*{ path: 'locationArea', title: '库位区域' },
    { path: 'order_vo.pay_type', title: '冻结列表'}, 
    { path: 'orderList', title: '订单列表' },
    { path: 'actions', title: '售后列表'},
    { path: 'actions', title: '商品列表'} */
]);
let menuList = ref('')

const godashbord = () => {
    router.push(({ path: '/' }))
}
const goPageList = (item?: any) => {
    router.replace({
        name: item.path,
    });
}

useMeta({ title: 'Chat' });
const store = useAppStore();
const isShowUserChat = ref(false);
const isShowChatMenu = ref(false);
const loginUser = ref({
    id: 0,
    name: 'Alon Smith',
    path: 'profile-34.jpeg',
    designation: 'Software Developer',
});

const fetchData = async () => {
    try {
        const response = await $axios.get('/api-endpoint');
        console.log('API Response:', response.data);
    } catch (error) {
        console.error('API Error:', error);
    }
};
const init = async () => {
    try {
        const res:any = await infoApi.getPdaMenu();
        menuList.value = res.data;
        console.log(menuList.value);
    } catch (error) {
        console.error('Error fetching menu data:', error);
    }
}

// 在组件加载时调用 fetchData
onMounted(() => {
    init()
    /*  fetchData(); */
});
</script>
<style>
.btn {
    width: 100px;
}

.button-group {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;
    /* 确保按钮组在其他内容之上 */
}
</style>
