<template>
  <div class="employee-selector">
    <!-- 触发器 -->
    <div 
      class="trigger" 
      @click="toggleDialog"
    >
      <slot name="trigger">
        <div class="default-trigger">
          {{ displayText }}
        </div>
      </slot>
    </div>
    
    <!-- 选择对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
    >
      <el-input
        v-model="searchQuery"
        placeholder="请输入员工姓名或部门"
        clearable
        @keyup.enter.native="handleSearch"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSearch"
        />
      </el-input>
      
      <!-- 已选员工列表（多选模式） -->
      <div v-if="multiple && selectedEmployees.length > 0" class="selected-list">
        <div class="selected-list-title">已选员工 ({{ selectedEmployees.length }})</div>
        <el-tag
          v-for="employee in selectedEmployees"
          :key="employee[keyField]"
          closable
          @close="removeSelectedEmployee(employee)"
          class="selected-tag"
        >
          {{ employee.name }} ({{ employee.dept }})
        </el-tag>
      </div>
      
      <el-table
        v-loading="loading"
        :data="employeeList"
        style="width: 100%"
        height="400px"
        @row-click="handleRowClick"
        :row-class-name="rowClassName"
      >
        <el-table-column label="部门" align="center" prop="dept" />
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="岗位工种" align="center" prop="jobType" />
        <el-table-column label="联系电话" align="center" prop="phone" />
      </el-table>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取消</el-button>
        <el-button 
          v-if="multiple" 
          type="primary" 
          @click="confirmSelection"
          :disabled="selectedEmployees.length === 0"
        >
          确认选择 ({{ selectedEmployees.length }})
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listEmployeeInfo } from '@/api/wms/employeeInfo'

export default {
  name: 'EmployeeSelector',
  props: {
    value: {
      type: [String, Array],
      default: ''
    },
    keyField: {
      type: String,
      default: 'infoId'
    },
    placeholder: {
      type: String,
      default: '请选择员工'
    },
    title: {
      type: String,
      default: '选择员工'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabledNames: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedEmployee: {},
      selectedEmployees: [],
      rawEmployeeList: [],
      open: false,
      loading: false,
      searchQuery: ''
    }
  },
  computed: {
    // 显示在触发器上的文本
    displayText() {
      if (this.multiple) {
        if (this.selectedEmployees.length > 0) {
          return `${this.selectedEmployees.length} 人已选择`
        } else {
          return this.placeholder
        }
      } else {
        return this.selectedEmployee.name || this.placeholder
      }
    },
    // 禁用的员工ID列表
    disabledIdList() {
      if (!this.disabledNames) {
        return []
      }
      return this.disabledNames.split(',').map(id => id.trim()).filter(id => id)
    },
    // 处理后的员工列表，包含禁用状态
    employeeList() {
      return this.rawEmployeeList.map(employee => ({
        ...employee,
        disabled: this.disabledIdList.includes(employee.infoId.toString())
      }))
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (this.multiple) {
          if (newVal) {
            // 多选模式：根据逗号分隔的字符串查找已选员工
            this.findSelectedEmployees(newVal.split(','))
          } else {
            this.selectedEmployees = []
          }
        } else {
          if (newVal) {
            this.findSelectedEmployee(newVal)
          } else {
            this.selectedEmployee = {}
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    // 切换对话框显示
    toggleDialog() {
      if (!this.open) {
        this.getEmployeeList()
      }
      this.open = !this.open
    },
    
    // 获取员工列表
    getEmployeeList() {
      this.loading = true
      const params = {
        pageNum: 1,
        pageSize: 9999,
        name: this.searchQuery || undefined,
        dept: this.searchQuery || undefined
      }
      return new Promise((resolve) => {
        listEmployeeInfo(params).then(response => {
          this.rawEmployeeList = response.rows
          this.loading = false
          resolve()
        }).catch(() => {
          this.loading = false
          resolve()
        })
      })
    },
    
    // 搜索员工
    handleSearch() {
      this.getEmployeeList()
    },
    
    // 选择员工
    handleRowClick(row) {
      // 检查员工是否被禁用
      if (this.isDisabled(row)) {
        return
      }
      
      if (this.multiple) {
        // 多选模式：添加或移除员工
        const index = this.selectedEmployees.findIndex(item => item[this.keyField] === row[this.keyField])
        if (index > -1) {
          this.selectedEmployees.splice(index, 1)
        } else {
          this.selectedEmployees.push(row)
        }
      } else {
        // 单选模式：选择员工并关闭弹窗
        this.selectedEmployee = row
        this.$emit('input', row[this.keyField])
        this.$emit('change', row)
        this.open = false
      }
    },
    
    // 检查员工是否被禁用
    isDisabled(row) {
      const isDisabled = this.disabledIdList.includes(row[this.keyField].toString())
      if (isDisabled) {
        this.$message.warning('该员工已禁用，不能选择')
      }
      return isDisabled
    },
    
    // 确认选择（多选模式）
    confirmSelection() {
      const selectedIds = this.selectedEmployees.map(item => item[this.keyField])
      this.$emit('input', selectedIds.join(','))
      this.$emit('change', this.selectedEmployees)
      this.open = false
    },
    
    // 移除已选员工
    removeSelectedEmployee(employee) {
      const index = this.selectedEmployees.findIndex(item => item[this.keyField] === employee[this.keyField])
      if (index > -1) {
        this.selectedEmployees.splice(index, 1)
      }
    },
    
    // 表格行样式
    rowClassName({ row }) {
      // if (this.isDisabled(row)) {
      //   return 'disabled-row'
      // }
      if (this.isSelected(row)) {
        return 'selected-row'
      }
      return ''
    },
    
    // 检查员工是否已选
    isSelected(row) {
      if (this.multiple) {
        return this.selectedEmployees.some(item => item[this.keyField] === row[this.keyField])
      } else {
        return this.selectedEmployee[this.keyField] === row[this.keyField]
      }
    },
    
    // 根据value查找选中的员工（单选）
    findSelectedEmployee(value) {
      if (this.employeeList.length > 0) {
        const employee = this.employeeList.find(item => item[this.keyField] === value)
        if (employee) {
          this.selectedEmployee = employee
        }
      } else {
        // 如果员工列表为空，先获取列表再查找
        this.getEmployeeList().then(() => {
          const employee = this.employeeList.find(item => item[this.keyField] === value)
          if (employee) {
            this.selectedEmployee = employee
          }
        })
      }
    },
    
    // 根据value查找选中的员工（多选）
    findSelectedEmployees(values) {
      if (this.employeeList.length > 0) {
        this.selectedEmployees = this.employeeList.filter(item => values.includes(item[this.keyField]))
      } else {
        // 如果员工列表为空，先获取列表再查找
        this.getEmployeeList().then(() => {
          this.selectedEmployees = this.employeeList.filter(item => values.includes(item[this.keyField]))
        })
      }
    }
  }
}
</script>

<style scoped>
.employee-selector {
  position: relative;
}

.trigger {
  cursor: pointer;
  user-select: none;
}

.default-trigger {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-width: 120px;
  display: inline-block;
}

.default-trigger:hover {
  border-color: #409eff;
}

.selected-list {
  margin: 10px 0;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.selected-list-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #606266;
}

.selected-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.el-table .selected-row {
  background-color: #ecf5ff !important;
}

.el-table .selected-row:hover {
  background-color: #ecf5ff !important;
}

.el-table .disabled-row {
  background-color: #f5f7fa !important;
  color: #c0c4cc !important;
}

.el-table .disabled-row:hover {
  background-color: #f5f7fa !important;
  color: #c0c4cc !important;
}
</style>