<template>
  <view class="workbench-container">
    <view class="card">
      <view class="card-title">日常管理</view>
      <view class="menu-grid">
        <view class="menu-item" v-for="item in dailyMenuList" :key="item.id" @click="handleMenuClick(item)">
          <image class="menu-icon" :src="item.icon || '/static/imgs/logo.png'" mode="aspectFit"></image>
          <view class="menu-text">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="card-title">问题管理</view>
      <view class="menu-grid">
        <view class="menu-item" v-for="item in problemMenuList" :key="item.id" @click="handleMenuClick(item)">
          <image class="menu-icon" :src="item.icon || '/static/imgs/logo.png'" mode="aspectFit"></image>
          <view class="menu-text">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="card-title">数据管理</view>
      <view class="menu-grid">
        <view class="menu-item" v-for="item in dataMenuList" :key="item.id" @click="handleMenuClick(item)">
          <image class="menu-icon" :src="item.icon || '/static/imgs/logo.png'" mode="aspectFit"></image>
          <view class="menu-text">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 关键：导入 uni-app 页面生命周期钩子
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/pinia/user';
import { getDailyManageMenu, getProblemManageMenu } from '@/api/workbench';

const userStore = useUserStore();
const dailyMenuList = ref([
  { id: 1, name: '巡查计划', path: '/pages-sub/daily/patrol-manage/patrol-plan/index' },
  { id: 2, name: '工单上报', path: '/pages-sub/daily/work-order/index' },
  { id: 3, name: '快速工单', path: '/pages-sub/daily/quick-order/index' },
  { id: 4, name: '12345工单', path: '/pages-sub/daily/12345-order/index' },
  { id: 5, name: '巡查管理', path: '/pages-sub/daily/patrol-manage/index' },
  { id: 6, name: '养护管理', path: '/pages-sub/daily/maintain-manage/index' }
]);
const problemMenuList = ref([]);
const dataMenuList = ref([
  { id: 1, name: '基础数据', path: '/pages-sub/data/base-data/index' },
  { id: 2, name: '人员轨迹', path: '/pages-sub/data/personnel-track/index' },
  { id: 3, name: '人员管理', path: '/pages-sub/data/personnel-manage/index' },
  { id: 4, name: '行道树档案', path: '/pages-sub/data/tree-archive/index' }
]);

// 页面加载时加载菜单数据
onLoad(async () => {
  // await loadMenuData();
});

const loadMenuData = async () => {
  try {
    const [dailyRes, problemRes] = await Promise.all([getDailyManageMenu(), getProblemManageMenu()]);
    dailyMenuList.value = dailyRes || [
      { id: 1, name: '巡查计划', path: '/pages-sub/daily/patrol-manage/patrol-plan/index' },
      { id: 2, name: '工单上报', path: '/pages-sub/daily/work-order/index' },
      { id: 3, name: '快速工单', path: '/pages-sub/daily/quick-order/index' },
      { id: 4, name: '12345工单', path: '/pages-sub/daily/12345-order/index' },
      { id: 5, name: '巡查管理', path: '/pages-sub/daily/patrol-manage/index' },
      { id: 6, name: '养护管理', path: '/pages-sub/daily/maintain-manage/index' }
    ];
    problemMenuList.value = problemRes || [
      { id: 1, name: '工单管理', path: '/pages-sub/problem/order-manage/index' },
      { id: 2, name: '问题分配', path: '/pages-sub/problem/problem-allot/index' }
    ];
  } catch (err) {
    console.error('加载菜单失败:', err);
    // 兜底数据
    dailyMenuList.value = [
      { id: 1, name: '巡查计划', path: '/pages-sub/daily/patrol-manage/patrol-plan/index' },
      { id: 2, name: '工单上报', path: '/pages-sub/daily/work-order/index' },
      { id: 3, name: '快速工单', path: '/pages-sub/daily/quick-order/index' },
      { id: 4, name: '12345工单', path: '/pages-sub/daily/12345-order/index' },
      { id: 5, name: '巡查管理', path: '/pages-sub/daily/patrol-manage/index' },
      { id: 6, name: '养护管理', path: '/pages-sub/daily/maintain-manage/index' }
    ];
    problemMenuList.value = [
      { id: 1, name: '工单管理', path: '/pages-sub/problem/order-manage/index' },
      { id: 2, name: '问题分配', path: '/pages-sub/problem/problem-allot/index' }
    ];
  }
};

const handleMenuClick = (item) => {
  // 权限校验
  if (item.permission && !userStore.permissions.includes(item.permission)) {
    return uni.showToast({ title: '暂无权限', icon: 'none' });
  }
  // 页面跳转
  uni.navigateTo({ url: item.path });
};
</script>

<style scoped>
.workbench-container {
  padding: 20rpx;
  background: #f8f8f8;
  min-height: 100vh;
}
.card {
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
}
.menu-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.menu-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 10rpx;
  box-sizing: border-box;
}
.menu-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}
.menu-text {
  font-size: 24rpx;
  color: #666;
}
</style>
<script setup lang="ts">
</script>