<template>
  <div class="batch-employee-selector">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="员工库" prop="libraryId">
        <el-select 
          v-model="queryParams.libraryId" 
          placeholder="请选择员工库" 
          clearable
          @change="handleLibraryChange"
          style="width: 200px"
        >
          <el-option label="全部员工库" value="" />
          <el-option 
            v-for="library in libraryList" 
            :key="library.libraryId" 
            :label="library.libraryName" 
            :value="library.libraryId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="员工姓名" prop="employeeName">
        <el-input
          v-model="queryParams.employeeName"
          placeholder="请输入员工姓名"
          clearable
          @keyup.enter="handleQuery"
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item label="员工状态" prop="employeeStatus">
        <el-select v-model="queryParams.employeeStatus" placeholder="请选择员工状态" clearable style="width: 120px">
          <el-option label="在职" value="ACTIVE" />
          <el-option label="离职" value="INACTIVE" />
          <el-option label="临时工" value="TEMPORARY" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleSelectAll">全选</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" @click="handleSelectActive">选择在职员工</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" @click="handleSelectByPosition">按岗位选择</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" @click="handleSelectByLibrary">按员工库选择</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button @click="handleClearSelection">清空选择</el-button>
      </el-col>
    </el-row>

    <el-table
      ref="employeeTableRef"
      v-loading="loading"
      :data="employeeList"
      @selection-change="handleSelectionChange"
      height="400"
    >
    <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="员工姓名" align="center" prop="employeeName" width="100" />
      <el-table-column label="身份证号" align="center" prop="idCardNumber" width="180" show-overflow-tooltip />
      <el-table-column label="岗位" align="center" prop="position" width="120" />
      <el-table-column label="部门" align="center" prop="department" width="120" show-overflow-tooltip />
      <el-table-column label="薪资单位" align="center" prop="salaryUnit" width="100" show-overflow-tooltip>
        <template #default="scope">
          <el-tag :type="getSalaryUnitType(scope.row)">
            {{ getSalaryUnitText(scope.row) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="原始薪资" align="center" width="100">
        <template #default="scope">
          <span>¥{{ getDisplaySalary(scope.row) }}</span>
          <div class="salary-unit-hint" :style="{ color: getSalaryUnitColor(scope.row) }">
            {{ getSalaryUnitText(scope.row) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日薪" align="center" prop="dailySalary" width="80">
        <template #default="scope">
          <span>¥{{ getConvertedDailySalary(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="员工状态" align="center" prop="employeeStatus" width="100">
        <template #default="scope">
          <el-tag :type="getEmployeeStatusType(scope.row.employeeStatus)">
            {{ getEmployeeStatusText(scope.row.employeeStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="入职日期" align="center" prop="hireDate" width="120">
        <template #default="scope">
          <span>{{ parseTime(scope.row.hireDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" prop="contactPhone" width="120" />
      <el-table-column label="员工库ID" align="center" prop="libraryId" width="100" />
      <el-table-column label="是否临时工" align="center" prop="isTemporary" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.isTemporary ? 'warning' : 'success'">
            {{ scope.row.isTemporary ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新人" align="center" prop="updateBy" width="100" />
      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <div class="selection-summary">
      <el-alert
        :title="`已选择 ${selectedEmployees.length} 名员工`"
        type="info"
        :closable="false"
      />
    </div>

    <el-form ref="batchFormRef" :model="batchForm" :rules="batchRules" label-width="100px" class="batch-form">
      <el-form-item label="工作天数" prop="workDays">
        <el-input-number 
          v-model="batchForm.workDays" 
          :min="1" 
          placeholder="请输入工作天数" 
          style="width: 200px"
          @change="updateSalaryPreview"
        />
      </el-form-item>
      
      <el-form-item label="统一岗位" prop="unifiedPosition">
        <el-input 
          v-model="batchForm.unifiedPosition" 
          placeholder="可选：为所有员工设置统一岗位" 
          style="width: 300px"
        />
      </el-form-item>
      
      <!-- 薪资预览 -->
      <el-form-item label="薪资预览" v-if="selectedEmployees.length > 0">
        <div class="salary-preview">
          <el-alert 
            :title="`预计总薪资：¥${calculateTotalSalaryPreview()}`" 
            type="info" 
            :closable="false"
            show-icon
          >
            <template #default>
              <div class="salary-breakdown">
                <p>已选择 {{ selectedEmployees.length }} 名员工，工作 {{ batchForm.workDays }} 天</p>
                <p>平均每人薪资：¥{{ calculateAverageSalaryPreview() }}</p>
              </div>
            </template>
          </el-alert>
        </div>
      </el-form-item>
      
      <el-form-item label="薪资调整" prop="salaryAdjustment" class="salary-adjustment-item">
        <div class="salary-adjustment-container">
          <div class="adjustment-row">
            <div class="adjustment-item">
              <label class="adjustment-label">调整方式：</label>
              <el-select 
                v-model="batchForm.adjustmentType" 
                placeholder="调整方式"
                style="width: 120px"
                @change="updateSalaryPreview"
              >
                <el-option label="不调整" value="none" />
                <el-option label="按倍数" value="multiply" />
                <el-option label="按金额" value="add" />
                <el-option label="固定值" value="set" />
              </el-select>
            </div>
            
            <div class="adjustment-item">
              <label class="adjustment-label">调整值：</label>
              <el-input-number 
                v-model="batchForm.adjustmentValue" 
                :precision="2" 
                placeholder="调整值"
                :disabled="batchForm.adjustmentType === 'none'"
                style="width: 120px"
                @change="updateSalaryPreview"
              />
            </div>
            
            <div class="adjustment-item">
              <label class="adjustment-label">薪资单位：</label>
              <el-select 
                v-model="batchForm.salaryUnit" 
                placeholder="薪资单位"
                style="width: 120px"
                @change="updateSalaryPreview"
              >
                <el-option label="保持不变" value="" />
                <el-option label="小时制" value="hourlySalary" />
                <el-option label="日薪制" value="dailySalary" />
                <el-option label="月薪制" value="monthlySalary" />
              </el-select>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>

    <div class="dialog-footer">
      <el-button type="primary" @click="handleConfirmSelection" :disabled="selectedEmployees.length === 0">
        确认选择 ({{ selectedEmployees.length }})
      </el-button>
      <el-button type="default" @click="() => { handleCancel(); handleForceClose(); }">取 消</el-button>
    </div>

    <!-- 按岗位选择对话框 -->
    <el-dialog title="按岗位选择员工" v-model="positionSelectDialogVisible" width="400px">
      <el-form ref="positionFormRef" :model="positionForm" label-width="80px">
        <el-form-item label="选择岗位">
          <el-checkbox-group v-model="positionForm.selectedPositions">
            <el-checkbox 
              v-for="position in availablePositions" 
              :key="position" 
              :label="position"
            >
              {{ position }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmPositionSelection">确 定</el-button>
          <el-button @click="positionSelectDialogVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 按员工库选择对话框 -->
    <el-dialog title="按员工库选择员工" v-model="librarySelectDialogVisible" width="500px">
      <el-form ref="libraryFormRef" :model="libraryForm" label-width="80px">
        <el-form-item label="选择员工库">
          <el-checkbox-group v-model="libraryForm.selectedLibraries">
            <el-checkbox 
              v-for="library in libraryList" 
              :key="library.libraryId" 
              :label="library.libraryId"
            >
              {{ library.libraryName }} ({{ library.totalEmployees || 0 }}人)
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmLibrarySelection">确 定</el-button>
          <el-button @click="librarySelectDialogVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance, nextTick } from 'vue';
import { listEmployees as listEmployeeInfo } from "@/api/credit/employee";
import { listEmployeeLibrary } from "@/api/digitalCredit/employeeLibrary";
import { selectAttendanceEmployees } from "@/api/digitalCredit/contractEmployee";

const props = defineProps({
  servicePeriodId: {
    type: [String, Number],
    required: true
  }
});

const emit = defineEmits(['select-complete', 'cancel']);

const { proxy } = getCurrentInstance();
const { salary_unit, employee_status } = proxy.useDict('salary_unit', 'employee_status');

const loading = ref(false);
const total = ref(0);
const employeeList = ref([]);
const selectedEmployees = ref([]);
const availablePositions = ref([]);
const libraryList = ref([]);

// 对话框状态
const positionSelectDialogVisible = ref(false);
const librarySelectDialogVisible = ref(false);

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  libraryId: null,
  employeeName: null,
  employeeNumber: null,
  position: null,
  department: null,
  employeeStatus: null,
  isTemporary: null
});

// 批量操作表单
const batchForm = ref({
  workDays: 1,
  unifiedPosition: '',
  adjustmentType: 'none',
  adjustmentValue: 0,
  salaryUnit: ''
});

// 岗位选择表单
const positionForm = ref({
  selectedPositions: []
});

// 员工库选择表单
const libraryForm = ref({
  selectedLibraries: []
});

// 表单验证规则
const batchRules = {
  workDays: [{ required: true, message: "工作天数不能为空", trigger: "blur" }]
};

/** 查询员工库列表 */
function getLibraryList() {
  listEmployeeLibrary({ libraryStatus: 'ACTIVE' }).then(response => {
    libraryList.value = response.rows || [];
  }).catch(() => {
    libraryList.value = [];
  });
}

/** 员工库变化处理 */
function handleLibraryChange() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 查询员工列表 */
function getList() {
  loading.value = true;
  listEmployeeInfo(queryParams.value).then(response => {
    employeeList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    
    // 提取可用岗位
    const positions = [...new Set(response.rows.map(emp => emp.position).filter(pos => pos))];
    availablePositions.value = positions;
  }).catch(() => {
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 员工选择变化 */
function handleSelectionChange(selection) {
  selectedEmployees.value = selection;
}

/** 全选 */
function handleSelectAll() {
  proxy.$refs.employeeTableRef.toggleAllSelection();
}

/** 选择在职员工 */
function handleSelectActive() {
  proxy.$refs.employeeTableRef.clearSelection();
  employeeList.value.forEach(employee => {
    if (employee.employeeStatus === 'ACTIVE') {
      proxy.$refs.employeeTableRef.toggleRowSelection(employee, true);
    }
  });
}

/** 获取员工状态显示文本 */
function getEmployeeStatusText(status) {
  if (status === 'ACTIVE') {
    return '在职';
  } else if (status === 'INACTIVE') {
    return '离职';
  } else if (status === 'TEMPORARY') {
    return '临时工';
  } else {
    return status;
  }
}

/** 获取员工状态标签类型 */
function getEmployeeStatusType(status) {
  if (status === 'ACTIVE') {
    return 'success';
  } else if (status === 'INACTIVE') {
    return 'danger';
  } else if (status === 'TEMPORARY') {
    return 'warning';
  } else {
    return 'info';
  }
}

/** 获取薪资单位显示文本 */
function getSalaryUnitText(salaryUnit) {
  if ( salaryUnit.hourlySalary) {
    return '时薪';
  } else if ( salaryUnit.dailySalary) {
    return '日薪';
  } else if ( salaryUnit.monthlySalary) {
    return '月薪';
  } else {
    return '未知';
  }
}

/** 获取薪资单位标签类型 */
function getSalaryUnitType(salaryUnit) {
  if ( salaryUnit.hourlySalary) {
    return 'warning';
  } else if ( salaryUnit.dailySalary) {
    return 'success';
  } else if ( salaryUnit.monthlySalary) {
    return 'primary';
  } else {
    return 'info';
  }
}

/** 获取薪资单位颜色 */
function getSalaryUnitColor(salaryUnit) {
  if (salaryUnit.hourlySalary) {
    return '#E6A23C'; // 橙色 - 时薪
  } else if (salaryUnit.dailySalary) {
    return '#67C23A'; // 绿色 - 日薪
  } else if (salaryUnit.monthlySalary) {
    return '#409EFF'; // 蓝色 - 月薪
  } else {
    return '#909399'; // 灰色 - 未知
  }
}

/** 获取显示薪资（根据薪资单位显示对应的薪资） */
function getDisplaySalary(employee) {
  const salary = getSalaryByUnit(employee);
  return salary.toFixed(2);
}

/** 按岗位选择 */
function handleSelectByPosition() {
  positionForm.value.selectedPositions = [];
  positionSelectDialogVisible.value = true;
}

/** 确认岗位选择 */
function confirmPositionSelection() {
  proxy.$refs.employeeTableRef.clearSelection();
  employeeList.value.forEach(employee => {
    if (positionForm.value.selectedPositions.includes(employee.position)) {
      proxy.$refs.employeeTableRef.toggleRowSelection(employee, true);
    }
  });
  positionSelectDialogVisible.value = false;
}

/** 按员工库选择 */
function handleSelectByLibrary() {
  libraryForm.value.selectedLibraries = [];
  librarySelectDialogVisible.value = true;
}

/** 确认员工库选择 */
function confirmLibrarySelection() {
  if (libraryForm.value.selectedLibraries.length === 0) {
    proxy.$modal.msgWarning("请至少选择一个员工库");
    return;
  }
  
  proxy.$refs.employeeTableRef.clearSelection();
  
  // 根据选中的员工库ID筛选员工
  employeeList.value.forEach(employee => {
    if (libraryForm.value.selectedLibraries.includes(employee.libraryId)) {
      proxy.$refs.employeeTableRef.toggleRowSelection(employee, true);
    }
  });
  
  librarySelectDialogVisible.value = false;
}

/** 清空选择 */
function handleClearSelection() {
  proxy.$refs.employeeTableRef.clearSelection();
}

/** 确认选择 */
function handleConfirmSelection() {
  if (selectedEmployees.value.length === 0) {
    proxy.$modal.msgWarning("请先选择员工");
    return;
  }
  
  proxy.$refs["batchFormRef"].validate(valid => {
    if (valid) {
      const employeeIds = selectedEmployees.value.map(emp => emp.employeeId);
      
      console.log('开始批量选择员工，servicePeriodId:', props.servicePeriodId, 'employeeIds:', employeeIds);
      
      // 应用薪资调整
      const adjustedEmployees = selectedEmployees.value.map(employee => {
        const adjustedEmployee = { ...employee };
        
        // 应用统一岗位
        if (batchForm.value.unifiedPosition) {
          adjustedEmployee.position = batchForm.value.unifiedPosition;
        }
        
        // 应用薪资调整
        if (batchForm.value.adjustmentType !== 'none') {
          let currentSalary = getSalaryByUnit(employee);
          switch (batchForm.value.adjustmentType) {
            case 'multiply':
              currentSalary *= batchForm.value.adjustmentValue;
              break;
            case 'add':
              currentSalary += batchForm.value.adjustmentValue;
              break;
            case 'set':
              currentSalary = batchForm.value.adjustmentValue;
              break;
          }
          setSalaryByUnit(adjustedEmployee, currentSalary, batchForm.value.salaryUnit || employee.salaryUnit);
        }
        
        return adjustedEmployee;
      });
      
      // 调用API进行员工分配
      selectAttendanceEmployees(props.servicePeriodId, {
        employeeIds: employeeIds,
        workDays: batchForm.value.workDays
      }).then(response => {
        console.log('员工分配API调用成功，响应:', response);
        // 不在这里显示成功提示，由父组件根据场景显示合适的提示
        emit('select-complete', {
          employeeCount: selectedEmployees.value.length,
          workDays: batchForm.value.workDays
        });
      }).catch(error => {
        console.error('员工分配API调用失败:', error);
        proxy.$modal.msgError("员工分配失败: " + (error.message || '未知错误'));
        // 不触发 select-complete 事件，因为操作失败了
      });
    }
  });
}

/** 取消 */
function handleCancel() {
  emit('cancel');
}

/** 强制关闭对话框 */
function handleForceClose() {
  // 直接发出取消事件，确保父组件能够接收到
  emit('cancel');
  // 如果有父组件的引用，也可以直接调用父组件的方法
  if (proxy && proxy.$parent && proxy.$parent.batchSelectDialogVisible !== undefined) {
    proxy.$parent.batchSelectDialogVisible = false;
  }
}

/** 获取转换后的日薪 */
function getConvertedDailySalary(employee) {
  const salary = getSalaryByUnit(employee);
  const dailySalary = convertToDaily(salary, employee);
  return dailySalary.toFixed(2);
}

/** 根据薪资单位获取薪资 */
function getSalaryByUnit(employee) {
  // 根据薪资单位返回对应的薪资值
  if (employee.hourlySalary) {
    return employee.hourlySalary || 0;
  } else if (employee.dailySalary) {
    return employee.dailySalary || 0;
  } else if (employee.monthlySalary) {
    return employee.monthlySalary || 0;
  } else {
    // 如果薪资单位未知，优先返回日薪
    return employee.dailySalary || 0;
  }
}

/** 将薪资转换为日薪标准 */
function convertToDaily(salary, salaryUnit) {
  if (!salary || salary <= 0) {
    return 0;
  }

  if ( salaryUnit.hourlySalary) {
    // 时薪转日薪：假设每天工作8小时
    return salary * 8;
  } else if ( salaryUnit.dailySalary) {
    // 已经是日薪，直接返回
    return salary;
  } else if ( salaryUnit.monthlySalary) {
    // 月薪转日薪：假设每月工作22天
    return salary / 22;
  } else {
    // 如果薪资单位未知，假设传入的salary已经是合适的基准值，按日薪处理
    return salary;
  }
}

/** 根据薪资单位设置薪资 */
function setSalaryByUnit(employee, salary, unit) {
  employee.salaryUnit = unit;
  switch (unit) {
    case 'hourlySalary':
      employee.hourlySalary = salary;
      break;
    case 'dailySalary':
      employee.dailySalary = salary;
      break;
    case 'monthlySalary':
      employee.monthlySalary = salary;
      break;
  }
}

/** 计算总薪资预览 */
function calculateTotalSalaryPreview() {
  if (selectedEmployees.value.length === 0 || !batchForm.value.workDays) {
    return 0;
  }
  
  let total = 0;
  selectedEmployees.value.forEach(employee => {
    // 获取员工的基础薪资
    let baseSalary = getSalaryByUnit(employee);
    const originalSalaryUnit = employee;
    
    // 应用薪资调整
    if (batchForm.value.adjustmentType !== 'none' && batchForm.value.adjustmentValue) {
      switch (batchForm.value.adjustmentType) {
        case 'multiply':
          baseSalary *= batchForm.value.adjustmentValue;
          break;
        case 'add':
          baseSalary += batchForm.value.adjustmentValue;
          break;
        case 'set':
          baseSalary = batchForm.value.adjustmentValue;
          break;
      }
    }
    
    // 确定最终使用的薪资单位
    const finalSalaryUnit = batchForm.value.salaryUnit || originalSalaryUnit;
    
    // 根据薪资单位计算总成本
    const employeeCost = calculateCostBySalaryUnit(baseSalary, batchForm.value.workDays, finalSalaryUnit);
    total += employeeCost;
  });
  
  return total.toFixed(2);
}

/** 计算平均薪资预览 */
function calculateAverageSalaryPreview() {
  if (selectedEmployees.value.length === 0) {
    return 0;
  }
  
  const total = parseFloat(calculateTotalSalaryPreview());
  return (total / selectedEmployees.value.length).toFixed(2);
}

/** 根据薪资单位计算成本 */
function calculateCostBySalaryUnit(salary, workDays, salaryUnit) {
  if (!salary || !workDays || workDays <= 0) {
    return 0;
  }

  // 先转换为日薪，然后乘以工作天数
  const dailySalary = convertToDaily(salary, salaryUnit);
  return dailySalary * workDays;
}

/** 更新薪资预览 */
function updateSalaryPreview() {
  // 触发响应式更新，重新计算预览
  nextTick(() => {
    // 这里可以添加额外的预览更新逻辑
  });
}

onMounted(() => {
  getLibraryList();
  getList();
});
</script>

<style scoped>
.batch-employee-selector {
  padding: 20px;
}

.mb8 {
  margin-bottom: 8px;
}

.mt-4 {
  margin-top: 16px;
}

.selection-summary {
  margin: 20px 0;
}

.dialog-footer {
  text-align: center;
  margin-top: 20px;
}

/* 薪资预览样式 */
.salary-preview {
  margin: 15px 0;
}

.salary-breakdown {
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
}

.salary-breakdown p {
  margin: 5px 0;
}

/* 批量操作表单样式 */
.batch-form {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

/* 薪资调整容器样式 */
.salary-adjustment-item {
  margin-bottom: 0;
}

.salary-adjustment-container {
  width: 100%;
  min-width: 500px;
}

.adjustment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.adjustment-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 140px;
}

.adjustment-label {
  font-size: 12px;
  color: #606266;
  margin-bottom: 5px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .adjustment-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .adjustment-item {
    width: 100%;
  }
  
  .adjustment-item .el-select,
  .adjustment-item .el-input-number {
    width: 100% !important;
  }
}

/* 表格样式优化 */
:deep(.el-table) {
  font-size: 12px;
}

:deep(.el-table .cell) {
  padding: 0 5px;
  word-break: break-all;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  font-weight: bold;
}

/* 搜索表单样式 */
:deep(.el-form--inline .el-form-item) {
  margin-right: 10px;
  margin-bottom: 10px;
}

/* 表单项样式优化 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

:deep(.el-form-item__content) {
  flex-wrap: wrap;
}

/* 确保选择框和输入框有足够的宽度 */
:deep(.el-select) {
  min-width: 120px;
}

:deep(.el-input-number) {
  min-width: 120px;
}

/* 优化按钮样式 */
.dialog-footer {
  text-align: center;
  margin-top: 20px;
  padding: 20px 0;
  border-top: 1px solid #e4e7ed;
  position: relative;
  z-index: 10;
}

.dialog-footer .el-button {
  min-width: 100px;
  margin: 0 10px;
  padding: 12px 20px;
  font-size: 14px;
  position: relative;
  z-index: 11;
  cursor: pointer;
}

.dialog-footer .el-button:hover {
  opacity: 0.8;
}

/* 薪资单位提示样式 */
.salary-unit-hint {
  font-size: 10px;
  color: #909399;
  margin-top: 2px;
}
</style>