<template>
  <panel>
    <template v-slot:header>
      <up-icon size="28rpx" :name="list"></up-icon>
      我的应用
    </template>
    <template v-slot:content>
      <up-grid
          :border="false"
          :col="4"
          class="grid-list"
      >
        <up-grid-item
            v-for="(baseListItem,baseListIndex) in ctlItems"
            :key="baseListIndex"
            @click="()=>ctlClick(baseListIndex)"
        >
          <view class="grid-icon" :style="{backgroundColor: baseListItem.color}">
            <up-icon
                :name="baseListItem.name"
                :size="22"
            ></up-icon>
          </view>
          <text class="grid-text">{{ baseListItem.title }}</text>
        </up-grid-item>
      </up-grid>
    </template>
  </panel>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import Panel from "@/components/pannel/index.vue";
import alarm from '@/static/aiot/icon/alarm.svg';
import device from '@/static/aiot/icon/device.svg';
import order from '@/static/aiot/icon/order.svg';
import submitOrder from '@/static/aiot/icon/submit-order.svg';
import list from '@/static/aiot/list.svg';

const ctlItems = ref([
  {
    name: device,
    title: '设备信息',
    color: '#0079fe',
    target: "/pages/workbenchsub/device/list"
  },
  {
    name: order,
    title: '工单管理',
    color: '#6a6bcd',
    target: "/pages/workbenchsub/workorder/list"
  }, {
    name: submitOrder,
    title: '故障提报',
    color: '#ff7f5d',
    target: "/pages/workbenchsub/workorder/submit"
  }, {
    name: alarm,
    title: '设备告警',
    color: '#0079fe',
    target: "/pages/workbenchsub/device/alarm-list"
  },
]);

function ctlClick(index) {
  if (ctlItems.value[index] && ctlItems.value[index].target) {
    uni.navigateTo({
      url: ctlItems.value[index].target,
    });
  }
}
</script>

<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<style lang="scss">

.grid-list {
  margin: 60rpx 0;
  width: 100%;

  .grid-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      padding: 0 !important;
      margin: 0;
    }
  }

  .grid-text {
    color: #000000;
    margin-top: 14rpx;
    font-size: 24rpx;
  }
}

</style>
