<template>
  <view class="paddingNo">
    <block v-for="(item, ind) in queryBean.Children" :key="ind">
      <view
        class="chargingMenuList displayFlexCol"
        @click="goto(item)"
        v-if="item.IsShow == 1"
      >
        <text>{{ item.MenuName }}</text>
        <image class="bg" :src="item.Icon"></image>
      </view>
    </block>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { menuClick } from '@/utils';

const { proxy } = getCurrentInstance() as any;
const app = getApp();
const queryBean = ref<any>({});

onLoad(() => {
  /**如果点击菜单时   有多级页面  会给selectUrl_x赋值 */
  queryBean.value = app.globalData.selectUrl_x
    ? JSON.parse(app.globalData.selectUrl_x)
    : {};
  app.globalData.selectUrl_x = null;
});

const goto = async (item: any) => {
  menuClick(item, proxy);
};
</script>

<style lang="scss">
.chargingMenuList {
  height: 280upx;
  position: relative;
  margin: 0 30upx 30upx;
  align-items: flex-start;
}
.chargingMenuList text {
  font-size: 42upx;
  z-index: 2;
  font-family: PingFang SC;

  color: #fefefe;
  padding-left: 47upx;
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
</style>
