<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  apps: {
    type: Array,
    default: () => []
  }
})
const { apps } = toRefs(props)
const elevatorInfo = inject('elevatorInfo')

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">
    <up-grid-item v-for="(item, index) in apps" :key="index">
      <view w-full h-full f-c-c flex-col relative>
        <button
          :style="{
            display: item.type === 'surveillance-camera' ? 'block' : 'none',
            padding: 0,
            margin: 0,
            width: '100%',
            height: '100%',
            position: 'absolute',
            top: 0,
            left: 0,
            zIndex: 1,
            opacity: 0
          }"
          open-type="contact"
          send-message-title="获取监控视频"
          :show-message-card="true"
          :send-message-path="`qq.com?msgType=monitor&id=${elevatorInfo.id}&elevatorNum=${elevatorInfo.elevatorNum}`"
          send-message-img="https://minio.hbrja.com/elevator/2024/11/11/6093ae2bffa84a5495e4d3841f1a59f4.png"
        ></button>

        <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>
      </view>
    </up-grid-item>
  </up-grid>
</template>
