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

      <!-- 主要内容区域 -->
      <div class="content-wrapper">
        <!-- 人员评分模块 -->
        <div class="module-container active">
          <div class="module-header">
            <h2 class="module-subtitle">人员评分管理</h2>
          </div>
          
          <!-- 标签页 -->
          <div class="tab-container">
            <button class="tab-button" :class="{ active: activeTab === 'maintenance' }" @click="activeTab = 'maintenance'">维保工单</button>
            <button class="tab-button" :class="{ active: activeTab === 'repair' }" @click="activeTab = 'repair'">维修工单</button>
          </div>
          
          <!-- 维保工单标签内容 -->
          <div class="tab-content" :class="{ active: activeTab === 'maintenance' }">
            <h3 class="module-subtitle" style="margin-bottom: 1rem;">场站负责人（班长）评分</h3>
            <div class="table-responsive" style="margin-bottom: 1.5rem;">
              <el-table :data="coefficientScoreList" class="data-table">
                <el-table-column prop="item" label="定检台数"></el-table-column>
                <el-table-column prop="plannedCount" label="计划">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.plannedCount" :min="0" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="actualCount" label="实际">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.actualCount" :min="0" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="groupDeduction" label="全组扣分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.groupDeduction" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <h3 class="module-subtitle" style="margin-bottom: 1rem;">安全运行工单列表</h3>
            <div class="table-responsive" style="margin-bottom: 1.5rem;">
              <el-table :data="userRuntimeScoreList" class="data-table">
                <el-table-column prop="userName" label="维保人"></el-table-column>
                <el-table-column prop="runtimeRange" label="运行天数"></el-table-column>
                <el-table-column prop="deviceCount" label="工单数量">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.deviceCount" :min="0" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="score" label="负责工单得分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.score" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="runtimeScore" label="工单总分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.runtimeScore" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="calculatedScore" label="最终得分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.calculatedScore" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <h3 class="module-subtitle" style="margin-bottom: 1rem;">维保机组类型评分</h3>
            <div class="table-responsive" style="margin-bottom: 1.5rem;">
              <el-table :data="userFanInspectionScoreList" class="data-table">
                <el-table-column prop="userName" label="维保人"></el-table-column>
                <el-table-column prop="model" label="风机类型"></el-table-column>
                <el-table-column prop="inspectionType" label="本月维保类型"></el-table-column>
                <el-table-column prop="deviceCount" label="本月维保数量">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.deviceCount" :min="0" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="fanInspectionScore" label="负责工单得分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.fanInspectionScore" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="totalScore" label="工单总分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.totalScore" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="calculatedScore" label="最终得分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.calculatedScore" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <h3 class="module-subtitle" style="margin-bottom: 1rem;">员工得分列表</h3>
            <div class="table-responsive">
              <el-table :data="maintenanceUserScoreData" class="data-table">
                <el-table-column prop="userName" label="员工姓名"></el-table-column>
                <el-table-column prop="maintenanceTotalScore" label="实际考核得分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.maintenanceTotalScore" :min="0" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <div class="table-actions">
                      <button class="btn btn-warning feedback-btn" @click="openFeedback(scope.row.userName)">
                        <el-icon><Comment /></el-icon> 反馈
                      </button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <!-- 维修工单标签内容 -->
          <div class="tab-content" :class="{ active: activeTab === 'repair' }">
            <h3 class="module-subtitle" style="margin-bottom: 1rem;">场站负责人评分列表</h3>
            <div class="table-responsive" style="margin-bottom: 1.5rem;">
              <el-table :data="userRepairProjectScoreList" class="data-table">
                <el-table-column prop="userName" label="参修人员"></el-table-column>
                <el-table-column prop="maintenanceTypeName" label="检修项目类别"></el-table-column>
                <el-table-column prop="orderCount" label="本月工单数">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.orderCount" :min="0" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="projectScore" label="负责工单得分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.projectScore" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="totalScore" label="工单总分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.totalScore" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column prop="calculatedScore" label="最终得分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.calculatedScore" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <h3 class="module-subtitle" style="margin-bottom: 1rem;">员工最终得分</h3>
            <div class="table-responsive" style="margin-bottom: 1.5rem;">
              <el-table :data="repairUserScoreData" class="data-table">
                <el-table-column prop="userName" label="员工姓名"></el-table-column>
                <el-table-column prop="repairTotalScore" label="实际考核得分">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.repairTotalScore" :min="0" controls-position="right" :readonly="isReadOnly" />
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <div class="table-actions">
                      <button class="btn btn-warning feedback-btn" @click="openFeedback(scope.row.userName)">
                        <el-icon><Comment /></el-icon> 反馈
                      </button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div style="text-align: right;">
              <button class="btn btn-success" @click="submitScores" v-if="hasEditPermission">
                <el-icon><Check /></el-icon> 提交评分
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 反馈弹窗 -->
    <div class="modal" :class="{ active: feedbackDialogVisible }">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">工分反馈</h3>
          <button class="modal-close" @click="closeFeedback">
            <el-icon><Close /></el-icon>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label" for="feedbackStaff">被反馈人</label>
            <el-input class="form-control" id="feedbackStaff" v-model="feedbackForm.staff" readonly></el-input>
          </div>
          <div class="form-group">
            <label class="form-label" for="relatedWorkorderList">关联工单列表</label>
            <el-select class="form-control" id="relatedWorkorderList" v-model="feedbackForm.workorder" :disabled="isReadOnly">
              <el-option label="请选择关联工单" value=""></el-option>
              <el-option value="WJS202410180333" label="WJS202410180333 - 萤芦风电场 A31"></el-option>
              <el-option value="WJS202410180320" label="WJS202410180320 - 官庄风电场 QL32"></el-option>
              <el-option value="WJS202410180315" label="WJS202410180315 - 三墩风电场 WTG07"></el-option>
              <el-option value="WJS202410180308" label="WJS202410180308 - 萤芦风电场 A28"></el-option>
            </el-select>
          </div>
          <div class="form-group">
            <label class="form-label" for="feedbackReason">反馈原因</label>
            <el-input type="textarea" class="form-control" id="feedbackReason" v-model="feedbackForm.reason" :rows="4" placeholder="请输入反馈原因" :readonly="isReadOnly"></el-input>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closeFeedback">取消</button>
          <button class="btn btn-success" @click="submitFeedback" v-if="hasEditPermission">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Comment, Check, Close } from '@element-plus/icons-vue'
