<script lang="ts" setup name="BizObjectAttrSelector">
import { getObjectAttrListById } from '@/api/biz/bizObjectAttrApi'
const props = withDefaults(defineProps<{
  modelValue: number
  bizId: number
  objectId: number
}>(), {
  modelValue: 0,
  bizId: 0,
  objectId: 0,
})
const emit = defineEmits(['update:modelValue'])
interface BizObjectAttr {
  bizId: number
  objectId: number
  objectTitle: string
  attrId: number
  attrTitle: string
}
const objectId = computed({
  get: () => {
    return props.modelValue
  },
  set: (val) => {
    emit('update:modelValue', val)
  },
})
const state = reactive({
  loading: false,
  dataList: [] as BizObjectAttr[],
})

const getData = async () => {
  const bizId = props.bizId
  const objectId = props.objectId
  if (bizId > 0 && objectId > 0) {
    state.loading = true
    const { data } = await getObjectAttrListById(bizId, objectId)
    state.loading = false
    state.dataList = data
  }
}
onMounted(() => {
  getData ()
})
</script>

<template>
  <el-select v-model="objectId" v-loading="state.loading" style="width: 100%" filterable placeholder="请选择属性" value-key="attrId">
    <el-option key="0" label="请选择" :value="0" disabled />
    <el-option
      v-for="item in state.dataList"
      :key="item.attrId"
      :label="item.attrTitle"
      :value="item.attrId"
    />
  </el-select>
</template>
