<template>
  <div class="user-score-container-wrapper">
    <div class="user-score-container">
  <div class="app-container">
    <!-- 页面标题 -->
    <div v-if="!isList" class="content-header">
      <h1 class="page-title">{{ monthScore.deptName }}</h1>
      <el-select v-if="!isList" style="width: 150px;" v-model="selectedMonth" placeholder="请选择月份" @change="handleMonthChange">
        <el-option
          v-for="item in monthOptions"
          :key="item.value"
          :value="item.value"
          :label="item.label">
          <span style="margin-left: 15px;">{{ item.label }}</span>
        </el-option>
      </el-select>
    </div>

    <!-- 场站列表 -->
    <el-card v-if="isList" class="card-form" shadow="hover">
      <div style="margin-bottom: 15px;">
        <el-row :gutter="20">
          <el-col :span="4">
            <div style="font-size: 15px;font-weight: bold;margin-bottom: 5px;">维保中心</div>
            <el-input
              v-model="queryParams.parentName"
              style="width: 100%;"
              placeholder="请输入维保中心"
              @keyup.enter="handleStatusChange"
              clearable
            />
          </el-col>
          <el-col :span="4">
            <div style="font-size: 15px;font-weight: bold;margin-bottom: 5px;">场站</div>
            <el-input 
              v-model="queryParams.deptName"
              style="width: 100%;"
              placeholder="请输入场站"
              @keyup.enter="handleStatusChange"
              clearable
            />
          </el-col>
          <el-col :span="4">
            <div style="font-size: 15px;font-weight: bold;margin-bottom: 5px;">月份</div>
            <el-date-picker
              v-model="queryParams.monthPeriod"
              type="month"
              placeholder="请选择月份"
              format="YYYY-MM"
              value-format="YYYY-MM"
              style="width: 100%;"
              @change="handleStatusChange"
            />
          </el-col>
          <!-- <el-col :span="4" style="display: flex; justify-content: flex-end; align-items: flex-end;"> -->
          <el-col :span="4" style="display: flex; align-items: flex-end;">
            <el-button style="padding: 5px 15px;" icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button style="padding: 5px 15px;" type="primary" icon="Search" @click="handleStatusChange">搜索</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="form-content">
        <el-table :data="departmentStats" style="width: 100%">
          <el-table-column prop="parentName" label="维保中心"></el-table-column>
          <el-table-column prop="deptName" label="场站"></el-table-column>
          <el-table-column prop="monthPeriod" label="汇总月份"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-tag type="primary" @click="handleReview(scope.row)" style="cursor: pointer;padding: 5px 10px;margin-right: 10px;">查看</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="margin-top: 20px;"
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handlePagination"
        />
      </div>
    </el-card>
    
    <el-row v-if="!isList" :gutter="20">
      <el-col :span="8">
        <el-card class="card-form-left" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">维保工单统计</span>
          </div>
          <div class="form-content" style="margin-top: 20px;">
            <!-- 维保机型类型统计表格 -->
            <el-table :data="fanInspectionScoreList" style="width: 100%" @row-click="handleRowClick" :row-class-name="tableRowClassName">
              <el-table-column prop="model" width="200px" label="机型"></el-table-column>
              <el-table-column prop="inspectionType" label="维保类型"></el-table-column>
              <el-table-column prop="deviceCount" label="维保数量"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="card-form-right" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">维保工单明细</span>
          </div>
          <div class="form-content" style="margin-top: 20px;">
            <el-table :data="workOrderList" style="width: 100%" class="custom-header-table">
              <el-table-column width="200px" label="工单编码">
                <template #default="scope">
                  <el-button link type="primary" @click="handleWorkOrderClick(scope.row)">{{ scope.row.workOrderProjectNo }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="teamLeaderName" label="工作负责人"></el-table-column>
              <el-table-column prop="acceptUserName" label="接单人"></el-table-column>
              <el-table-column prop="pauseTime" label="停机时间"></el-table-column>
              <el-table-column prop="restartTime" label="恢复运行时间"></el-table-column>
            </el-table>
            <pagination style="margin-top: 20px;"
              v-show="wbtotal>0"
              :total="wbtotal"
              v-model:page="wbqueryParams.pageNum"
              v-model:limit="wbqueryParams.pageSize"
              @pagination="handlePaginationwb"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row v-if="!isList" :gutter="20">
      <el-col :span="8">
        <el-card class="card-form-left" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">维修工单统计</span>
          </div>
          <div class="form-content" style="margin-top: 20px;">
            <!-- 维修工单详情表格 -->
            <el-table :data="repairOrderStatistics" style="width: 100%" @row-click="handleRepairRowClick" :row-class-name="repairTableRowClassName">
              <el-table-column prop="repairType" label="检修类型" ></el-table-column>
              <el-table-column prop="orderCount" label="工单数量"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="card-form-right" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">维修工单明细</span>
          </div>
          <div class="form-content" style="margin-top: 20px;">
            <el-table :data="repairOrderList" style="width: 100%" class="custom-header-table">
              <el-table-column width="200px" label="工单编码">
                <template #default="scope">
                  <el-button link type="primary" @click="handleRepairOrderClick(scope.row)">{{ scope.row.workOrderProjectNo }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="model" width="200px" label="机型"></el-table-column>
              <el-table-column prop="teamLeaderName" label="工作负责人"></el-table-column>
              <el-table-column prop="acceptUserName" label="接单人"></el-table-column>
              <el-table-column prop="occurTime" label="停机时间"></el-table-column>
              <el-table-column prop="restartTime" label="恢复运行时间"></el-table-column>
            </el-table>
            <pagination style="margin-top: 20px;"
              v-show="wxtotal>0"
              :total="wxtotal"
              v-model:page="wxqueryParams.pageNum"
              v-model:limit="wxqueryParams.pageSize"
              @pagination="handlePaginationwx"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 第五个表单：员工考核得分 -->
    <el-card v-if="!isList" class="card-form" style="margin-bottom: 20px;" shadow="hover">
      <div slot="header" class="clearfix">
        <span v-if="isInfo" style="font-weight: bold;">员工考核得分</span>
        <span v-else style="font-weight: bold;">个人工分汇总</span>
        <el-input v-if="isInfo"
          v-model="userScorequeryParams.nickName" 
          placeholder="请输入员工姓名" 
          style="width: 200px; float: right; margin-top: 5px; margin-left: 10px;" 
          @keyup.enter="handlePaginationUserScore">
          <template #suffix>
            <i class="el-input__icon el-icon-search" @click="handlePaginationUserScore"></i>
          </template>
        </el-input>
      </div>
      <div class="form-content" style="margin-top: 20px;">
        <!-- 员工考核得分表格 -->
        <el-table :data="userScoreList" style="width: 100%">
          <el-table-column v-if="isInfo" prop="nickName" label="员工姓名">
            <template #default="scope">
              <span :style="{ color: scope.row.userId === monthScore.userId ? 'red' : '' }">{{ scope.row.nickName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceTotalScore" label="维保工分">
            <template #default="scope">
              {{ parseFloat(scope.row.maintenanceTotalScore).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="repairTotalScore" label="维修工分">
            <template #default="scope">
              {{ parseFloat(scope.row.repairTotalScore).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="finalScore" label="总工分">
            <template #default="scope">
              <span :style="{ color: getScoreColor(scope.row.finalScore) }">{{ parseFloat(scope.row.finalScore).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="margin-top: 20px;"
          v-show="userScoreTotal>0"
          :total="userScoreTotal"
          v-model:page="userScorequeryParams.pageNum"
          v-model:limit="userScorequeryParams.pageSize"
          @pagination="handlePaginationUserScore"
        />
      </div>
    </el-card>
  </div>
  </div>
  </div>
</template>

<script>
import { checkPermi } from '@/utils/permission'
import { getScoreSummary, getSummaryMonths, getMonthScoreList, getWorkOrderByMonth, getRepairOrderByMonth, listUserScore } from '@/api/gxt/userScore'
import { useDict } from '@/utils/dict'

export default {
  name: 'monthScore',
  data() {
    return {
      isList: true,
      isInfo:false,
      monthScore: {
        status: 0,
        deptId: 0,
        feedbackContent: '' // 添加feedbackContent属性
      },
      selectedMonth: null, // 默认选中的月份
      monthOptions: [], // 月份选项
      // 新增的部门统计数据
      departmentStats: [],
      // 字典数据
      gxtInspectionType: [], // 维保类型字典
      gxtMaintenanceType: [], // 维保类型字典
      // 本月维保工单统计数据
      maintenanceOrderStats: {
        plannedCount: 0,
        actualCount: 0,
        groupDeduction: 0,
        workOrderCoefficient: 1,
        repairOrderCoefficient: 1
      },
      // 维保机型类型统计数据
      fanInspectionScoreList: [],
      // 当前选中的机型和维保类型
      currentSelectedModel: '',
      currentSelectedInspectionType: '',
      // 当前选中行索引
      currentRowIndex: -1,
      currentRepairRowIndex: -1, // 维修工单统计表格当前选中行索引
      // 维修工单详情数据
      repairOrderStatistics: [],
      // 当前选中的检修类型
      currentSelectedRepairType: '',
      // 员工考核得分数据
      userScoreList: [],
      workOrderList: [],
      repairOrderList: [],
      // 用户筛选相关
      userFilterText: '',
      originalUserScoreList: [],
      total:0,
      queryParams: {
        status: null,
        statusList: null,
        pageNum: 1,
        pageSize: 10,
        deptName: null,
        parentName: null,
        monthPeriod: null
      },
      wbtotal: 0,
      wbqueryParams: {
        pageNum: 1,
        pageSize: 5,
        model: null,
        inspectionType: null,
        pcsStationPid: null,
        monthPeriod: null,
        userId: null
      },
      wxtotal: 0,
      wxqueryParams: {
        pageNum: 1,
        pageSize: 5,
        maintenanceType: null,
        pcsStationPid: null,
        monthPeriod: null,
        userId: null
      },
      userScoreTotal: 0,
      userScorequeryParams: {
        pageNum: 1,
        pageSize: 10,
        monthScoreId: null,
        nickName: null
      },
    }
  },
  created() {
    this.checkPermissions();
    this.initMonthOptions(0,null);
    this.initDict();
  },

  watch: {
    // 监听路由变化，当路由参数发生变化时重新加载数据
    '$route'() {
      // 如果是从其他页面返回到当前页面，重新加载数据
      if(this.$route.name=='ScoreSummary') {
        this.handleStatusChange();
      }
    },
    // 监听 plannedCount 或 actualCount 的变化
    'maintenanceOrderStats.plannedCount': 'calculateDeduction',
    'maintenanceOrderStats.actualCount': 'calculateDeduction'
  },
  methods: {
    calculateDeduction() {
      const { plannedCount, actualCount } = this.maintenanceOrderStats;
      // 当计划值大于实际值时，计算差值；否则清空
      if (plannedCount > actualCount) {
        this.maintenanceOrderStats.groupDeduction = plannedCount - actualCount;
      } else {
        this.maintenanceOrderStats.groupDeduction = 0; // 或设为 0
      }
    },
    handlePagination() {
      this.fetchScoreSummaryData(this.selectedMonth, this.monthScore.deptId);
    },
    handleReview(row) {
      const rtType = this.isInfo ? 1 : 0;
      getScoreSummary(row.monthPeriod, rtType, row.deptId).then(response => {
        if (response.code === 200 && response.monthScore) {
          // 使用router.push方法替代tab.openPage避免页面切换问题
          this.$router.push({ path: '/gxt/monthScore/info/' + response.monthScore.id });
        }
      });
    },
    // 根据inspectionTypeId获取inspectionType标签
    getInspectionTypeLabel(inspectionTypeId) {
      if (!inspectionTypeId) return '';
      
      const dictItem = this.gxtInspectionType.find(item => item.value === inspectionTypeId.toString());
      return dictItem ? dictItem.label : '';
    },
    getMaintenanceTypeLabel(maintenanceTypeId) {
      if (!maintenanceTypeId) return '';
      
      const dictItem = this.gxtMaintenanceType.find(item => item.value === maintenanceTypeId.toString());
      return dictItem ? dictItem.label : '';
    },
    
    // 初始化字典数据
    initDict() {
      const { gxt_inspection_type, gxt_maintenance_type } = useDict("gxt_inspection_type", "gxt_maintenance_type")
      this.gxtInspectionType = gxt_inspection_type || []
      this.gxtMaintenanceType = gxt_maintenance_type || []
      if(!checkPermi(['gxt:monthScore:all'])) {
        this.isList = false;
      }
    },
    // 初始化月份选项
    initMonthOptions(param,monthParam) {
      // 从后端接口获取月份选项数据
      getSummaryMonths(param).then(response => {
        if (response.code === 200) {
          this.monthOptions = response.dictList || [];
          
          // 如果有月份选项数据，设置默认选中第一个
          if (this.monthOptions.length > 0) {
            if(monthParam && monthParam!=null) {
              this.selectedMonth = monthParam;
            }else{
              this.selectedMonth = this.monthOptions[0].value;
            }
            // 获取默认月份的数据
            this.fetchScoreSummaryData(this.selectedMonth,param);
          }
        } else {
          console.error('获取月份选项数据失败:', response.msg);
          // 如果获取失败，使用原有的默认逻辑
          this.initDefaultMonthOptions();
        }
      }).catch(error => {
        console.error('获取月份选项数据异常:', error);
        // 如果获取异常，使用原有的默认逻辑
        this.initDefaultMonthOptions();
      });
    },

    getLastMonth() {
      const date = new Date();
      date.setMonth(date.getMonth() - 1); // 设置为上一个月
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以要 +1
      return `${year}-${month}`;
    },
    
    // 获取月度工分汇总数据
    fetchScoreSummaryData(monthPeriod,deptParam) {
      if(this.isList) {
        this.selectedMonth = this.getLastMonth();
        getMonthScoreList(this.queryParams).then(response => {
          if (response.code === 200) {
            this.departmentStats = response.rows;
            this.total = response.total;
          }else{
            this.departmentStats = [];
          }
        }).catch(error => {
          console.error('获取月度工分列表数据异常:', error);
          this.departmentStats = [];
        });
        return;
      }
      // 根据权限设置rtType参数
      const rtType = this.isInfo ? 1 : 0;
      
      getScoreSummary(monthPeriod, rtType, deptParam).then(response => {
        if (response.code === 200 && response.monthScore) {
          this.userFilterText = '';
          const monthScoreGet = response.monthScore;
          this.monthScore = monthScoreGet;
          this.userScorequeryParams.monthScoreId = monthScoreGet.id;
          if(this.monthScore.status==4) {
            this.$message.warning('当前用户所属部门非场站，无法生成场站月度工分汇总数据！');
          }
          // console.log(monthScoreGet);
          
          // 设置本月维保工单统计数据
          if (monthScoreGet.coefficientScore) {
            this.maintenanceOrderStats = monthScoreGet.coefficientScore;
          }
          
          // 设置维保机型类型统计数据
          if (monthScoreGet.monthFanInspections) {
            this.fanInspectionScoreList = monthScoreGet.monthFanInspections.map(item => {
              return {
                model: item.model,
                inspectionType: this.getInspectionTypeLabel(item.inspectionTypeId), // 从字典中获取
                deviceCount: item.deviceCount || 0
              };
            });
          }

          if (monthScoreGet.workOrderList) {
            const wbSize = monthScoreGet.workOrderList.length;
            this.wbtotal = wbSize;
            if (this.wbqueryParams.pageSize>=wbSize) {
              this.workOrderList = monthScoreGet.workOrderList;
            }else{
              this.workOrderList = monthScoreGet.workOrderList.slice(0, this.wbqueryParams.pageSize);
            }
            if (monthScoreGet.monthFanInspections && monthScoreGet.monthFanInspections.length>0) {
              const firstItem = monthScoreGet.monthFanInspections[0];
              this.wbqueryParams.pageNum = 1;
              this.wbqueryParams.model = firstItem.model;
              this.wbqueryParams.inspectionType = firstItem.inspectionType;
              this.wbqueryParams.pcsStationPid = this.monthScore.deptId;
              this.wbqueryParams.monthPeriod = this.selectedMonth;
              this.currentSelectedModel = monthScoreGet.monthFanInspections[0].model;
              this.currentSelectedInspectionType = this.getInspectionTypeLabel(firstItem.inspectionTypeId);
              // 默认选中第一行
              this.currentRowIndex = 0;
            }else{
              this.currentSelectedModel = '';
              this.currentSelectedInspectionType = '';
              this.currentRowIndex = -1;
            }
          }
          
          // 设置维修工单详情数据
          if (monthScoreGet.monthRepairProjects) {
            this.repairOrderStatistics = monthScoreGet.monthRepairProjects.map(item => {
              return {
                repairType: this.getMaintenanceTypeLabel(item.maintenanceType),
                orderCount: item.orderCount || 0
              };
            });
          }

          if (monthScoreGet.repairOrderList) {
            const wxSize = monthScoreGet.repairOrderList.length;
            this.wxtotal = wxSize;
            if (this.wxqueryParams.pageSize>=wxSize) {
              this.repairOrderList = monthScoreGet.repairOrderList;
            }else{
              this.repairOrderList = monthScoreGet.repairOrderList.slice(0, this.wxqueryParams.pageSize);
            }
            if (monthScoreGet.monthRepairProjects && monthScoreGet.monthRepairProjects.length>0) {
              const firstItem = monthScoreGet.monthRepairProjects[0];
              this.wxqueryParams.pageNum = 1;
              this.wxqueryParams.maintenanceType = firstItem.maintenanceType;
              this.wxqueryParams.pcsStationPid = this.monthScore.deptId;
              this.wxqueryParams.monthPeriod = this.selectedMonth;
              this.currentSelectedRepairType = this.getMaintenanceTypeLabel(firstItem.maintenanceType);
              // 默认选中维修工单统计表格的第一行
              this.currentRepairRowIndex = 0;
            }else{
              this.currentSelectedRepairType = '';
              this.currentRepairRowIndex = -1;
            }
          }
          
          // 设置员工考核得分数据
          if (monthScoreGet.userScores) {
            this.userScoreList = monthScoreGet.userScores;
            this.userScoreTotal = monthScoreGet.userListSize || 0;
            // 保存原始数据用于筛选
            this.originalUserScoreList = [...monthScoreGet.userScores];
          }
        } else {
          console.error('获取月度工分汇总数据失败:', response.msg);
        }
      }).catch(error => {
        console.error('获取月度工分汇总数据异常:', error);
      });
    },
    
    // 处理月份变化
    handleMonthChange(value) {
      // console.log('选择的月份:', value);
      // 获取选择月份的数据
      this.fetchScoreSummaryData(value,this.monthScore.deptId);
    },
    // 初始化默认月份选项（原有逻辑）
    initDefaultMonthOptions() {
      const now = new Date();
      // 获取上个月
      const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
      
      // 生成最近6个月的选项（包括本月）
      this.monthOptions = [];
      for (let i = 0; i < 6; i++) {
        const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const value = `${year}-${month}`;
        const label = `${year}年${month}月`;
        
        this.monthOptions.push({
          value: value,
          label: label
        });
      }
      
      // 设置默认选中为上个月
      const defaultYear = lastMonth.getFullYear();
      const defaultMonth = String(lastMonth.getMonth() + 1).padStart(2, '0');
      this.selectedMonth = `${defaultYear}-${defaultMonth}`;
      
      // 获取默认月份的数据
      this.fetchScoreSummaryData(this.selectedMonth,this.monthScore.deptId);
    },
    
    // 检查权限
    checkPermissions() {
      this.isInfo = checkPermi(['gxt:monthScore:all']) || checkPermi(['gxt:monthScore:view']);
    },
    resetQuery() {
      this.queryParams = {
        status: null,
        statusList: null,
        pageNum: 1,
        pageSize: 10,
        deptName: null,
        parentName: null,
        monthPeriod: null
      };
      this.handleStatusChange();
    },
    

    
    // 处理状态筛选变化
    handleStatusChange(value) {
      console.log('状态筛选变化:', this.queryParams);
      this.queryParams.pageNum = 1;
      this.fetchScoreSummaryData(this.selectedMonth,this.monthScore.deptId);
      // 在这里可以添加根据状态筛选数据的逻辑
      // 例如：重新加载部门统计数据或其他相关操作
    },
    
    // 表格行的类名
    tableRowClassName({row, rowIndex}) {
      // 如果当前行是选中行，添加选中样式
      if (this.currentRowIndex === rowIndex) {
        return 'selected-row';
      }
      return '';
    },
    
    // 维修工单统计表格行的类名
    repairTableRowClassName({row, rowIndex}) {
      // 如果当前行是选中行，添加选中样式
      if (this.currentRepairRowIndex === rowIndex) {
        return 'selected-row';
      }
      return '';
    },
    
    // 根据显示标签获取字典值
    getInspectionTypeValue(label) {
      if (!label) return '';
      
      const dictItem = this.gxtInspectionType.find(item => item.label === label);
      return dictItem ? dictItem.value : '';
    },
    
    // 处理表格行点击事件
    handleRowClick(row, column, event) {
      // 更新当前选中的行索引
      const rows = this.fanInspectionScoreList;
      const rowIndex = rows.findIndex(item => item === row);
      this.currentRowIndex = rowIndex;
      
      // 更新当前选中的机型和维保类型
      this.currentSelectedModel = row.model;
      this.currentSelectedInspectionType = row.inspectionType;
      
      // 构造请求参数
      this.wbqueryParams.pageNum = 1;
      this.wbqueryParams.model = row.model;
      this.wbqueryParams.inspectionType = this.getInspectionTypeValue(row.inspectionType);
      this.wbqueryParams.pcsStationPid = this.monthScore.deptId;
      this.wbqueryParams.monthPeriod = this.selectedMonth;
      if (!this.isInfo) {
        this.wbqueryParams.userId = 1;
      }
      
      // 调用后端接口
      this.queryWbList();
    },
    
    // 处理维修工单统计表格行点击事件
    handleRepairRowClick(row, column, event) {
      // 更新当前选中的行索引
      const rows = this.repairOrderStatistics;
      const rowIndex = rows.findIndex(item => item === row);
      this.currentRepairRowIndex = rowIndex;
      
      // 更新当前选中的检修类型
      this.currentSelectedRepairType = row.repairType;
      
      // 构造请求参数
      this.wxqueryParams.pageNum = 1;
      this.wxqueryParams.maintenanceType = this.getMaintenanceTypeValue(row.repairType);
      this.wxqueryParams.pcsStationPid = this.monthScore.deptId;
      this.wxqueryParams.monthPeriod = this.selectedMonth;
      if (!this.isInfo) {
        this.wxqueryParams.userId = 1;
      }
      
      // 调用后端接口
      this.queryWxList();
    },
    
    // 根据显示标签获取字典值（维修类型）
    getMaintenanceTypeValue(label) {
      if (!label) return '';
      
      const dictItem = this.gxtMaintenanceType.find(item => item.label === label);
      return dictItem ? dictItem.value : '';
    },
    
    // 处理工单编码点击事件
    handleWorkOrderClick(row) {
      // 记录来源路由和工单编码
      sessionStorage.setItem('fromRoute', '/workScore/monthScore');
      sessionStorage.setItem('workOrderProjectNo', row.workOrderProjectNo);
      // 跳转到维保工单列表页面
      this.$router.push({
        path: '/workOrder/gxtOrder'
      });
    },
    
    handleRepairOrderClick(row) {
      // 记录来源路由和工单编码
      sessionStorage.setItem('fromRouteRepair', '/workScore/monthScore');
      sessionStorage.setItem('workOrderProjectNoRepair', row.workOrderProjectNo);
      // 跳转到维保工单列表页面
      this.$router.push({
        path: '/workOrder/repairOrder'
      });
    },
    
    // 根据姓名筛选用户
    handlePaginationUserScore() {
      listUserScore(this.userScorequeryParams).then(response => {
        if (response.code === 200) {
          this.userScoreList = response.rows || [];
          this.userScoreTotal = response.total;
        } else {
          this.userScoreList = [];
          this.userScoreTotal = 0;
        }
      }).catch(error => {
        console.error('获取用户得分数据异常:', error);
      });
    },

    // 根据分数返回对应颜色
    getScoreColor(score) {
      if (score > 0) {
        return '#000000'; // 黑色
      } else if (score < 0) {
        return '#F56C6C'; // 红色
      } else {
        return '#000000'; // 黑色
      }
    },

    queryWbList() {
      getWorkOrderByMonth(this.wbqueryParams).then(response => {
        if (response.code === 200) {
          // 将返回结果赋值给workOrderList
          this.workOrderList = response.rows || [];
          this.wbtotal = response.total;
        } else {
          this.$message.error('获取维保工单数据失败：' + response.msg);
        }
      }).catch(error => {
        console.error('获取维保工单数据异常:', error);
        this.$message.error('获取维保工单数据异常');
      });
    },

    queryWxList() {
      getRepairOrderByMonth(this.wxqueryParams).then(response => {
        if (response.code === 200) {
          // 将返回结果赋值给repairOrderList
          this.repairOrderList = response.rows || [];
          this.wxtotal = response.total;
        } else {
          this.$message.error('获取维修工单数据失败：' + response.msg);
        }
      }).catch(error => {
        console.error('获取维修工单数据异常:', error);
        this.$message.error('获取维修工单数据异常');
      });
    },

    
    handlePaginationwb() {
      this.queryWbList();
    },
    handlePaginationwx() {
      this.queryWxList();
    },
  }
}
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

.user-score-container-wrapper {
  position: relative;
  height: 100%;
}

.user-score-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f5f7fa;
}

/* 页面头部样式 */
.content-header {
  padding: 1.2rem 2rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.dept-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2d3748;
  font-style: normal;
}

.card-form {
  border-radius: 10px; /* 统一圆角半径 */
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 20px;
  margin-right: 20px;
}

.card-form-left {
  border-radius: 10px; /* 统一圆角半径 */
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 20px;
  margin-right: 0px;
}

.card-form-right {
  border-radius: 10px; /* 统一圆角半径 */
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 20px;
}

/* 输入框样式 - 占据100%宽度并左对齐数字 */
.full-width-input {
  width: 100% !important;
}

:deep(.full-width-input .el-input__inner) {
  text-align: left !important;
}

/* 表格选中行样式 */
:deep(.el-table .selected-row td) {
  background-color: #e6f7ff !important; /* 浅蓝色背景 */
  color: #1890ff; /* 蓝色文字 */
  font-weight: 500;
}

/* 表格行鼠标悬停样式 */
:deep(.el-table .el-table__body tr.el-table__row:hover > td) {
  background-color: #f5f7fa;
}

/* 自定义表头背景色 */
:deep(.custom-header-table .el-table__header th) {
  background-color: #e6f7ff !important;
}
</style>
