<template>
    <div>
        公司： <a-select ref="select"
            v-if="options.length"
            :disabled="!$auth('system:domain:change')"
            v-model:value="userStore.domain"
            style="min-width: 100px;"
            placeholder="请选择"
            @change="onChange"
            :dropdownStyle="{ 'textOverflow': 'ellipsis', 'min-width': 'fit-content' }">
            <a-select-option :value="item.value"
                v-for="(item, index) in options"
                :key="index">{{ item.label }}</a-select-option>
        </a-select>
    </div>
</template>

<script setup lang='ts'>
import Api from '@/api';
import { useUserStore } from '@/store/modules/user';
import type { SelectValue } from 'ant-design-vue/es/select';
import { onMounted, ref } from 'vue';

defineOptions({
    name: 'DomianPicker'
})

const userStore = useUserStore();
const options = ref<{ label: string, value: number }[]>([]);
let domains = ref<API.DomainEntity[]>([]);
const onChange = (value: SelectValue) => {
    userStore.changeDomain(value)
};
onMounted(() => {
    Api.domain.domainList({}).then((res) => {
        if (res) {
            domains.value = res.items ?? [];
            options.value = domains.value.map((item) => {
                return {
                    label: item.title,
                    value: item.id
                }
            })
        }

    })
})

</script>

<style lang='less' scoped></style>
