<!--
 * @Author: Mm
 * @Date: 2025-11-08 09:41:36
 * @LastEditors: Mm
 * @LastEditTime: 2025-11-08 11:17:35
 * 不写bug的程序员不是一个好程序员!
-->
<template>
  <div class="dashboard">
    <div class="page-container">
      <!-- 数据概览 -->
      <div class="overview-section">
       
        
        <div class="overview-cards">
          <div class="data-card" v-for="item in overviewData" :key="item.key">
            <div class="card-icon">
              <component :is="item.icon" :style="{ fontSize: '32px' }" />
            </div>
            <div class="card-content">
              <div class="card-value">{{ item.value }}</div>
              <div class="card-label">{{ item.label }}</div>
            </div>
            <div class="card-trend" :class="item.trend">
              <component :is="item.trendIcon" />
              <span>{{ item.trendText }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="charts-section">
        <div class="chart-row">
          <!-- 考核完成率 -->
          <div class="chart-card">
            <div class="card-header">
              <h3>考核完成率</h3>
              <a-select v-model:value="completionPeriod" size="small" style="width: 120px">
                <a-select-option value="quarter">本季度</a-select-option>
                <a-select-option value="year">本年度</a-select-option>
              </a-select>
            </div>
            <div class="chart-container">
              <EchartsUI ref="completionRateChartRef" style="height: 300px" />
            </div>
          </div>

          <!-- 考核等次分布 -->
          <div class="chart-card">
            <div class="card-header">
              <h3>考核等次分布</h3>
              <a-button type="link" size="small">查看详情</a-button>
            </div>
            <div class="chart-container">
              <EchartsUI ref="gradeDistributionChartRef" style="height: 300px" />
            </div>
          </div>
        </div>
      </div>

      <!-- 通知和任务区域 -->
      <div class="content-section">
        <div class="content-row">
          <!-- 考核通知 -->
          <div class="content-card">
            <div class="card-header">
              <h3>考核通知</h3>
              <a-button type="link" @click="goToNotifications">查看全部</a-button>
            </div>
            <div class="notification-list">
              <div 
                v-for="notification in notifications" 
                :key="notification.id"
                class="notification-item list-item-card"
                :class="{ important: notification.isImportant }"
                @click="viewNotification(notification)"
              >
                <div class="notification-icon-wrapper">
                  <WarningOutlined v-if="notification.isImportant" :style="{ fontSize: '24px', color: '#ff4d4f' }" />
                  <BellOutlined v-else :style="{ fontSize: '24px', color: '#1890ff' }" />
                </div>
                <div class="notification-main">
                  <div class="notification-title">{{ notification.title }}</div>
                  <div class="notification-meta">
                    <span class="meta-tag">{{ notification.department }}</span>
                    <span class="meta-info">{{ notification.readCount }}人已读</span>
                  </div>
                </div>
                <div class="notification-time-badge">
                  {{ formatTime(notification.publishTime) }}
                </div>
              </div>
            </div>
          </div>

          <!-- 考核任务 -->
          <div class="content-card">
            <div class="card-header">
              <h3>考核任务</h3>
              <a-button type="link" @click="goToTasks">查看全部</a-button>
            </div>
            <div class="task-list">
              <div 
                v-for="task in tasks" 
                :key="task.id"
                class="task-item list-item-card"
                @click="viewTask(task)"
              >
                <div class="task-status-icon" :class="task.status">
                  <component :is="getStatusIcon(task.status)" />
                </div>
                <div class="task-main">
                  <div class="task-title">{{ task.title }}</div>
                  <div class="task-meta">
                    <span class="meta-time">{{ formatTime(task.publishTime) }}</span>
                    <span class="meta-info">截止：{{ formatTime(task.deadline) }}</span>
                  </div>
                </div>
                <div class="task-action">
                  <a-button 
                    v-if="task.status === 'pending'"
                    type="primary" 
                    size="small"
                    @click.stop="startTask(task)"
                  >
                    开始
                  </a-button>
                  <a-button 
                    v-else-if="task.status === 'in_progress'"
                    type="default"
                    size="small"
                    @click.stop="continueTask(task)"
                  >
                    继续
                  </a-button>
                  <a-tag v-else color="success" size="small">已完成</a-tag>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 待批事项和公示结果 -->
        <div class="content-row">
          <!-- 待批事项 -->
          <div class="content-card" v-if="hasApprovalPermission">
            <div class="card-header">
              <h3>待批事项</h3>
              <a-badge :count="pendingApprovals.length" :number-style="{ backgroundColor: '#52c41a' }">
                <a-button type="link" @click="goToApprovals">查看全部</a-button>
              </a-badge>
            </div>
            <div class="approval-list">
              <div 
                v-for="approval in pendingApprovals" 
                :key="approval.id"
                class="approval-item list-item-card"
                @click="viewApproval(approval)"
              >
                <div class="approval-type-tag">{{ approval.type }}</div>
                <div class="approval-main">
                  <div class="approval-title">{{ approval.applicant }} - {{ approval.department }}</div>
                  <div class="approval-meta">
                    <span class="meta-time">{{ formatTime(approval.submitTime) }}</span>
                  </div>
                </div>
                <div class="approval-action">
                  <a-button type="primary" size="small" @click.stop="approve(approval)">
                    审批
                  </a-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 考核结果公示 -->
          <div class="content-card">
            <div class="card-header">
              <h3>考核结果公示</h3>
              <a-button type="link" @click="goToResults">查看全部</a-button>
            </div>
            <div class="result-list">
              <div 
                v-for="result in resultAnnouncements" 
                :key="result.id"
                class="result-item list-item-card"
                @click="viewResult(result)"
              >
                <div class="result-main">
                  <div class="result-title">{{ result.title }}</div>
                  <div class="result-meta">
                    <span class="meta-tag">{{ result.department }}</span>
                    <span class="meta-tag">{{ result.period }}</span>
                    <span class="meta-info">{{ result.viewCount }}人查看</span>
                  </div>
                </div>
                <div class="result-time-badge">
                  {{ formatTime(result.publishTime) }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 评优结果和先进经验 -->
        <div class="content-row">
          <!-- 评优结果 -->
          <div class="content-card">
            <div class="card-header">
              <h3>评优结果</h3>
              <a-button type="link" @click="goToExcellent">查看全部</a-button>
            </div>
            <div class="excellent-list">
              <div 
                v-for="excellent in excellentResults" 
                :key="excellent.id"
                class="excellent-item list-item-card"
                @click="viewExcellent(excellent)"
              >
                <a-avatar :size="40" :src="excellent.photo" class="excellent-avatar">
                  {{ excellent.name.charAt(0) }}
                </a-avatar>
                <div class="excellent-main">
                  <div class="excellent-name">{{ excellent.name }}</div>
                  <div class="excellent-meta">
                    <span class="meta-tag">{{ excellent.department }}</span>
                    <span class="meta-info">{{ excellent.period }}</span>
                  </div>
                </div>
                <div class="excellent-badge">
                  <a-tag color="success">{{ excellent.grade }}</a-tag>
                </div>
              </div>
            </div>
          </div>

          <!-- 先进经验分享 -->
          <div class="content-card">
            <div class="card-header">
              <h3>先进经验分享</h3>
              <a-button type="link" @click="goToExperience">查看全部</a-button>
            </div>
            <div class="experience-list">
              <div 
                v-for="experience in experienceSharing" 
                :key="experience.id"
                class="experience-item list-item-card"
                @click="viewExperience(experience)"
              >
                <div class="experience-main">
                  <div class="experience-title">{{ experience.title }}</div>
                  <div class="experience-meta">
                    <span class="meta-tag">{{ experience.department }}</span>
                    <span class="meta-info">{{ experience.viewCount }}人查看</span>
                  </div>
                </div>
                <div class="experience-time-badge">
                  {{ formatTime(experience.publishTime) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知详情弹窗 -->
    <a-modal
      v-model:open="notificationDialogVisible"
      title="通知详情"
      width="600px"
      :footer="null"
    >
      <div v-if="notificationDetail" class="notification-detail">
        <div class="detail-header">
          <h3>{{ notificationDetail.title }}</h3>
          <div class="detail-meta">
            <span class="department">{{ notificationDetail.department }}</span>
            <span class="time">{{ formatTime(notificationDetail.publishTime) }}</span>
            <span class="read-count">{{ notificationDetail.readCount }}人已读</span>
          </div>
        </div>
        <div class="detail-content">
          <p>{{ notificationDetail.summary }}</p>
          <div class="detail-actions">
            <a-button type="primary" @click="markAsRead(notificationDetail)">
              标记为已读
            </a-button>
            <a-button @click="notificationDialogVisible = false">关闭</a-button>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 任务详情弹窗 -->
    <a-modal
      v-model:open="taskDialogVisible"
      title="任务详情"
      width="600px"
      :footer="null"
    >
      <div v-if="taskDetail" class="task-detail">
        <div class="detail-header">
          <h3>{{ taskDetail.title }}</h3>
          <div class="detail-meta">
            <a-tag :color="getStatusTagType(taskDetail.status)">
              {{ getStatusText(taskDetail.status) }}
            </a-tag>
            <span class="deadline">截止时间：{{ formatTime(taskDetail.deadline) }}</span>
          </div>
        </div>
        <div class="detail-content">
          <div class="task-info">
            <p><strong>发布时间：</strong>{{ formatTime(taskDetail.publishTime) }}</p>
            <p><strong>截止时间：</strong>{{ formatTime(taskDetail.deadline) }}</p>
            <p><strong>任务状态：</strong>{{ getStatusText(taskDetail.status) }}</p>
          </div>
          <div class="detail-actions">
            <a-button 
              v-if="taskDetail.status === 'pending'"
              type="primary" 
              @click="startTask(taskDetail); taskDialogVisible = false"
            >
              开始任务
            </a-button>
            <a-button 
              v-else-if="taskDetail.status === 'in_progress'"
              type="default"
              @click="continueTask(taskDetail)"
            >
              继续任务
            </a-button>
            <a-button @click="taskDialogVisible = false">关闭</a-button>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 审批详情弹窗 -->
    <a-modal
      v-model:open="approvalDialogVisible"
      title="审批详情"
      width="600px"
      :footer="null"
    >
      <div v-if="approvalDetail" class="approval-detail">
        <div class="detail-header">
          <h3>{{ approvalDetail.type }}</h3>
          <div class="detail-meta">
            <span class="applicant">{{ approvalDetail.applicant }}</span>
            <span class="department">{{ approvalDetail.department }}</span>
            <span class="time">{{ formatTime(approvalDetail.submitTime) }}</span>
          </div>
        </div>
        <div class="detail-content">
          <div class="approval-info">
            <p><strong>申请人：</strong>{{ approvalDetail.applicant }}</p>
            <p><strong>所属部门：</strong>{{ approvalDetail.department }}</p>
            <p><strong>申请时间：</strong>{{ formatTime(approvalDetail.submitTime) }}</p>
            <p><strong>申请内容：</strong>{{ approvalDetail.content }}</p>
          </div>
          <div class="detail-actions">
            <a-button type="primary" @click="approveAction(approvalDetail); approvalDialogVisible = false">
              审批通过
            </a-button>
            <a-button danger @click="rejectApproval(approvalDetail)">
              审批拒绝
            </a-button>
            <a-button @click="approvalDialogVisible = false">关闭</a-button>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 结果详情弹窗 -->
    <a-modal
      v-model:open="resultDialogVisible"
      title="考核结果详情"
      width="600px"
      :footer="null"
    >
      <div v-if="resultDetail" class="result-detail">
        <div class="detail-header">
          <h3>{{ resultDetail.title }}</h3>
          <div class="detail-meta">
            <span class="department">{{ resultDetail.department }}</span>
            <span class="period">{{ resultDetail.period }}</span>
            <span class="view-count">{{ resultDetail.viewCount }}人查看</span>
          </div>
        </div>
        <div class="detail-content">
          <div class="result-info">
            <p><strong>发布单位：</strong>{{ resultDetail.department }}</p>
            <p><strong>考核周期：</strong>{{ resultDetail.period }}</p>
            <p><strong>发布时间：</strong>{{ formatTime(resultDetail.publishTime) }}</p>
            <p><strong>查看人数：</strong>{{ resultDetail.viewCount }}人</p>
          </div>
          <div class="detail-actions">
            <a-button type="primary" @click="viewFullResult(resultDetail)">
              查看完整结果
            </a-button>
            <a-button @click="resultDialogVisible = false">关闭</a-button>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 评优详情弹窗 -->
    <a-modal
      v-model:open="excellentDialogVisible"
      title="评优详情"
      width="500px"
      :footer="null"
    >
      <div v-if="excellentDetail" class="excellent-detail">
        <div class="detail-header">
          <div class="excellent-avatar">
            <a-avatar :size="60" :src="excellentDetail.photo">
              {{ excellentDetail.name.charAt(0) }}
            </a-avatar>
          </div>
          <div class="excellent-info">
            <h3>{{ excellentDetail.name }}</h3>
            <p class="department">{{ excellentDetail.department }}</p>
            <a-tag color="success" :style="{ fontSize: '14px' }">{{ excellentDetail.grade }}</a-tag>
          </div>
        </div>
        <div class="detail-content">
          <div class="excellent-details">
            <p><strong>姓名：</strong>{{ excellentDetail.name }}</p>
            <p><strong>部门：</strong>{{ excellentDetail.department }}</p>
            <p><strong>考核等次：</strong>{{ excellentDetail.grade }}</p>
            <p><strong>考核周期：</strong>{{ excellentDetail.period }}</p>
          </div>
          <div class="detail-actions">
            <a-button type="primary" @click="viewFullExcellent(excellentDetail)">
              查看详细资料
            </a-button>
            <a-button @click="excellentDialogVisible = false">关闭</a-button>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 经验详情弹窗 -->
    <a-modal
      v-model:open="experienceDialogVisible"
      title="经验分享详情"
      width="600px"
      :footer="null"
    >
      <div v-if="experienceDetail" class="experience-detail">
        <div class="detail-header">
          <h3>{{ experienceDetail.title }}</h3>
          <div class="detail-meta">
            <span class="department">{{ experienceDetail.department }}</span>
            <span class="time">{{ formatTime(experienceDetail.publishTime) }}</span>
            <span class="view-count">{{ experienceDetail.viewCount }}人查看</span>
          </div>
        </div>
        <div class="detail-content">
          <div class="experience-info">
            <p><strong>发布单位：</strong>{{ experienceDetail.department }}</p>
            <p><strong>发布时间：</strong>{{ formatTime(experienceDetail.publishTime) }}</p>
            <p><strong>查看人数：</strong>{{ experienceDetail.viewCount }}人</p>
            <div class="experience-summary">
              <p><strong>经验摘要：</strong></p>
              <p>{{ experienceDetail.summary }}</p>
            </div>
          </div>
          <div class="detail-actions">
            <a-button type="primary" @click="viewFullExperience(experienceDetail)">
              查看完整内容
            </a-button>
            <a-button @click="experienceDialogVisible = false">关闭</a-button>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { 
  Button,
  Select,
  Tag,
  Badge,
  Avatar,
  Modal
} from 'ant-design-vue';

export default defineComponent({
  name: 'Analytics',
  components: {
    AButton: Button,
    ASelect: Select,
    ASelectOption: Select.Option,
    ATag: Tag,
    ABadge: Badge,
    AAvatar: Avatar,
    AModal: Modal
  }
});
</script>

<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';

import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { 
  ReloadOutlined,
  BellOutlined,
  WarningOutlined,
  FileTextOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  TrophyOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  EditOutlined
} from '@ant-design/icons-vue';
import dayjs from 'dayjs';

const router = useRouter();

// ECharts 引用
const completionRateChartRef = ref<EchartsUIType>();
const gradeDistributionChartRef = ref<EchartsUIType>();
const { renderEcharts: renderCompletionRate } = useEcharts(completionRateChartRef);
const { renderEcharts: renderGradeDistribution } = useEcharts(gradeDistributionChartRef);

// 模拟数据
const dashboardData = {
  overview: {
    totalTasks: 128,
    pendingTasks: 23,
    completedTasks: 95,
    excellentCount: 34,
  },
  
  completionRate: {
    departments: [
      { name: '办公室', rate: 95 },
      { name: '人事处', rate: 88 },
      { name: '财务处', rate: 92 },
      { name: '行政科', rate: 85 },
      { name: '综合科', rate: 90 },
      { name: '业务科', rate: 87 },
    ],
  },
  
  gradeDistribution: [
    { name: '优秀', value: 34 },
    { name: '良好', value: 56 },
    { name: '合格', value: 32 },
    { name: '待改进', value: 6 },
  ],
  
  notifications: [
    {
      id: 1,
      title: '2024年度第四季度考核通知',
      department: '人事处',
      publishTime: '2024-11-01 09:00:00',
      readCount: 156,
      isImportant: true,
      summary: '根据年度考核计划，现开展第四季度考核工作...',
    },
    {
      id: 2,
      title: '关于开展中层干部年度考核的通知',
      department: '组织部',
      publishTime: '2024-10-28 14:30:00',
      readCount: 203,
      isImportant: true,
      summary: '为全面了解中层干部履职情况...',
    },
    {
      id: 3,
      title: '年度考核材料提交截止时间提醒',
      department: '人事处',
      publishTime: '2024-10-25 10:00:00',
      readCount: 187,
      isImportant: false,
      summary: '请各部门于本月底前提交考核材料...',
    },
    {
      id: 4,
      title: '考核系统维护公告',
      department: '信息中心',
      publishTime: '2024-10-20 16:00:00',
      readCount: 142,
      isImportant: false,
      summary: '系统将于本周六进行维护升级...',
    },
  ],
  
  tasks: [
    {
      id: 1,
      title: '完成个人年度工作总结',
      publishTime: '2024-11-01 09:00:00',
      deadline: '2024-11-15 18:00:00',
      status: 'pending',
    },
    {
      id: 2,
      title: '填写年度考核自评表',
      publishTime: '2024-10-28 10:00:00',
      deadline: '2024-11-10 18:00:00',
      status: 'in_progress',
    },
    {
      id: 3,
      title: '提交部门业绩考核材料',
      publishTime: '2024-10-25 14:00:00',
      deadline: '2024-11-08 18:00:00',
      status: 'in_progress',
    },
    {
      id: 4,
      title: '参加年度考核培训',
      publishTime: '2024-10-20 09:00:00',
      deadline: '2024-10-30 18:00:00',
      status: 'completed',
    },
  ],
  
  pendingApprovals: [
    {
      id: 1,
      type: '年度考核结果审批',
      applicant: '张三',
      department: '办公室',
      submitTime: '2024-11-05 10:30:00',
      content: '申请审批办公室2024年度考核结果，共涉及15人...',
    },
    {
      id: 2,
      type: '考核等次调整申请',
      applicant: '李四',
      department: '人事处',
      submitTime: '2024-11-04 14:20:00',
      content: '因特殊贡献，申请将考核等次由"良好"调整为"优秀"...',
    },
    {
      id: 3,
      type: '延期提交材料申请',
      applicant: '王五',
      department: '财务处',
      submitTime: '2024-11-03 09:15:00',
      content: '因工作原因，申请延期3天提交考核材料...',
    },
  ],
  
  resultAnnouncements: [
    {
      id: 1,
      title: '2024年第三季度考核结果公示',
      department: '人事处',
      period: '2024年第三季度',
      publishTime: '2024-10-15 10:00:00',
      viewCount: 342,
    },
    {
      id: 2,
      title: '2024年上半年度考核结果公示',
      department: '人事处',
      period: '2024年上半年',
      publishTime: '2024-07-10 10:00:00',
      viewCount: 456,
    },
    {
      id: 3,
      title: '2024年第一季度考核结果公示',
      department: '人事处',
      period: '2024年第一季度',
      publishTime: '2024-04-10 10:00:00',
      viewCount: 389,
    },
  ],
  
  excellentResults: [
    {
      id: 1,
      name: '张伟',
      department: '办公室',
      grade: '优秀',
      period: '2024年第三季度',
      photo: '',
    },
    {
      id: 2,
      name: '李娜',
      department: '人事处',
      grade: '优秀',
      period: '2024年第三季度',
      photo: '',
    },
    {
      id: 3,
      name: '王强',
      department: '财务处',
      grade: '优秀',
      period: '2024年第三季度',
      photo: '',
    },
    {
      id: 4,
      name: '刘敏',
      department: '行政科',
      grade: '优秀',
      period: '2024年第三季度',
      photo: '',
    },
  ],
  
  experienceSharing: [
    {
      id: 1,
      title: '创新考核方式，提升工作效能',
      department: '办公室',
      publishTime: '2024-10-20 15:00:00',
      viewCount: 234,
      summary: '通过创新考核方式和方法，有效提升了部门整体工作效能...',
    },
    {
      id: 2,
      title: '数字化转型助力精准考核',
      department: '信息中心',
      publishTime: '2024-10-18 10:30:00',
      viewCount: 198,
      summary: '利用数字化手段，实现考核过程的精准化和科学化...',
    },
    {
      id: 3,
      title: '建立多维度考核指标体系经验分享',
      department: '人事处',
      publishTime: '2024-10-15 14:00:00',
      viewCount: 267,
      summary: '构建科学合理的多维度考核指标体系，全面评价工作绩效...',
    },
  ],
};

// 数据状态
const completionPeriod = ref('quarter');
const loading = ref(false);
const hasApprovalPermission = ref(true); // 模拟权限

// 详情弹窗状态
const notificationDialogVisible = ref(false);
const taskDialogVisible = ref(false);
const approvalDialogVisible = ref(false);
const resultDialogVisible = ref(false);
const excellentDialogVisible = ref(false);
const experienceDialogVisible = ref(false);

// 详情数据
const notificationDetail = ref<any>(null);
const taskDetail = ref<any>(null);
const approvalDetail = ref<any>(null);
const resultDetail = ref<any>(null);
const excellentDetail = ref<any>(null);
const experienceDetail = ref<any>(null);

// 概览数据
const overviewData = computed(() => [
  {
    key: 'totalTasks',
    label: '考核任务数',
    value: dashboardData.overview.totalTasks,
    icon: FileTextOutlined,
    trend: 'up',
    trendIcon: ArrowUpOutlined,
    trendText: '+12%'
  },
  {
    key: 'pendingTasks',
    label: '待办任务数',
    value: dashboardData.overview.pendingTasks,
    icon: ClockCircleOutlined,
    trend: 'down',
    trendIcon: ArrowDownOutlined,
    trendText: '-8%'
  },
  {
    key: 'completedTasks',
    label: '已完成任务数',
    value: dashboardData.overview.completedTasks,
    icon: CheckCircleOutlined,
    trend: 'up',
    trendIcon: ArrowUpOutlined,
    trendText: '+15%'
  },
  {
    key: 'excellentCount',
    label: '评优数',
    value: dashboardData.overview.excellentCount,
    icon: TrophyOutlined,
    trend: 'up',
    trendIcon: ArrowUpOutlined,
    trendText: '+5%'
  }
]);

// 通知数据
const notifications = computed(() => dashboardData.notifications);

// 任务数据
const tasks = ref([...dashboardData.tasks]);

// 待批事项数据
const pendingApprovals = ref([...dashboardData.pendingApprovals]);

// 考核结果公示数据
const resultAnnouncements = computed(() => dashboardData.resultAnnouncements);

// 评优结果数据
const excellentResults = computed(() => dashboardData.excellentResults);

// 先进经验分享数据
const experienceSharing = computed(() => dashboardData.experienceSharing);

// 格式化时间
const formatTime = (timeStr: string) => {
  return dayjs(timeStr).format('MM-DD HH:mm');
};

// 获取状态图标
const getStatusIcon = (status: string) => {
  const iconMap: Record<string, any> = {
    pending: ClockCircleOutlined,
    in_progress: EditOutlined,
    completed: CheckCircleOutlined
  };
  return iconMap[status] || FileTextOutlined;
};

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    pending: 'default',
    in_progress: 'warning',
    completed: 'success'
  };
  return typeMap[status] || 'default';
};

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    pending: '待开始',
    in_progress: '进行中',
    completed: '已完成'
  };
  return textMap[status] || '未知';
};

