<template>
  <el-select ref="selectRef" v-bind="$attrs">
    <el-option v-for="option in dataList" :key="option.agentId" :label="option.name" :value="option.agentId" />
  </el-select>
</template>
<script setup>
import { getAgentList } from '@/api/dz/cards';
import { nextTick, onMounted } from 'vue';
const props = defineProps({
  deptId: {
    type: Number,
    default: null,
  },
});
const selectRef = ref(null);
const dataList = ref([])
const loadData = async () => {
  const { data } = await getAgentList({
    deptId: props.deptId,
  })
  dataList.value = data;
}

watch(() => props.deptId, (newVal) => {
  dataList.value = [];
  const event = new Event('clear');
  selectRef.value.deleteSelected(event);
  nextTick(() => {
    selectRef.value.blur();
  });
  loadData();
});

onMounted(() => {
  loadData();
});
</script>
<style lang="scss" scoped></style>