<template>
  <div class="home-container">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <div class="greeting">
          <h1>{{ getGreeting() }}，{{ userStore.nickName || userStore.name }}</h1>
          <p>欢迎使用{{ userStore.hospitalName || '医院' }}管理系统</p>
        </div>
        <div class="role-badge" v-if="userStore.roles.length > 0">
          <el-tag :type="getRoleTagType(userStore.roles[0])" size="large">
            {{ getRoleName(userStore.roles[0]) }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 关键数据统计 -->
    <div class="stats-grid">
      <div
        v-for="stat in currentStats"
        :key="stat.key"
        class="stat-card"
        :class="`stat-${stat.type}`"
        @click="handleStatClick(stat)"
      >
        <div class="stat-icon">
          <el-icon :size="36" :color="stat.iconColor">
            <component :is="stat.icon" />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
          <div class="stat-trend" v-if="stat.trend">
            <span :class="stat.trend > 0 ? 'trend-up' : 'trend-down'">
              {{ stat.trend > 0 ? '↑' : '↓' }} {{ Math.abs(stat.trend) }}%
            </span>
            <span class="trend-label">较昨日</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷功能入口 -->
    <div class="quick-access-section">
      <div class="section-header">
        <h3>快捷功能</h3>
        <div>
          <el-button text type="primary" @click="showConfig">配置</el-button>
        </div>
      </div>
      <div v-loading="quickAccessLoading" element-loading-text="加载快捷功能...">
        <div class="quick-access-grid">
          <div
            v-for="func in quickAccess"
            :key="func.key"
            class="quick-access-card"
            @click="handleQuickAccess(func)"
          >
            <div class="quick-icon">
              <svg-icon :icon-class="func.icon" :style="{ fontSize: '28px', color: func.iconColor }" />
            </div>
            <div class="quick-label">{{ func.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 待办事项 -->
    <div class="todo-section">
      <div class="section-header">
        <h3>待办事项</h3>
        <el-badge :value="todoList.length" class="todo-badge">
          <el-button text type="primary" @click="showAllTodos">查看全部</el-button>
        </el-badge>
      </div>
      <div class="todo-list">
        <div
          v-for="todo in todoList.slice(0, 5)"
          :key="todo.id"
          class="todo-item"
          :class="`priority-${todo.priority}`"
          @click="handleTodoClick(todo)"
        >
          <div class="todo-icon">
            <el-icon :size="20">
              <component :is="todo.icon" />
            </el-icon>
          </div>
          <div class="todo-content">
            <div class="todo-title">{{ todo.title }}</div>
            <div class="todo-desc">{{ todo.desc }}</div>
          </div>
          <div class="todo-time">{{ todo.time }}</div>
        </div>
        <div v-if="todoList.length === 0" class="empty-todo">
          <el-empty description="暂无待办事项" :image-size="60" />
        </div>
      </div>
    </div>

    <!-- 今日日程 -->
    <div class="schedule-section">
      <div class="section-header">
        <h3>今日日程</h3>
        <el-button text type="primary" @click="showSchedule">管理日程</el-button>
      </div>
      <div class="schedule-list">
        <div
          v-for="item in scheduleList"
          :key="item.id"
          class="schedule-item"
        >
          <div class="schedule-time">{{ item.time }}</div>
          <div class="schedule-content">
            <div class="schedule-title">{{ item.title }}</div>
            <div class="schedule-location">
              <el-icon><Location /></el-icon>
              <span>{{ item.location }}</span>
            </div>
          </div>
          <el-tag :type="item.type" size="small">{{ item.tag }}</el-tag>
        </div>
        <div v-if="scheduleList.length === 0" class="empty-schedule">
          <el-empty description="暂无今日日程" :image-size="60" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Home">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { markRaw } from 'vue'
import useUserStore from '@/store/modules/user'
import { getHomeStatistics, getPendingEmrCount } from '@/api/home'
import { listTodo } from '@/api/workflow/task.js'
import { getCurrentUserConfig } from '@/api/system/userConfig'
import { listMenu, getMenuFullPath } from '@/api/system/menu'
import { getTodayMySchedule } from '@/api/appointmentmanage/doctorSchedule'
import { ElDivider } from 'element-plus'
import {
  User,
  Document,
  Calendar,
  Money,
  Warning,
  TrendCharts,
  Monitor,
  Clock,
  ChatDotRound,
  Files,
  Box,
  Operation,
  Location,
  Notification,
  DataLine,
  ShoppingCart,
  Wallet,
  Van,
  Bell,
  Setting,
  Search,
  Menu,
  Grid,
  Folder,
  Tickets,
  ChatDotSquare,
  Histogram,
  OfficeBuilding,
  Postcard,
  Collection,
  VideoPlay,
  Camera,
  Headset,
  Phone,
  Message,
  ChatLineSquare,
  ChatRound,
  Guide,
  Help,
  InfoFilled,
  CircleCheck,
  CircleClose,
  QuestionFilled,
  Star,
  Link,
  Position,
  Picture,
  Upload,
  Download,
  CaretLeft,
  CaretRight,
  More,
  Close,
  Check,
  ArrowUp,
  ArrowDown,
  ArrowLeft,
  ArrowRight,
  Plus,
  Minus,
  ZoomIn,
  ZoomOut,
  Refresh,
  Edit,
  Delete,
  Share,
  View,
  SwitchButton,
  Hide,
  Finished,
  CirclePlus,
  Remove,
  CircleCheckFilled,
  CircleCloseFilled,
  WarningFilled,
  Goods
} from '@element-plus/icons-vue'

// 为别名单独导入
import { InfoFilled as InfoFilledIcon, QuestionFilled as QuestionFilledIcon, SuccessFilled } from '@element-plus/icons-vue'
import SvgIcon from '@/components/SvgIcon'

const userStore = useUserStore()
const router = useRouter()

// 统计数据（从后端获取）
const statisticsData = ref({
  totalPatients: 0,
  yesterdayPatients: 0,
  patientTrend: 0,
  todayRevenue: '¥ 0',
  yesterdayRevenue: '¥ 0',
  revenueTrend: 0,
  todayAppointments: 0,
  yesterdayAppointments: 0,
  appointmentTrend: 0,
  pendingApprovals: 0
})

// 不同角色的统计数据配置
const roleStatsConfig = {
  admin: [
    { key: 'totalPatients', label: '在院患者', icon: markRaw(User), type: 'primary', iconColor: '#409eff' },
    { key: 'todayRevenue', label: '今日收入', icon: markRaw(Money), type: 'success', iconColor: '#67c23a' },
    { key: 'appointments', label: '今日预约', icon: markRaw(Calendar), type: 'warning', iconColor: '#e6a23c' },
    { key: 'pendingApprovals', label: '待审核', icon: markRaw(Document), type: 'danger', iconColor: '#f56c6c' }
  ],
  doctor: [
    { key: 'myPatients', label: '我的患者', icon: markRaw(User), type: 'primary', iconColor: '#409eff' },
    { key: 'todayAppointments', label: '今日门诊', icon: markRaw(Calendar), type: 'success', iconColor: '#67c23a' },
    { key: 'pendingEmr', label: '待写病历', icon: markRaw(Document), type: 'warning', iconColor: '#e6a23c' },
    { key: 'prescriptions', label: '今日处方', icon: markRaw(Box), type: 'info', iconColor: '#909399' }
  ],
  nurse: [
    { key: 'wardPatients', label: '病房患者', icon: markRaw(User), type: 'primary', iconColor: '#409eff' },
    { key: 'todayTreatments', label: '今日治疗', icon: markRaw(Operation), type: 'success', iconColor: '#67c23a' },
    { key: 'vitalSigns', label: '待测体征', icon: markRaw(Monitor), type: 'warning', iconColor: '#e6a23c' },
    { key: 'drugDistribution', label: '发药次数', icon: markRaw(Box), type: 'info', iconColor: '#909399' }
  ],
  pharmacist: [
    { key: 'todayPrescriptions', label: '今日处方', icon: markRaw(Box), type: 'primary', iconColor: '#409eff' },
    { key: 'pendingReview', label: '待审核', icon: markRaw(Document), type: 'warning', iconColor: '#e6a23c' },
    { key: 'outOfStock', label: '缺货药品', icon: markRaw(Warning), type: 'danger', iconColor: '#f56c6c' },
    { key: 'nearExpiry', label: '近效期', icon: markRaw(Clock), type: 'info', iconColor: '#909399' }
  ],
  cashier: [
    { key: 'todayPayments', label: '今日缴费', icon: markRaw(Money), type: 'primary', iconColor: '#409eff' },
    { key: 'refundRequests', label: '退费申请', icon: markRaw(Document), type: 'warning', iconColor: '#e6a23c' },
    { key: 'pendingInvoices', label: '待开发票', icon: markRaw(Files), type: 'info', iconColor: '#909399' },
    { key: 'insuranceClaims', label: '医保结算', icon: markRaw(Wallet), type: 'success', iconColor: '#67c23a' }
  ]
}

// 从数据库获取用户配置的快捷功能ID列表
const getUserQuickAccessConfig = async () => {
  try {
    // 优先从数据库获取配置
    const response = await getCurrentUserConfig('homeFeaturesConfig');
    console.log('从数据库获取的配置响应:', response);

    // 检查响应结构，数据可能在 data 或 msg 字段中
    let configData = null;
    if (response.code === 200) {
      if (response.data) {
        configData = response.data;
      } else if (response.msg) {
        // 如果数据在 msg 字段中（可能是URL编码的）
        configData = response.msg;
      }
    }

    if (configData) {
      // 解码配置值（如果是URL编码的）
      let decodedData = configData;
      try {
        decodedData = decodeURIComponent(configData);
      } catch (decodeError) {
        console.warn('解码配置数据失败，使用原始数据:', decodeError);
        decodedData = configData;
      }
      console.log('解码后的配置数据:', decodedData);
      const parsedData = JSON.parse(decodedData);
      console.log('解析后的配置数据:', parsedData);
      return parsedData;
    }
  } catch (error) {
    console.error('从数据库获取用户配置失败:', error);
  }

  // 如果数据库中没有配置，尝试从本地存储获取
  try {
    const savedConfig = localStorage.getItem('homeFeaturesConfig');
    console.log('从本地存储获取的配置:', savedConfig);
    if (savedConfig) {
      const parsedData = JSON.parse(savedConfig);
      console.log('从本地存储解析的配置数据:', parsedData);
      return parsedData;
    }
  } catch (error) {
    console.error('从本地存储获取用户配置失败:', error);
  }

  // 如果没有配置，返回空数组
  console.log('没有找到用户配置，返回空数组');
  return [];
};

// 响应式数据存储快捷访问功能
const quickAccessData = ref([]);

// 根据用户配置获取快捷功能
const quickAccess = computed(() => {
  return quickAccessData.value;
});

// 添加 loading 状态
const quickAccessLoading = ref(false);

// 异步加载用户配置
const loadUserQuickAccessConfig = async () => {
  quickAccessLoading.value = true;
  try {
    console.log('开始加载用户快捷访问配置...');
    const userConfig = await getUserQuickAccessConfig();
    console.log('获取到的用户配置:', userConfig);

    // 如果用户没有配置任何功能，返回默认配置
    if (!userConfig || userConfig.length === 0) {
      console.log('用户没有配置任何功能，使用默认配置');
      quickAccessData.value = getDefaultQuickAccessConfig();
      return;
    }

    // 如果用户配置了功能ID列表，需要从菜单中获取详细信息
    console.log('开始转换菜单ID为快捷访问格式...');
    const convertedFeatures = await convertMenuIdsToQuickAccess(userConfig);
    console.log('转换后的功能:', convertedFeatures);

    // 如果转换后没有功能（可能是因为配置的ID没有对应的菜单项），返回默认配置
    if (!convertedFeatures || convertedFeatures.length === 0) {
      console.log('转换后没有功能，使用默认配置');
      quickAccessData.value = getDefaultQuickAccessConfig();
      return;
    }

    console.log('设置最终的快捷访问数据:', convertedFeatures);
    quickAccessData.value = convertedFeatures;
  } catch (error) {
    console.error('加载用户快捷访问配置失败:', error);
    // 出错时使用默认配置
    quickAccessData.value = getDefaultQuickAccessConfig();
  } finally {
    quickAccessLoading.value = false;
  }
};

// 将菜单ID转换为快捷访问格式
const convertMenuIdsToQuickAccess = async (menuIds) => {
  if (!menuIds || menuIds.length === 0) {
    return [];
  }

  try {
    // 检查 menuIds 是否已经是包含完整路径的对象数组（新格式）
    if (menuIds.length > 0 && typeof menuIds[0] === 'object') {
      // 检查是否包含 fullPath 属性（新格式）或 menuId 属性（新格式但可能还没获取完整路径）
      if (menuIds[0].hasOwnProperty('fullPath') || menuIds[0].hasOwnProperty('menuId')) {
        // 如果是新格式，直接转换为快捷功能格式
        return menuIds.map(menuItem => {
          // 如果没有 fullPath，使用 path 作为备选
          let route = menuItem.fullPath || menuItem.path;

          // 确保路径格式正确，去除多余的斜杠
          if (route && typeof route === 'string') {
            // 将多个连续的斜杠替换为单个斜杠，但保留协议部分的双斜杠（如 http://）
            route = route.replace(/([^:])\/{2,}/g, '$1/');
          }

          return {
            key: menuItem.menuId,
            label: menuItem.menuName,
            icon: menuItem.icon || 'document', // 使用数据库中的图标类名
            iconColor: menuItem.iconColor || getIconColorByMenuType(menuItem.menuType) || '#67C23A', // 优先使用数据库中的颜色，否则使用菜单类型的颜色
            route: route
          };
        }).filter(item => item.route); // 过滤掉 route 为空的项
      }
    }

    // 如果是旧格式（仅包含菜单ID的数组），则按原方式处理
    // 获取所有菜单数据
    const response = await listMenu({});

    if (response.code === 200) {
      const allMenus = response.data;

      // 扁平化菜单树结构，获取所有叶子节点（菜单项）
      const flatMenus = flattenMenuTree(allMenus);

      // 根据用户选择的菜单ID过滤并返回对应的功能对象
      const menuPromises = menuIds.map(async (id) => {
        // 查找匹配的菜单项
        const matchedMenu = flatMenus.find(menu => menu.menuId == id);

        if (matchedMenu) {
          // 获取完整路径
          try {
            const fullPathResponse = await getMenuFullPath(matchedMenu.menuId);
            // 确保返回的路径不为空
            const fullPath = (fullPathResponse.code === 200 && fullPathResponse.data)
              ? fullPathResponse.data
              : (matchedMenu.path || matchedMenu.fullPath);

            // 将菜单数据转换为快捷功能格式
            return {
              key: matchedMenu.perms || matchedMenu.path || `menu_${matchedMenu.menuId}`,
              label: matchedMenu.menuName,
              icon: matchedMenu.icon || 'document', // 使用数据库中的图标类名
              iconColor: matchedMenu.iconColor || getIconColorByMenuType(matchedMenu.menuType),
              route: fullPath || matchedMenu.path // 确保 route 不为空
            };
          } catch (error) {
            console.error(`获取菜单 ${matchedMenu.menuName} 的完整路径失败:`, error);
            // 如果获取完整路径失败，使用现有路径作为备选
            return {
              key: matchedMenu.perms || matchedMenu.path || `menu_${matchedMenu.menuId}`,
              label: matchedMenu.menuName,
              icon: matchedMenu.icon || 'document', // 使用数据库中的图标类名
              iconColor: matchedMenu.iconColor || getIconColorByMenuType(matchedMenu.menuType),
              route: matchedMenu.path || matchedMenu.fullPath || '/' // 确保 route 不为空
            };
          }
        }
        return null;
      });

      // 等待所有完整路径获取完成
      const convertedMenus = await Promise.all(menuPromises);
      // 过滤掉 route 为空的项和未找到的菜单ID
      return convertedMenus.filter(item => item !== null && item.route);
    }
  } catch (error) {
    console.error('获取菜单数据失败:', error);
  }

  // 如果获取失败，返回空数组
  return [];
};

// 将菜单树结构扁平化
const flattenMenuTree = (menuTree) => {
  const result = [];

  const flatten = (items) => {
    items.forEach(item => {
      // 只处理菜单类型为'C'(菜单)的项目，忽略目录('M')和按钮('F')
      if (item.menuType === 'C') {
        result.push(item);
      }

      // 递归处理子菜单
      if (item.children && item.children.length > 0) {
        flatten(item.children);
      }
    });
  };

  flatten(menuTree);
  return result;
};


// 根据菜单类型获取图标颜色
const getIconColorByMenuType = (menuType) => {
  if (menuType === 'M') return '#409EFF'; // 目录蓝色
  if (menuType === 'C') return '#67C23A'; // 菜单绿色
  if (menuType === 'F') return '#E6A23C'; // 按钮橙色
  return '#909399'; // 默认灰色
};

// 获取默认快捷功能配置
const getDefaultQuickAccessConfig = () => {
  // 根据不同角色返回默认配置
  const role = userStore.roles[0] || 'admin';
  switch (role) {
    case 'doctor':
      return [
        { key: 'outpatient', label: '门诊接诊', icon: 'chat-dot-round', iconColor: '#409eff', route: '/doctorstation' },
        { key: 'emr', label: '病历管理', icon: 'document', iconColor: '#67c23a', route: '/doctorstation/doctorphrase' },
        { key: 'prescription', label: '开立处方', icon: 'box', iconColor: '#e6a23c', route: '/clinicmanagement/ePrescribing' },
        { key: 'history', label: '历史处方', icon: 'clock', iconColor: '#f56c6c', route: '/clinicmanagement/historicalPrescription' },
        { key: 'schedule', label: '排班管理', icon: 'calendar', iconColor: '#909399', route: '/appoinmentmanage/deptManage' },
        { key: 'inquiry', label: '患者查询', icon: 'search', iconColor: '#409eff', route: '/patientmanagement' }
      ];
    case 'nurse':
      return [
        { key: 'ward', label: '病房管理', icon: 'user', iconColor: '#409eff', route: '/inpatientNurse/inpatientNurseStation' },
        { key: 'execution', label: '医嘱执行', icon: 'operation', iconColor: '#67c23a', route: '/inpatientNurse/medicalOrderExecution' },
        { key: 'proofread', label: '医嘱核对', icon: 'document', iconColor: '#e6a23c', route: '/inpatientNurse/medicalOrderProofread' },
        { key: 'drugCollect', label: '领药管理', icon: 'box', iconColor: '#f56c6c', route: '/inpatientNurse/medicineCollect' },
        { key: 'tpr', label: '体温单', icon: 'monitor', iconColor: '#909399', route: '/inpatientNurse/tprsheet' },
        { key: 'nursing', label: '护理记录', icon: 'chat-dot-round', iconColor: '#409eff', route: '/inpatientNurse/nursingRecord' }
      ];
    case 'pharmacist':
      return [
        { key: 'dispensing', label: '发药管理', icon: 'box', iconColor: '#409eff', route: '/pharmacymanagement' },
        { key: 'prescription', label: '处方审核', icon: 'document', iconColor: '#67c23a', route: '/pharmacymanagement' },
        { key: 'inventory', label: '库存管理', icon: 'van', iconColor: '#e6a23c', route: '/medicineStorage' },
        { key: 'purchase', label: '采购管理', icon: 'shopping-cart', iconColor: '#f56c6c', route: '/medicineStorage' },
        { key: 'warning', label: '效期预警', icon: 'warning', iconColor: '#f56c6c', route: '/medicationmanagement/statisticalManagement/statisticalManagement' },
        { key: 'statistics', label: '用药统计', icon: 'data-line', iconColor: '#909399', route: '/monitor' }
      ];
    case 'cashier':
      return [
        { key: 'registration', label: '挂号收费', icon: 'money', iconColor: '#409eff', route: '/charge/outpatientregistration' },
        { key: 'clinicCharge', label: '门诊收费', icon: 'wallet', iconColor: '#67c23a', route: '/charge/cliniccharge' },
        { key: 'refund', label: '退费管理', icon: 'document', iconColor: '#e6a23c', route: '/charge/clinicrefund' },
        { key: 'invoice', label: '发票打印', icon: 'files', iconColor: '#f56c6c', route: '/basicmanage/InvoiceManagement' },
        { key: 'record', label: '收费记录', icon: 'clock', iconColor: '#909399', route: '/charge/clinicRecord' },
        { key: 'insurance', label: '医保结算', icon: 'bell', iconColor: '#409eff', route: '/ybmanagement' }
      ];
    default: // admin
      return [
        { key: 'patient', label: '患者管理', icon: 'user', iconColor: '#409eff', route: '/patient/patientmgr' },
        { key: 'appointment', label: '预约管理', icon: 'calendar', iconColor: '#67c23a', route: '/appoinmentmanage' },
        { key: 'doctor', label: '医生管理', icon: 'user', iconColor: '#e6a23c', route: '/doctorstation' },
        { key: 'surgery', label: '手术管理', icon: 'operation', iconColor: '#f56c6c', route: '/surgerymanage' },
        { key: 'drug', label: '药品管理', icon: 'box', iconColor: '#909399', route: '/pharmacymanagement' },
        { key: 'statistic', label: '数据统计', icon: 'trend-charts', iconColor: '#409eff', route: '/monitor' }
      ];
  }
};

// 待办事项
const todoList = ref([])

// 更新待办事项中的待写病历数量
const updatePendingEmrTodo = () => {
  const pendingEmrTodo = todoList.value.find(item => item.title === '待写病历' || item.desc?.includes('患者等待写病历'));
  if (pendingEmrTodo) {
    pendingEmrTodo.desc = `有${statisticsData.value.pendingEmr || 0}个患者等待写病历`;
  }
}

// 今日日程
const scheduleList = ref([])

// 获取问候语
const getGreeting = () => {
  const hour = new Date().getHours()
  if (hour < 6) return '夜深了'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 17) return '下午好'
  if (hour < 19) return '傍晚好'
  return '晚上好'
}

// 获取角色名称
const getRoleName = (role) => {
  const roleMap = {
    admin: '管理员',
    doctor: '医生',
    nurse: '护士',
    pharmacist: '药剂师',
    cashier: '收费员'
  }
  return roleMap[role] || role
}

// 获取角色标签类型
const getRoleTagType = (role) => {
  const typeMap = {
    admin: 'danger',
    doctor: 'primary',
    nurse: 'success',
    pharmacist: 'warning',
    cashier: 'info'
  }
  return typeMap[role] || ''
}

// 根据角色获取当前统计数据
const currentStats = computed(() => {
  const role = userStore.roles[0] || 'admin'
  const baseConfig = roleStatsConfig[role] || roleStatsConfig.admin
  
  // 合并配置和实际数据
  return baseConfig.map(stat => {
    const statWith = { ...stat }

    // 根据不同的 key 获取对应的值
    switch (stat.key) {
      case 'totalPatients':
        statWith.value = statisticsData.value.totalPatients;
        statWith.trend = statisticsData.value.patientTrend;
        break;
      case 'todayRevenue':
        statWith.value = statisticsData.value.todayRevenue;
        statWith.trend = statisticsData.value.revenueTrend;
        break;
      case 'appointments':
        statWith.value = statisticsData.value.todayAppointments;
        statWith.trend = statisticsData.value.appointmentTrend;
        break;
      case 'pendingApprovals':
        statWith.value = statisticsData.value.pendingApprovals;
        break;
      case 'myPatients':
        statWith.value = statisticsData.value.myPatients || 0;
        statWith.trend = statisticsData.value.patientTrend;
        break;
      case 'todayAppointments':
        statWith.value = statisticsData.value.todayAppointments;
        statWith.trend = statisticsData.value.appointmentTrend;
        break;
      case 'pendingEmr':
        statWith.value = statisticsData.value.pendingEmr;
        break;
      case 'prescriptions':
        statWith.value = statisticsData.value.todayAppointments;
        statWith.trend = statisticsData.value.appointmentTrend;
        break;
      case 'wardPatients':
        statWith.value = statisticsData.value.totalPatients;
        statWith.trend = statisticsData.value.patientTrend;
        break;
      case 'todayTreatments':
        statWith.value = statisticsData.value.todayAppointments;
        statWith.trend = statisticsData.value.appointmentTrend;
        break;
      case 'vitalSigns':
        statWith.value = statisticsData.value.pendingApprovals;
        break;
      case 'drugDistribution':
        statWith.value = statisticsData.value.todayAppointments;
        statWith.trend = statisticsData.value.appointmentTrend;
        break;
      case 'todayPrescriptions':
        statWith.value = statisticsData.value.todayAppointments;
        statWith.trend = statisticsData.value.appointmentTrend;
        break;
      case 'pendingReview':
        statWith.value = statisticsData.value.pendingApprovals;
        break;
      case 'outOfStock':
        statWith.value = statisticsData.value.pendingApprovals;
        break;
      case 'nearExpiry':
        statWith.value = statisticsData.value.pendingApprovals;
        break;
      case 'todayPayments':
        statWith.value = statisticsData.value.todayRevenue;
        statWith.trend = statisticsData.value.revenueTrend;
        break;
      case 'refundRequests':
        statWith.value = statisticsData.value.pendingApprovals;
        break;
      case 'pendingInvoices':
        statWith.value = statisticsData.value.pendingApprovals;
        break;
      case 'insuranceClaims':
        statWith.value = statisticsData.value.todayAppointments;
        statWith.trend = statisticsData.value.appointmentTrend;
        break;
      default:
        statWith.value = '0';
        statWith.trend = 0;
    }
    
    return statWith
  })
})


// 处理统计卡片点击
const handleStatClick = (stat) => {
  console.log('Stat clicked:', stat)
  // 根据不同的统计项跳转到相应的详情页面
  if (stat.key === 'totalPatients' || stat.key === 'myPatients' || stat.key === 'wardPatients') {
    // 在院患者/我的患者/病房患者 - 跳转到患者管理页面
    router.push('/patient/patientmgr')
  } else if (stat.key === 'todayRevenue' || stat.key === 'todayPayments') {
    // 跳转到收费页面
    router.push('/charge/cliniccharge')
  } else if (stat.key === 'appointments') {
    // 跳转到预约管理页面
    router.push('/appoinmentmanage')
  } else if (stat.key === 'todayAppointments') {
    // 跳转到今日门诊模块
    router.push('/doctorstation/today-outpatient')
  } else if (stat.key === 'pendingApprovals' || stat.key === 'pendingReview') {
    // 跳转到待审核页面
    router.push('/clinicmanagement/ePrescribing')
  } else if (stat.key === 'pendingEmr') {
    // 跳转到待写病历页面
    router.push('/doctorstation/pending-emr')
  }
}

// 处理快捷功能点击
const handleQuickAccess = (func) => {
  if (func.route) {
    // 检查是否为外部链接
    if (func.route.startsWith('http://') || func.route.startsWith('https://')) {
      // 如果是外部链接，使用 window.open 打开
      window.open(func.route, '_blank');
    } else {
      // 确保路径格式正确，去除多余的斜杠
      let normalizedPath = func.route;
      if (normalizedPath && typeof normalizedPath === 'string') {
        // 将多个连续的斜杠替换为单个斜杠，但保留协议部分的双斜杠（如 http://）
        normalizedPath = normalizedPath.replace(/([^:])\/{2,}/g, '$1/');
      }

      // 确保内部路径以 / 开头，以保证正确的路由跳转
      if (!normalizedPath.startsWith('/')) {
        normalizedPath = '/' + normalizedPath;
      }

      try {
        router.push(normalizedPath);
      } catch (error) {
        console.error('路由跳转失败:', error);
        // 如果路径跳转失败，尝试使用原始路径
        router.push(func.route);
      }
    }
  } else {
    console.warn('快捷功能没有配置路由路径:', func);
  }
}

// 处理待办事项点击
const handleTodoClick = (todo) => {
  console.log('Todo clicked:', todo)
  // 跳转到相应的处理页面
  if (todo.id === 6) { // 待写病历
    router.push('/doctorstation?tab=pendingEmr')
  }
}


// 显示功能配置
const showConfig = () => {
  // 跳转到功能配置页面
  router.push('/features/config')
}

// 显示全部待办
const showAllTodos = () => {
  // 跳转到待办事项页面
  router.push('/todo')
}

// 管理日程
const showSchedule = () => {
  // 跳转到日程管理页面
}

// 获取统计数据
const fetchStatsData = async () => {
  try {
    const res = await getHomeStatistics()
    if (res.data) {
      statisticsData.value = res.data
      console.log('统计数据:', statisticsData.value)
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }

  try {
    // 获取待写病历数量
    const pendingEmrRes = await getPendingEmrCount();
    if (pendingEmrRes.code === 200) {
      // 确保统计数据对象中有pendingEmr字段
      if (!statisticsData.value) {
        statisticsData.value = {}
      }
      statisticsData.value.pendingEmr = pendingEmrRes.data || 0;
    } else {
      statisticsData.value.pendingEmr = 0;
    }
    // 更新待办事项中的待写病历数量
    updatePendingEmrTodo();
  } catch (error) {
    console.error('获取待写病历数量失败:', error)
    // 确保统计数据对象中有pendingEmr字段
    if (!statisticsData.value) {
      statisticsData.value = {}
    }
    statisticsData.value.pendingEmr = 0;
    // 更新待办事项中的待写病历数量
    updatePendingEmrTodo();
  }
}

// 获取待办事项（实际应用中应该从API获取）
const fetchTodoList = async () => {
  // TODO: 调用API获取真实数据
  console.log('Fetching todo list...')
  try {
    const response = await listTodo({ pageNum: 1, pageSize: 5 })
    if (response.code === 200) {
      // 将工作流任务数据转换为待办事项格式
      const rows = response.rows || [];
      const todoData = rows.slice(0, 5).map((task, index) => ({
        id: task.id || index,
        title: task.taskName || task.name || '待办事项',
        desc: task.description || '暂无描述',
        priority: getPriorityFromTask(task),
        status: getTaskStatus(task.status || task.state),
        icon: getTaskIcon(task.category),
        time: parseTime(task.createTime || task.createTimeStr, '{y}-{m}-{d} {h}:{i}'),
        taskInfo: task // 保存原始任务信息，便于后续处理
      }))

      // 检查是否已经有"待写病历"任务，如果没有则添加
      const hasPendingEmrTask = todoData.some(task => task.title === '待写病历' || task.desc?.includes('患者等待写病历'));
      if (!hasPendingEmrTask && statisticsData.value.pendingEmr > 0) {
        // 添加待写病历任务
        const pendingEmrTask = {
          id: Date.now(), // 使用时间戳作为唯一ID
          title: '待写病历',
          desc: `有${statisticsData.value.pendingEmr || 0}个患者等待写病历`,
          priority: 'high',
          icon: markRaw(Document),
          time: '刚刚',
          taskInfo: null
        };
        // 如果数组未满5个，添加到末尾；否则替换最后一个
        if (todoData.length < 5) {
          todoData.push(pendingEmrTask);
        } else {
          todoData[4] = pendingEmrTask;
        }
      }

      todoList.value = todoData;
    }
  } catch (error) {
    console.error('获取待办事项失败:', error)
    // 如果获取真实数据失败，保留空数组，但模块框架仍会显示
    todoList.value = [];
  }
}

// 根据任务信息确定优先级
const getPriorityFromTask = (task) => {
  // 根据任务的某些属性来确定优先级，这里可以根据实际业务调整
  if (task.priority && task.priority > 50) return 'high'
  if (task.priority && task.priority > 20) return 'medium'
  return 'low'
}

// 获取任务状态
const getTaskStatus = (status) => {
  // 根据实际返回的状态值映射
  if (status === 'completed' || status === 'finish') return 'completed'
  if (status === 'processing' || status === 'active') return 'processing'
  return 'pending'
}

// 获取任务图标
const getTaskIcon = (category) => {
  // 根据任务分类确定图标
  if (category && category.includes('approval')) return markRaw(Document)
  if (category && category.includes('patient')) return markRaw(User)
  if (category && category.includes('feedback')) return markRaw(ChatDotRound)
  if (category && category.includes('warning')) return markRaw(Warning)
  if (category && category.includes('report')) return markRaw(Files)
  if (category && category.includes('data')) return markRaw(DataLine)
  if (category && category.includes('operation')) return markRaw(Operation)
  if (category && category.includes('system')) return markRaw(Setting)
  return markRaw(Document) // 默认图标
}

// 获取日程数据（实际应用中应该从API获取）
const fetchScheduleList = async () => {
  try {
    const response = await getTodayMySchedule()
    console.log('今日日程原始响应:', response)
    if (response.code === 200) {
      // 将API返回的数据转换为前端所需的格式
      const scheduleData = (response.data || []).map((schedule, index) => {
        console.log(`排班记录[${index}]:`, schedule)
        // 根据排班类型设置标签类型
        let tagType = 'info'
        if (schedule.shift) {
          tagType = schedule.shift.toLowerCase()
        } else if (schedule.timePeriod) {
          tagType = schedule.timePeriod.toLowerCase()
        }

        // 确定标题
        const title = schedule.doctorName ? `${schedule.doctorName}医生排班` : '医生排班'

        // 按照用户最新要求：直接展示 adm_doctor_schedule 的 clinic 字段或诊室名（clinicRoom），优先于科室名称。
        // 增加对下划线命名的兼容性检查，防止后端映射异常。
        const clinic = schedule.clinic
        const roomName = schedule.clinicRoom || schedule.clinic_room
        const department = schedule.deptName || schedule.dept_name
        // 优先显示排班里设置的 clinic，其次是号源池的诊室名称，如果没有则显示科室名称，最后显示默认值
        const location = clinic || roomName || (department ? `${department}` : '院内')
        
        console.log(`排班记录[${index}] 位置信息:`, { clinic, roomName, department, location })

        return {
          id: schedule.id || index,
          time: schedule.startTime ? `${schedule.startTime}-${schedule.endTime}` : '未知时间',
          title: title,
          location: location,
          type: tagType,
          tag: schedule.timePeriod || '排班'
        }
      })

      // 更新日程列表
      scheduleList.value = scheduleData
    } else {
      console.error('获取排班信息失败:', response.msg)
      // 如果API调用失败，使用默认数据
      scheduleList.value = [
        { id: 1, time: '09:00', title: '科室晨会', location: '第一会议室', type: 'info', tag: '日常' },
        { id: 2, time: '10:30', title: '病例讨论', location: '第二会议室', type: 'primary', tag: '会议' },
        { id: 3, time: '14:00', title: '专家查房', location: '住院部3楼', type: 'warning', tag: '重要' },
        { id: 4, time: '16:00', title: '新药培训', location: '培训中心', type: 'success', tag: '培训' }
      ]
    }
  } catch (error) {
    console.error('获取排班信息异常:', error)
    // 如果出现异常，使用默认数据
    scheduleList.value = [
      { id: 1, time: '09:00', title: '科室晨会', location: '第一会议室', type: 'info', tag: '日常' },
      { id: 2, time: '10:30', title: '病例讨论', location: '第二会议室', type: 'primary', tag: '会议' },
      { id: 3, time: '14:00', title: '专家查房', location: '住院部3楼', type: 'warning', tag: '重要' },
      { id: 4, time: '16:00', title: '新药培训', location: '培训中心', type: 'success', tag: '培训' }
    ]
  }
}

// 监听本地存储变化，以便在其他标签页或窗口中修改配置后更新当前页面
const handleStorageChange = (event) => {
  if (event.key === 'homeFeaturesConfig') {
    console.log('检测到快捷功能配置更新，正在重新加载...');
    loadUserQuickAccessConfig();
  }
};

// 监听配置更新事件
const handleConfigUpdate = (event) => {
  console.log('检测到快捷功能配置更新事件，正在重新加载...');
  // 如果事件携带了最新配置数据，则直接使用
  if (event && event.detail && event.detail.config) {
    console.log('使用事件传递的最新配置数据:', event.detail.config);
    // 直接更新本地存储中的配置
    localStorage.setItem('homeFeaturesConfig', JSON.stringify(event.detail.config));
    // 更新缓存时间戳
    localStorage.setItem('homeFeaturesConfigCache', JSON.stringify(event.detail.config));
    localStorage.setItem('homeFeaturesConfigCacheTimestamp', Date.now().toString());
    // 使用最新配置更新首页显示
    updateQuickAccessData(event.detail.config);
  } else {
    // 否则重新加载配置
    loadUserQuickAccessConfig();
  }
};

// 直接更新快捷访问数据
const updateQuickAccessData = async (configData) => {
  quickAccessLoading.value = true;
  try {
    console.log('使用最新配置数据更新快捷访问...', configData);
    // 转换菜单ID为快捷访问格式
    const convertedFeatures = await convertMenuIdsToQuickAccess(configData);
    console.log('转换后的功能:', convertedFeatures);

    if (convertedFeatures && convertedFeatures.length > 0) {
      quickAccessData.value = convertedFeatures;
    } else {
      // 如果转换失败，使用默认配置
      quickAccessData.value = getDefaultQuickAccessConfig();
    }
  } catch (error) {
    console.error('更新快捷访问数据失败:', error);
    // 出错时使用默认配置
    quickAccessData.value = getDefaultQuickAccessConfig();
  } finally {
    quickAccessLoading.value = false;
  }
};

onMounted(async () => {
  fetchStatsData()
  await fetchTodoList()
  fetchScheduleList()
  await loadUserQuickAccessConfig()

  // 添加本地存储变化监听器
  window.addEventListener('storage', handleStorageChange);
  // 添加配置更新事件监听器
  window.addEventListener('homeFeaturesConfigUpdated', handleConfigUpdate);
})

// 在组件卸载前移除监听器
onUnmounted(() => {
  window.removeEventListener('storage', handleStorageChange);
  window.removeEventListener('homeFeaturesConfigUpdated', handleConfigUpdate);
});
</script>

<style scoped lang="scss">
.home-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 120px);
}

/* 顶部欢迎区域 */
.welcome-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 20px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .welcome-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .greeting {
      h1 {
        font-size: 28px;
        font-weight: 600;
        margin: 0 0 8px 0;
      }

      p {
        font-size: 16px;
        opacity: 0.9;
        margin: 0;
      }
    }

    .role-badge {
      :deep(.el-tag) {
        font-size: 16px;
        padding: 12px 24px;
        height: auto;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
      }
    }
  }
}