// 标记通知为已读
const markAsRead = (notification: any) => {
  message.success('已标记为已读');
  notificationDialogVisible.value = false;
};

// 拒绝审批
const rejectApproval = (approval: any) => {
  message.warning(`审批拒绝：${approval.type}`);
  const index = pendingApprovals.value.findIndex(item => item.id === approval.id);
  if (index > -1) {
    pendingApprovals.value.splice(index, 1);
  }
  approvalDialogVisible.value = false;
};

// 查看完整结果
const viewFullResult = (result: any) => {
  message.info('跳转到完整结果页面');
  resultDialogVisible.value = false;
  router.push(`/results?resultId=${result.id}`);
};

// 查看详细评优资料
const viewFullExcellent = (excellent: any) => {
  message.info('跳转到详细资料页面');
  excellentDialogVisible.value = false;
  router.push(`/results?excellentId=${excellent.id}`);
};

// 查看完整经验内容
const viewFullExperience = (experience: any) => {
  message.info('跳转到完整内容页面');
  experienceDialogVisible.value = false;
  router.push(`/publish?experienceId=${experience.id}`);
};



// 查看通知详情
const viewNotification = (notification: any) => {
  console.log('查看通知详情', notification);
  notificationDetail.value = notification;
  notificationDialogVisible.value = true;
  message.info('打开通知详情');
};