import { getUserScoreInfo, submitAllScores } from '@/api/gxt/userScore' // 保留getUserScoreInfo，移除其他未使用的导入
import { useDict } from '@/utils/dict'
import useUserStore from '@/store/modules/user'

export default {
  name: 'UserScorePage',
  components: {
    Comment,
    Check,
    Close
  },
  data() {
    return {
      selectedMonth: null,
      monthOptions: [],
      activeTab: 'maintenance',
      coefficientScoreList: [
        { item: '定检台数', plannedCount: 30, actualCount: 29, groupDeduction: 1 }
      ],
      userRuntimeScoreList: [], // 初始化为空数组，将通过API获取数据
      userFanInspectionScoreList: [], // 初始化为空数组，将通过API获取数据
      // 添加检修员得分列表和维修员最终得分列表的数据变量
      maintenanceUserScoreData: [], // 检修员得分列表数据
      repairUserScoreData: [], // 维修员最终得分列表数据
      // 添加场站负责人评分列表数据变量
      userRepairProjectScoreList: [], // 场站负责人评分列表数据
      feedbackDialogVisible: false,
      feedbackForm: {
        staff: '',
        workorder: '',
        reason: ''
      },
      // 字典数据
      gxt_inspection_type: [],
      gxt_maintenance_type: [] // 添加检修项目类别字典数据
    }
  },
  computed: {
    // 检查用户是否有编辑权限
    hasEditPermission() {
      const permissions = useUserStore().permissions
      const all_permission = "*:*:*"
      const requiredPermission = "gxt:userscorepage:edit"
      
      return permissions.some(permission => {
        return all_permission === permission || permission === requiredPermission
      })
    },
    
    // 计算输入框是否只读
    isReadOnly() {
      return !this.hasEditPermission
    }
  },
  mounted() {
    this.generateMonthOptions()
    // 获取字典数据
    const { gxt_inspection_type, gxt_maintenance_type } = this.useDict("gxt_inspection_type", "gxt_maintenance_type")
    this.gxt_inspection_type = gxt_inspection_type || []
    this.gxt_maintenance_type = gxt_maintenance_type || []
  },
  methods: {
    // 引入useDict函数
    useDict,
    generateMonthOptions() {
      const now = new Date()
      const options = []
      
      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}月`
        
        options.push({
          value:value,
          label:label
        })
      }
      
      this.monthOptions = options
      this.selectedMonth = options[0] // 默认选择本月
      // 初始化数据
      this.loadAllData()
    },
    // 统一加载所有数据的方法
    loadAllData() {
      if (this.selectedMonth) {
        // 检查用户是否有编辑权限来决定rtType值
        const hasEditPermission = this.hasEditPermission
        const rtType = hasEditPermission ? 1 : 0
        
        // 调用新的统一接口获取所有数据
        getUserScoreInfo(rtType, this.selectedMonth.value).then(response => {
          
          // 处理系数与定检台数统计数据
          if (response.coefficientScoreList && response.coefficientScoreList.length > 0) {
            const coefficientData = response.coefficientScoreList[0]
            this.coefficientScoreList = [{
              item: '定检台数',
              plannedCount: coefficientData.plannedCount || 0,
              actualCount: coefficientData.actualCount || 0,
              groupDeduction: coefficientData.groupDeduction || 0
            }]
          } else {
            // 如果没有数据，重置为默认值
            this.coefficientScoreList = [{
              item: '定检台数',
              plannedCount: 0,
              actualCount: 0,
              groupDeduction: 0
            }]
          }
          
          // 处理安全运行工单列表数据
          if (response.userRuntimeScoreList) {
            this.userRuntimeScoreList = response.userRuntimeScoreList.map(item => ({
              userId: item.userId,
              userName: item.userName,           // 维保人
              runtimeScoreId: item.runtimeScoreId,
              runtimeRange: item.runtimeRange,         // 运行天数
              deviceCount: item.deviceCount,         // 工单数量
              score: item.score,    // 负责工单得分
              runtimeScore: item.runtimeScore,   // 工单总分
              calculatedScore: item.calculatedScore // 最终得分
            }))
          } else {
            this.userRuntimeScoreList = []
          }
          
          // 处理维保机组类型评分数据
          if (response.userFanInspectionScoreList) {
            this.userFanInspectionScoreList = response.userFanInspectionScoreList.map(item => ({
              userId: item.userId,
              userName: item.userName,              // 维保人
              fanInspectionId: item.fanInspectionId,
              model: item.model,                // 风机类型
              inspectionTypeId: item.inspectionTypeId,
              inspectionType: this.formatInspectionType(item.inspectionTypeId), // 本月维保类型
              deviceCount: item.deviceCount, // 本月维保数量
              fanInspectionScore: item.fanInspectionScore, // 负责工单得分
              totalScore: item.totalScore || (item.fanInspectionScore * item.deviceCount), // 工单总分
              calculatedScore: item.calculatedScore    // 最终得分
            }))
          } else {
            this.userFanInspectionScoreList = []
          }
          
          // 处理场站负责人评分列表数据
          if (response.userRepairProjectScoreList) {
            this.userRepairProjectScoreList = response.userRepairProjectScoreList.map(item => ({
              userId: item.userId,
              userName: item.userName,              // 参修人员
              maintenanceType: item.maintenanceType,
              maintenanceTypeName: this.formatMaintenanceType(item.maintenanceType), // 检修项目类别
              orderCount: item.orderCount,             // 本月工单数
              projectScore: item.projectScore, // 负责工单得分
              totalScore: item.totalScore || (item.orderCount * item.projectScore), // 工单总分
              calculatedScore: item.calculatedScore    // 最终得分
            }))
          } else {
            this.userRepairProjectScoreList = []
          }
          
          // 处理检修员得分列表数据
          if (response.userScoreList) {
            this.maintenanceUserScoreData = response.userScoreList.map(item => ({
              userId: item.userId,
              userName: item.userName,                 // 组员姓名
              maintenanceTotalScore: item.maintenanceTotalScore    // 实际考核得分
            }))
          } else {
            this.maintenanceUserScoreData = []
          }
          
          // 处理维修员最终得分列表数据
          if (response.userScoreList) {
            this.repairUserScoreData = response.userScoreList.map(item => ({
              userId: item.userId,
              userName: item.userName,           // 检修员
              repairTotalScore: item.repairTotalScore   // 得分
            }))
          } else {
            this.repairUserScoreData = []
          }
        }).catch(error => {
          console.error('获取人员评分数据失败:', error)
          // 出错时重置所有数据
          this.maintenanceData1 = [{
            item: '定检台数',
            plan: 0,
            actual: 0,
            deduction: 0
          }]
          this.userRuntimeScoreList = []
          this.userFanInspectionScoreList = []
          this.maintenanceUserScoreData = []
          this.repairUserScoreData = []
          this.userRepairProjectScoreList = []
        })
      }
    },
    // 格式化检查类型
    formatInspectionType(inspectionTypeId) {
      if (!inspectionTypeId) return ''
      const dict = this.gxt_inspection_type.find(item => item.value === String(inspectionTypeId))
      return dict ? dict.label : ''
    },
    handleMonthChange() {
      console.log('月份选择变化:', this.selectedMonth.label)
      this.loadAllData() // 月份变化时使用统一方法加载所有数据
    },
    openFeedback(staffName) {
      this.feedbackForm.staff = staffName
      this.feedbackDialogVisible = true
    },
    closeFeedback() {
      this.feedbackDialogVisible = false
      this.feedbackForm = {
        staff: '',
        workorder: '',
        reason: ''
      }
    },
    submitFeedback() {
      if (!this.feedbackForm.workorder) {
        alert('请选择关联工单')
        return
      }

      if (!this.feedbackForm.reason) {
        alert('请输入反馈原因')
        return
      }

      // 检查是否有编辑权限，如果没有则不提交
      if (!this.hasEditPermission) {
        alert('您没有权限提交反馈')
        return
      }

      this.closeFeedback()
      alert('反馈提交成功！')
    },
    // 格式化检修项目类别
    formatMaintenanceType(maintenanceTypeId) {
      if (!maintenanceTypeId) return ''
      const dict = this.gxt_maintenance_type.find(item => item.value === String(maintenanceTypeId))
      return dict ? dict.label : ''
    },
    
    submitScores() {
      // 检查是否有编辑权限，如果没有则不提交
      if (!this.hasEditPermission) {
        alert('您没有权限提交评分')
        return
      }
      
      // 构造提交数据对象
      const submissionData = {
        coefficientScoreList: this.coefficientScoreList.map(item => ({
          ...item,
          plannedCount: item.plannedCount || 0,
          actualCount: item.actualCount || 0,
          groupDeduction: item.groupDeduction || 0
        })),
        userRuntimeScoreList: this.userRuntimeScoreList,
        userFanInspectionScoreList: this.userFanInspectionScoreList,
        maintenanceUserScoreData: this.maintenanceUserScoreData,
        repairUserScoreData: this.repairUserScoreData,
        userRepairProjectScoreList: this.userRepairProjectScoreList,
        monthPeriod: this.selectedMonth.value
      }
      
      // 调用统一提交接口
      submitAllScores(submissionData).then(response => {
        if (response.code === 200) {
          alert('人员评分提交成功！')
        } else {
          alert('评分提交失败: ' + response.msg)
        }
      }).catch(error => {
        console.error('评分提交失败:', error)
        alert('评分提交失败，请查看控制台错误信息')
      })
    }
  }
}
</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;
}

.content-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: auto; /* 关键：允许宽度自适应 */
}

/* 内容区域样式 */
.content-wrapper {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-y: auto;
}

.module-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

.module-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.module-subtitle {
  font-size: 1.1rem;
  font-weight: 500;
  color: #2d3748;
}

/* 标签页容器样式 */
.tab-container {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
}

.tab-button {
  padding: 0.9rem 1.5rem;
  background: none;
  border: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: #718096;
  cursor: pointer;
  transition: color 0.2s ease, border-bottom 0.2s ease;
  border-bottom: 2px solid transparent;
}

.tab-button.active {
  color: #4299e1;
  border-bottom-color: #4299e1;
}

.tab-content {
  display: none;
  padding: 1.5rem;
}

.tab-content.active {
  display: block;
}

/* 表格样式 */
.data-table {
  width: 100%;
  font-size: 0.9rem;
}

.table-responsive {
  margin-bottom: 1.5rem;
}

/* 按钮样式 */
.btn {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  border: none;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.btn-primary {
  background-color: #4299e1;
  color: #fff;
}

.btn-primary:hover {
  background-color: #3182ce;
}

.btn-success {
  background-color: #48bb78;
  color: #fff;
}

.btn-success:hover {
  background-color: #38a169;
}

.btn-warning {
  background-color: #f6ad55;
  color: #fff;
}

.btn-warning:hover {
  background-color: #ed8936;
}

.btn-secondary {
  background-color: #718096;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #4a5568;
}

/* 表格操作按钮容器 */
.table-actions {
  display: flex;
  gap: 0.5rem;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #718096;
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: #e53e3e;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
}

/* 表单样式 */
.form-group {
  margin-bottom: 1.2rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #4a5568;
}

.form-control {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #2d3748;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66,153,225,0.1);
}

/* Element UI 组件样式调整 */
:deep(.el-table) {
  font-size: 0.9rem;
}

:deep(.el-table th) {
  background-color: #f7fafc;
  color: #4a5568;
  font-weight: 600;
  text-align: left !important;
}

:deep(.el-table th, .el-table td) {
  padding: 0.9rem 1.2rem;
  text-align: left;
}

:deep(.el-table td) {
  text-align: left;
}

/* 为维保人列添加额外的左侧内边距 */
:deep(.el-table td:nth-child(1)) {
  padding-left: 2rem !important;
}

:deep(.el-table th:nth-child(1)) {
  padding-left: 2rem !important;
}

/* 为运行天数列添加额外的左侧内边距 */
:deep(.el-table td:nth-child(2)) {
  padding-left: 1.5rem !important;
}

:deep(.el-table th:nth-child(2)) {
  padding-left: 1.5rem !important;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__inner) {
  padding-left: 0;
  padding-right: 30px;
  text-align: left;
}

:deep(.el-input__inner) {
  padding: 0.6rem 0.8rem;
}

/* Element UI 图标样式调整 */
.el-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
</style>