<template>
  <div class="position">
    <RadioGroup v-if="type === 'line'" :value="value" @change="(e) => $emit('update:value', e.target.value)">
      <RadioButton value="left"><AlignLeftOutlined/></RadioButton>
      <RadioButton value="center"><AlignCenterOutlined/></RadioButton>
      <RadioButton value="right"><AlignRightOutlined/></RadioButton>
    </RadioGroup>

    <RadioGroup v-else-if="type === 'round'" :value="value" @change="(e) => $emit('update:value', e.target.value)">
      <RadioButton value="top"><BorderTopOutlined/></RadioButton>
      <RadioButton value="bottom"><BorderBottomOutlined/></RadioButton>
      <RadioButton value="left"><BorderLeftOutlined/></RadioButton>
      <RadioButton value="right"><BorderRightOutlined/></RadioButton>
      <!-- <RadioButton value="right-top"><AlignRightOutlined/></RadioButton> -->
    </RadioGroup>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, withDefaults } from 'vue';
import { RadioGroup, RadioButton } from 'ant-design-vue';
import { AlignCenterOutlined, AlignRightOutlined, AlignLeftOutlined, BorderBottomOutlined, BorderTopOutlined, BorderLeftOutlined, BorderRightOutlined } from '@ant-design/icons-vue';

withDefaults(defineProps<{value: string, type?: 'round' | 'line'}>(), { type: 'line'});
defineEmits(['update:value']);
</script>

<style lang="less" scoped>
:deep(.ant-radio-group) {
  width: 100%;
  display: flex;
}
:deep(.ant-radio-button-wrapper) {
  flex: 1;
  text-align: center;
}
</style>