<template>
  <view>
    <image src="../../image/home.jpg" style="width: 100vw; height: 41.5vw;"></image>
    <view style="display: block; padding-left: 30px; padding-top: 12px;">
      <text>欢迎你，{{ displayUsername }}！</text>
    </view>
    <view id="menu-view">
      <view class="menu-item" v-for="menuItem in filterMenuItems" :key="menuItem.id">
        <view :class="{ 'add-dot': menuItem.addDot }" style="display: inline-block;">
          <image :src="'../../image/icon/' + menuItem.image" class="item-image"
            @tap='switchTo(menuItem.switchFunc, menuItem.url)'></image>
        </view>
        <view>{{ menuItem.title }}</view>
      </view>
    </view>
    <button type="primary" size="mini" @tap="toggleDot('code', true)">显示小红点</button>
    <button type="primary" size="mini" @tap="toggleDot('code', false)">隐藏小红点</button>
    <button type="warn" size="mini" @tap="magicButton">魔法按钮</button>
    <DebugComp :params="debugObject" :userGroup="userGroup" />
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import DebugComp from '../../components/DebugComp.vue'
import getUserGroupByRole from '../../utils/getUserGroupByRole'
import menuItemDict from '../../utils/menuList'

import './index.css'


export default {
  components: {
    DebugComp
  },
  data() {
    return {
      ...Taro.getApp().globalData,
      userInfo: null,
      displayUsername: "",
      userGroup: "unknown",
      menuItemDict: menuItemDict,
      debugObject: {},
    }
  },
  computed: {
    filterMenuItems() {
      return Object.values(this.menuItemDict)
        .filter((item) => item.for.indexOf(this.userGroup) != -1)
    }
  },

  onLoad() {
    // 开发模式下自动跳转到指定页面，节省开发时间
    // if (this.debugMode) {
    //   Taro.switchTab({ url: '/pages/residents/report' })
    // }
  },

  onShow(options) {
    console.log('onShow', options)
    console.log("menuItemDict", menuItemDict)
    this.userInfo = Taro.getStorageSync("userInfo");
    this.displayUsername = this.userInfo?.username ?? "请登录";
    if (!this.userInfo) {
      console.log("用户未登录")
      Taro.redirectTo({
        url: '/pages/index/login'
      })
    } else {
      // 用户已登录
      this.userGroup = getUserGroupByRole(this.userInfo.role);
      this.debugObject = { userGroup: this.userGroup };

      //判断用户是否是通过扫小程序码进来的
      let launchParams = Taro.getCurrentInstance().router.params;
      if (launchParams.scene) {
        // 扫门禁的小程序码
        if (launchParams.scene.split('%')[0] == "guard") {
          Taro.getCurrentInstance().router.params.scene = null;
          Taro.navigateTo({
            url: "/pages/scan/entrance"
          })
        }
      }
    }
  },
  methods: {
    switchTo(func, pageUrl) {
      switch (func) {
        case 'switchTab':
          Taro.switchTab({ url: pageUrl })
          break;
        case 'navigateTo':
          Taro.navigateTo({ url: pageUrl })
          break;
        default:
          console.log("切换页面失败", func, pageUrl)
          break;
      }
    },
    goCode() {
      Taro.switchTab({
        url: '/pages/residents/code'
      })
    },
    toggleDot(iconName, status = true) {
      this.menuItemDict[iconName].addDot = status;
    },
    magicButton() {
      Taro.navigateTo({
        url: "/pages/scan/entrance"
      })
    }
  }
}
</script>