/* 统计卡片网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;

  .stat-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-left: 4px solid transparent;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    &.stat-primary {
      border-left-color: #409eff;
    }

    &.stat-success {
      border-left-color: #67c23a;
    }

    &.stat-warning {
      border-left-color: #e6a23c;
    }

    &.stat-danger {
      border-left-color: #f56c6c;
    }

    &.stat-info {
      border-left-color: #909399;
    }

    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f7fa;
    }

    .stat-content {
      flex: 1;

      .stat-value {
        font-size: 24px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 4px;
      }

      .stat-label {
        font-size: 14px;
        color: #909399;
        margin-bottom: 8px;
      }

      .stat-trend {
        font-size: 12px;

        .trend-up {
          color: #67c23a;
          margin-right: 4px;
        }

        .trend-down {
          color: #f56c6c;
          margin-right: 4px;
        }

        .trend-label {
          color: #c0c4cc;
        }
      }
    }
  }
}

/* 快捷功能区域 */
.quick-access-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }

    .divider {
      color: #d8d8d8;
      margin: 0 8px;
    }
  }

  .quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;

    .quick-access-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
      border-radius: 8px;
      background: #f5f7fa;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #ecf5ff;
        transform: translateY(-4px);

        .quick-label {
          color: #409eff;
        }
      }

      .quick-icon {
        margin-bottom: 12px;
      }

      .quick-label {
        font-size: 14px;
        color: #606266;
        text-align: center;
        transition: color 0.3s;
      }
    }
  }
}

