<template>
  <div class="assignee-selector">
    <h3>任务分配</h3>
    <p>请选择任务负责人、参与人和相关部门。</p>
    
    <div class="form-group">
      <label for="department">部门 <span class="required">*</span></label>
      <select 
        id="department" 
        v-model="selectedDepartment"
        @change="filterUsersByDepartment"
      >
        <option value="">请选择部门</option>
        <option v-for="dept in departments" :key="dept.id" :value="dept.id">
          {{ dept.name }}
        </option>
      </select>
    </div>

    <div class="form-group">
      <label for="leader">任务负责人 <span class="required">*</span></label>
      <select 
        id="leader" 
        v-model="assignees.leader"
        :disabled="!selectedDepartment"
      >
        <option value="">请选择负责人</option>
        <option 
          v-for="user in filteredUsers" 
          :key="user.id" 
          :value="user.id"
        >
          {{ user.name }}
        </option>
      </select>
    </div>
    

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 模拟用户数据
const users = ref([
  { id: 1, name: '张三', departmentId: 1 },
  { id: 2, name: '李四', departmentId: 2 },
  { id: 3, name: '王五', departmentId: 3 },
  { id: 4, name: '赵六', departmentId: 4 }
]);

const selectedDepartment = ref('');
const filteredUsers = ref<typeof users.value>([]);

const filterUsersByDepartment = () => {
  if (!selectedDepartment.value) {
    filteredUsers.value = [];
    assignees.value.leader = '';
    return;
  }
  
  filteredUsers.value = users.value.filter(
    user => user.departmentId === Number(selectedDepartment.value)
  );
  
  // 如果当前选择的负责人不在筛选后的列表中，则清空选择
  if (assignees.value.leader && !filteredUsers.value.some(u => u.id === assignees.value.leader)) {
    assignees.value.leader = '';
  }
};

// 模拟部门数据
const departments = ref([
  { id: 1, name: '产品部' },
  { id: 2, name: '开发部' },
  { id: 3, name: '测试部' },
  { id: 4, name: '设计部' }
]);

// 分配数据
const assignees = ref({
  leader: ''
});

// 暴露分配数据给父组件
defineExpose({
  assignees
});
</script>

<style scoped>
.assignee-selector {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  margin-top: 16px;
}

.form-group {
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.required {
  color: #ef4444;
}
</style>