<template>
  <Spin v-if="spinning" ></Spin>
  <span v-else-if="_readonly" v-text="readonlyText"></span>
  <Transfer v-else v-bind="_fieldProps" :data="dataSource" v-model="value" />
</template>
<script setup>
import { inject, watch, useAttrs,  computed, onMounted, ref } from 'vue';
import { useFieldBasics } from '../usefieldBasics';
import { Spin, Transfer } from '@king-design/vue';
import { useRoute } from 'vue-router';
import { filter, map } from 'lodash-es';

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

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

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