/* 待办事项区域 */
.todo-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }

    .divider {
      color: #d8d8d8;
      margin: 0 8px;
    }
  }

  .todo-list {
    .todo-item {
      display: flex;
      align-items: center;
      padding: 16px;
      border-radius: 8px;
      margin-bottom: 12px;
      background: #f5f7fa;
      cursor: pointer;
      transition: all 0.3s ease;
      border-left: 3px solid transparent;

      &:hover {
        background: #ecf5ff;
      }

      &.priority-high {
        border-left-color: #f56c6c;
      }

      &.priority-medium {
        border-left-color: #e6a23c;
      }

      &.priority-low {
        border-left-color: #67c23a;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .todo-icon {
        margin-right: 12px;
        color: #909399;
      }

      .todo-content {
        flex: 1;

        .todo-title {
          font-size: 14px;
          color: #303133;
          font-weight: 500;
          margin-bottom: 4px;
        }

        .todo-desc {
          font-size: 12px;
          color: #909399;
        }
      }

      .todo-time {
        font-size: 12px;
        color: #c0c4cc;
      }
    }

    .empty-todo {
      padding: 20px 0;
      text-align: center;
    }
  }
}

/* 日程区域 */
.schedule-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }

    .divider {
      color: #d8d8d8;
      margin: 0 8px;
    }
  }

  .schedule-list {
    .schedule-item {
      display: flex;
      align-items: center;
      padding: 16px;
      border-radius: 8px;
      margin-bottom: 12px;
      background: #f5f7fa;
      transition: all 0.3s ease;

      &:hover {
        background: #ecf5ff;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .schedule-time {
        width: 80px;
        font-size: 18px;
        font-weight: 600;
        color: #409eff;
      }

      .empty-schedule {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 20px;
        min-height: 200px;
      }

      .schedule-content {
        flex: 1;
        margin: 0 16px;

        .schedule-title {
          font-size: 14px;
          color: #303133;
          font-weight: 500;
          margin-bottom: 4px;
        }

        .schedule-location {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #909399;

          .el-icon {
            margin-right: 4px;
          }
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-access-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .home-container {
    padding: 12px;
  }

  .welcome-section {
    padding: 20px;

    .welcome-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .greeting {
        h1 {
          font-size: 22px;
        }

        p {
          font-size: 14px;
        }
      }
    }
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .quick-access-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .quick-access-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
