<script setup>
import { useUserStore } from '@/store/user'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  apps: {
    type: Array,
    default: () => []
  }
})
const { apps } = toRefs(props)
const { roles } = storeToRefs(useUserStore())

const isShowItem = (item) => {
  const { onlyRoles } = item || {}
  if (!onlyRoles) {
    return true
  } else {
    return onlyRoles.some((role) => roles.value.includes(role))
  }
}

const emit = defineEmits(['itemHandler'])
const handleItem = (index) => {
  emit('itemHandler', apps.value[index])
}
</script>

<template>
  <view text-40 text-bold px-40 py-20 mt-20>{{ title }}</view>
  <up-grid :border="false" col="4" @click="handleItem">
    <template v-for="(item, index) in apps">
      <up-grid-item v-if="isShowItem(item)" :key="index">
        <view
          w-90
          h-90
          rounded-34
          f-c-c
          relative
          :style="{
            background: `linear-gradient(to right, ${item.bg ? item.bg : '#FBE7A3, #F7CC4F'})`
          }"
        >
          <up-icon
            :name="item.icon"
            custom-prefix="custom-icon"
            :size="30"
            :color="`${'#FFFFFF'}`"
          />
          <view absolute right--30 top--12 w-60 h-30 f-c-c>
            <up-badge :value="item.number" shape="circle" :max="99" />
          </view>
        </view>
        <text text-28 font-400 mt-8 mb-30>{{ item.name }}</text>
      </up-grid-item>
    </template>
  </up-grid>
</template>
