<template>
  <div class="dict-select">
    <el-select
      :style="{
        width: props.width + 'px'
      }"
      clearable
      v-model="value"
      :placeholder="placeholders[props.type]"
      size="large"
      v-bind="$attrs"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>

<script setup lang="ts">
  import { fetchAllGroups, fetchAllSuppliers } from '@/api'
  enum SelectType {
    // 机构
    Group,
    // 供应商
    Supplier
  }

  interface IProps {
    type?: SelectType
    width?: string
  }
  const props = withDefaults(defineProps<IProps>(), {
    type: SelectType.Group
  })

  const value = ref('')
  const options = ref()
  const placeholders = {
    0: '请选择机构',
    1: '请选择供应商'
  }
  const { run, loading } = useRequest(
    () => {
      const api = [
        () =>
          fetchAllGroups({
            deviceId: getDeviceId()
          }),
        () => fetchAllSuppliers({})
      ]

      return api[props.type]?.()

      // return fetchAllSuppliers({})
    },
    {
      onSuccess: (data: any) => {
        const opt = data.map((el) => ({
          label: el.name,
          ...el
        }))
        options.value = opt
      }
    }
  )
</script>

<style scoped lang="less">
  .dict-select {
    :deep(.el-select) {
      .el-input__wrapper {
        height: 49px;
      }
    }
  }
</style>