// 查看任务详情
const viewTask = (task: any) => {
  console.log('查看任务详情', task);
  taskDetail.value = task;
  taskDialogVisible.value = true;
  message.info('打开任务详情');
};

// 开始任务
const startTask = (task: any) => {
  message.success(`开始任务：${task.title}`);
  task.status = 'in_progress';
};

// 继续任务
const continueTask = (task: any) => {
  message.info(`继续任务：${task.title}`);
  router.push(`/assessment?taskId=${task.id}`);
};

// 查看审批详情
const viewApproval = (approval: any) => {
  console.log('查看审批详情', approval);
  approvalDetail.value = approval;
  approvalDialogVisible.value = true;
  message.info('打开审批详情');
};

// 审批通过
const approve = (approval: any) => {
  message.success(`审批通过：${approval.type}`);
  const index = pendingApprovals.value.findIndex(item => item.id === approval.id);
  if (index > -1) {
    pendingApprovals.value.splice(index, 1);
  }
};

// 审批操作
const approveAction = (approval: any) => {
  approve(approval);
};

// 查看结果详情
const viewResult = (result: any) => {
  console.log('查看结果详情', result);
  resultDetail.value = result;
  resultDialogVisible.value = true;
  message.info('打开结果详情');
};

// 查看评优详情
const viewExcellent = (excellent: any) => {
  console.log('查看评优详情', excellent);
  excellentDetail.value = excellent;
  excellentDialogVisible.value = true;
  message.info('打开评优详情');
};

