<template>
  <Spin v-if="spinning" size="mini"></Spin>
  <span v-else-if="_readonly" v-text="readonlyText"></span>
  <ButtonGroup  v-else :checkType="checkType" v-model="value" v-bind="_fieldProps">
    <Button v-for="item in dataSource" :key="item.value" :value="item.value">
      {{ item.label }}
    </Button>
  </ButtonGroup>
</template>
<script setup>
import { inject, useAttrs,  onMounted } from 'vue';
import { useFieldBasics } from '../usefieldBasics';
import { Spin, Button, ButtonGroup } from '@king-design/vue';
import { useRoute } from 'vue-router';

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

const { value, spinning, dataSource, _readonly, readonlyText,_fieldProps,onRequest, onLinkage,checkType } = useFieldBasics(
	$Attrs,
	formInfo,
	route,
	emit
);

onMounted(async () => {
	onRequest();
	onLinkage();
});
</script>

<style lang="less" scoped>
.k-radio {
	margin-right: 24px;
}
</style>
<style lang="less">
</style>

