<template>
  <el-select v-model="staffSelected" clearable filterable>
    <el-option v-for="staff in staffList" :key="staff.id" :label="staff.name" :value="staff.id"/>
  </el-select>
</template>

<script>

import {getStaffList} from "@/api/company/staff";

export default {
  name: "StaffChoose",
  data() {
    return {
      staffList: [],
      staffSelected: undefined,
    }
  },
  watch:{
    staffSelected(val) {
      const staff = this.staffList.find(item => item.id === val);
      this.$emit("selected", staff);
    }
  },
  mounted() {
    this.listStaff()
  },
  methods: {
    async listStaff() {
      try {
        const res = await getStaffList()
        this.staffList = res.data
      } catch {
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
