<template>
  <view>
    <navbar-back title="实验室管理系统【物料管理】" titleWidth="800" :autoBack="false" leftIcon="" leftText="">
      <u-icon @click="popupShow = true" size="28" color="#FFF" name="setting-fill" />
    </navbar-back>

    <up-grid :col="gridCol" :border="false">
      <up-grid-item class="mb20 mt20" v-for="item in menuItemList" :key="item.id" @click="goTo(item.component)">
        <u-icon :name="`/static/images/menus/${item.path}.png`" color="#0055A2" size="80" />
        <view class="grid-text">{{ item.name }}</view>
      </up-grid-item>
    </up-grid>

    <mePopup :show="popupShow" @update:show="val => (popupShow = val)" />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import nx from '@/nx'
import { useGridCol } from '@/nx/hooks/useGridCol'
import mePopup from '@/pages/index/me-popup.vue'

// 响应式数据
const popupShow = ref(false)

const menuItemList = computed(() => {
  let roleMenus = nx.$store('user').roleMenus
  const result = roleMenus.find(item => item.path === 'material')
  if (result) {
    return result.children
  } else {
    return []
  }
})

// 方法
const goTo = url => {
  nx.$router.go(url)
}

// 生命周期

// 动态设置 grid 列数
const { gridCol } = useGridCol([400], [2, 3])
</script>

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