<template>
  <Spin v-if="spinning" size="mini"></Spin>
  <span v-else-if="_readonly" v-text="readonlyText" ></span>
  <Select v-else v-bind="_fieldProps" v-model="value" :placeholder="_placeholder">
    <Option v-for="(_value, key) in dataSource" :value="_value.value" :key='key'>
      {{ _value.label }}
    </Option>
  </Select>
</template>
<script setup>
import { inject, useAttrs,  computed, onMounted } from 'vue';
import { useFieldBasics } from '../usefieldBasics';
import { Spin, Select, Option } from '@king-design/vue';
import { useRoute } from 'vue-router';
import { isArray, filter, includes, map } from 'lodash-es';

const route = useRoute();
const $Attrs = useAttrs();
const formInfo = inject('formInfo');
const emit = defineEmits(['change']);

const { value, spinning, dataSource, _readonly, _placeholder, _fieldProps,onRequest,onLinkage } = useFieldBasics(
	$Attrs,
	formInfo,
	route,
	emit
);
const readonlyText = computed(() => {
	if (isArray(value.value)) {
		const filters = filter(dataSource.value, (item) => includes(value.value, String(item.value)));
		return map(filters, 'label').join(' / ');
	}
	const filters = filter(dataSource.value, (item) => includes(value.value, item.value));
	return map(filters, 'label').join(' / ');
});

onMounted(async () => {
	onRequest();
	onLinkage();
});
</script>
<style lang="less">
</style>
