<script lang="ts" setup name="PositionSelector">
import { getPositionByList } from '@/api/system/positionApi'
const emit = defineEmits(['update:modelValue'])
interface Position {
  positionId: number
  positionName: string
}
const state = reactive({
  loading: false,
  positionId: 0,
  dataList: [] as Position[],
})

const getData = async () => {
  state.loading = true
  const { data } = await getPositionByList({})
  state.loading = false
  state.dataList = data
}
const onChange = () => {
  emit('update:modelValue', state.positionId)
}
onMounted(() => {
  getData ()
})
</script>

<template>
  <el-select v-model="state.positionId" v-loading="state.loading" style="width: 100%" filterable placeholder="请选择部门类别" value-key="positionId" @change="onChange">
    <el-option key="-1" disabled value="0" label="请选择部门类别" />
    <el-option
      v-for="item in state.dataList"
      :key="item.positionId"
      :label="item.positionName"
      :value="item.positionId"
      :disabled="item.positionId === 0"
    />
  </el-select>
</template>
