<template>
    <a-select
        :value="value"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="Please select"
        allow-clear
        :options="data"
        v-on="$listeners"
        v-bind="$attrs"
    />
</template>

<script>
import { formatObj } from '@/utils';

export default {
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        value: [String, Number, Array],
        request: Function,
    },
    data() {
        return {
            data: [],
        };
    },
    async mounted() {
        if (this.request) {
            const newArr = await this.request();
            this.data = await formatObj(newArr, { value: 'jobId', label: 'jobName', key: 'jobId' });
        }
    },
};
</script>