// 查看经验详情
const viewExperience = (experience: any) => {
  console.log('查看经验详情', experience);
  experienceDetail.value = experience;
  experienceDialogVisible.value = true;
  message.info('打开经验详情');
};

// 跳转到各个模块
// const goToNotifications = () => router.push('/publish?tab=notifications');
// const goToTasks = () => router.push('/assessment?tab=tasks');
// const goToApprovals = () => router.push('/assessment?tab=approvals');
// const goToResults = () => router.push('/results?tab=announcements');
// const goToExcellent = () => router.push('/results?tab=excellent');
// const goToExperience = () => router.push('/publish?tab=experience');
const goToNotifications = () =>  message.success('跳转到通知模块');
const goToTasks = () =>  message.success('跳转到任务模块');
const goToApprovals = () =>  message.success('跳转到审批模块');
const goToResults = () =>  message.success('跳转到结果模块');
const goToExcellent = () =>  message.success('跳转到评优模块');
const goToExperience = () =>  message.success('跳转到经验模块');

// 初始化图表
onMounted(() => {
  // 渲染考核完成率图表
  renderCompletionRate({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dashboardData.completionRate.departments.map(d => d.name),
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [{
      name: '完成率',
      type: 'bar',
      data: dashboardData.completionRate.departments.map(d => d.rate),
      itemStyle: {
        color: '#667eea'
      },
      barWidth: '60%'
    }]
  });

  // 渲染考核等次分布图表
  renderGradeDistribution({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: dashboardData.gradeDistribution.map(item => item.name)
    },
    series: [{
      name: '考核等次',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['60%', '50%'],
      data: dashboardData.gradeDistribution,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  });
});
</script>

<style lang="scss" scoped>
.dashboard {
  .page-container {
    padding: 16px;
    background: #f5f7fa;
    min-height: 100vh;
  }
}

.overview-section {
  margin-bottom: 16px;
  
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    
    h2 {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }
  }
  
  .overview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
  }
}

