<template>
  <view>
    <navbar-back
      title="实验室管理系统【设备管理】"
      :autoBack="false"
      leftIcon=""
      :leftText="`您好！${userInfo.realname}`"
    >
      <u-icon @click="popupShow = true" size="28" color="#FFF" name="setting-fill" />
    </navbar-back>
    <up-grid :border="false" :col="gridCol">
      <up-grid-item
        class="mb20 mt20"
        v-for="(item, listIndex) in list"
        :key="listIndex"
        @click="nx.$router.go(item.url)"
      >
        <image style="width: 80px; height: 80px" :src="`/static/images/menus/${item.icon}.png`"></image>
        <text class="grid-text">{{ item.name }}</text>
      </up-grid-item>
    </up-grid>
    <mePopup v-model:show="popupShow" />
  </view>
</template>
<script setup>
import { reactive, ref, computed } from 'vue'
import nx from '@/nx'
import { useGridCol } from '@/nx/hooks/useGridCol'
import mePopup from '@/pages/index/me-popup.vue'

const { gridCol } = useGridCol([400, 600], [2, 3, 4])
let popupShow = ref(false)
let list = reactive([
  { url: '/pages/lims/deviceBusDailyCheck/index', name: '点检', icon: 'dailyCheck' },
  { url: '/pages/lims/deviceBusMaintain/index', name: '维护保养', icon: 'maintain' },
  { url: '/pages/lims/deviceBusUseRecord/index', name: '使用', icon: 'useRecord' },
  { url: '/pages/lims/deviceBusInfo/index', name: '设备查询', icon: 'baseInfo' },
  { url: '/pages/lims/knowledge/index', name: '知识库查询', icon: 'knowledge' }
])

const roleMenus = computed(() => nx.$store('user').roleMenus)
const userInfo = computed(() => nx.$store('user').userInfo)
</script>

<style lang="scss" scoped>
.grid-text {
  font-size: 24px;
}
</style>