.data-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  padding: 10px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
  }
  
  .card-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: 0.3;
  }
  
  .card-content {
    margin-bottom: 10px;
    
    .card-value {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .card-label {
      font-size: 14px;
      opacity: 0.9;
    }
  }
  
  .card-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    opacity: 0.9;
    
    &.up {
      color: #52c41a;
    }
    
    &.down {
      color: #ff4d4f;
    }
  }
}

.charts-section {
  margin-bottom: 16px;
  
  .chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  
  .chart-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      
      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
        margin: 0;
      }
    }
  }
}

.content-section {
  .content-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .content-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      flex-shrink: 0;
      
      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
        margin: 0;
      }
    }
  }
}

.notification-list,
.task-list,
.approval-list,
.result-list,
.excellent-list,
.experience-list {
  flex: 1;
  overflow-y: auto;
  max-height: 280px;
  padding-right: 4px;
  
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 3px;
    
    &:hover {
      background: #999;
    }
  }
}

// 统一的列表项卡片样式
.list-item-card {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
  background: #fafafa;
  min-height: 72px;
  
  &:hover {
    background: #fff;
    border-color: #1890ff;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.12);
  }
  
  &:last-child {
    margin-bottom: 0;
  }
}

// 统一的元标签样式
.meta-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #595959;
  margin-right: 8px;
}

.meta-info {
  font-size: 12px;
  color: #8c8c8c;
  margin-right: 8px;
}

.meta-time {
  font-size: 12px;
  color: #8c8c8c;
}

// 考核通知样式
.notification-item {
  &.important {
    border-left: 3px solid #ff4d4f !important;
    
    .notification-icon-wrapper {
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        background: #ff4d4f;
        border-radius: 50%;
        border: 2px solid #fff;
      }
    }
  }
  
  .notification-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f5ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
  }
  
  .notification-main {
    flex: 1;
    min-width: 0;
    
    .notification-title {
      font-size: 14px;
      font-weight: 500;
      color: #262626;
      margin-bottom: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .notification-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  
  .notification-time-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 12px;
    color: #595959;
    margin-left: 12px;
  }
}

// 考核任务样式
.task-item {
  .task-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 12px;
    
    &.pending {
      background: #e6f7ff;
      color: #1890ff;
    }
    
    &.in_progress {
      background: #fff7e6;
      color: #faad14;
    }
    
    &.completed {
      background: #f6ffed;
      color: #52c41a;
    }
  }
  
  .task-main {
    flex: 1;
    min-width: 0;
    
    .task-title {
      font-size: 14px;
      font-weight: 500;
      color: #262626;
      margin-bottom: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .task-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  
  .task-action {
    flex-shrink: 0;
    margin-left: 12px;
  }
}

// 待批事项样式
.approval-item {
  .approval-type-tag {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .approval-main {
    flex: 1;
    min-width: 0;
    
    .approval-title {
      font-size: 14px;
      font-weight: 500;
      color: #262626;
      margin-bottom: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .approval-meta {
      display: flex;
      align-items: center;
    }
  }
  
  .approval-action {
    flex-shrink: 0;
    margin-left: 12px;
  }
}

// 考核结果公示样式
.result-item {
  align-items: flex-start;
  
  .result-main {
    flex: 1;
    min-width: 0;
    
    .result-title {
      font-size: 14px;
      font-weight: 500;
      color: #262626;
      margin-bottom: 8px;
      line-height: 1.5;
    }
    
    .result-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  
  .result-time-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    background: #e6f7ff;
    border-radius: 4px;
    font-size: 12px;
    color: #1890ff;
    margin-left: 12px;
  }
}

// 评优结果样式
.excellent-item {
  .excellent-avatar {
    flex-shrink: 0;
  }
  
  .excellent-main {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
    
    .excellent-name {
      font-size: 14px;
      font-weight: 500;
      color: #262626;
      margin-bottom: 6px;
    }
    
    .excellent-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  
  .excellent-badge {
    flex-shrink: 0;
    margin-left: 12px;
  }
}

// 先进经验分享样式
.experience-item {
  align-items: flex-start;
  
  .experience-main {
    flex: 1;
    min-width: 0;
    
    .experience-title {
      font-size: 14px;
      font-weight: 500;
      color: #262626;
      margin-bottom: 8px;
      line-height: 1.5;
    }
    
    .experience-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  
  .experience-time-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 12px;
    color: #595959;
    margin-left: 12px;
  }
}

// 详情弹窗样式
.notification-detail,
.task-detail,
.approval-detail,
.result-detail,
.excellent-detail,
.experience-detail {
  .detail-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 12px 0;
    }
    
    .detail-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 14px;
      color: #8c8c8c;
      
      .department,
      .applicant,
      .time,
      .deadline,
      .period,
      .read-count,
      .view-count {
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }
  }
  
  .detail-content {
    .task-info,
    .approval-info,
    .result-info,
    .excellent-details,
    .experience-info {
      margin-bottom: 20px;
      
      p {
        margin: 8px 0;
        font-size: 14px;
        color: #595959;
        line-height: 1.6;
        
        strong {
          color: #303133;
          font-weight: 600;
        }
      }
    }
    
    .experience-summary {
      margin-top: 16px;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 6px;
      border-left: 4px solid #1890ff;
    }
    
    .detail-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      padding-top: 16px;
      border-top: 1px solid #f0f0f0;
    }
  }
}

.excellent-detail {
  .detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .excellent-avatar {
      flex-shrink: 0;
    }
    
    .excellent-info {
      flex: 1;
      
      h3 {
        margin: 0 0 8px 0;
        font-size: 20px;
        font-weight: 600;
        color: #303133;
      }
      
      .department {
        margin: 0 0 12px 0;
        font-size: 14px;
        color: #8c8c8c;
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .charts-section .chart-row {
    grid-template-columns: 1fr !important;
  }
  
  .content-section .content-row {
    grid-template-columns: 1fr !important;
  }
  
  .content-card {
    min-height: auto !important;
  }
  
  .notification-list,
  .task-list,
  .approval-list,
  .result-list,
  .excellent-list,
  .experience-list {
    max-height: 250px;
  }
}

@media (max-width: 768px) {
  .dashboard .page-container {
    padding: 12px;
  }
  
  .overview-section .overview-cards {
    grid-template-columns: 1fr !important;
  }
  
  .data-card {
    padding: 16px;
    
    .card-content .card-value {
      font-size: 24px;
    }
  }
  
  .chart-card,
  .content-card {
    padding: 12px;
    min-height: auto !important;
  }
  
  .notification-list,
  .task-list,
  .approval-list,
  .result-list,
  .excellent-list,
  .experience-list {
    max-height: 200px;
  }
}
</style>
