<template>
  <div class="common-input-prefix-suffix" :style="style">
    <oio-icon v-if="contentType === InputPreSuffixType.ICON" :icon="content" :color="color" :size="fontSize" />
    <div v-else-if="contentType === InputPreSuffixType.TEXT" class="common-input-prefix-suffix-text">
      <pre style="margin: unset">{{ content }}</pre>
    </div>
  </div>
</template>
<script lang="ts">
import { OioIcon } from '@oinone/kunlun-vue-ui-antd';
import { defineComponent, type PropType } from 'vue';
import { InputPreSuffixType } from '../abstract/FormInputAbstractFieldWidget';

export default defineComponent({
  name: 'InputPreSuffix',
  components: { OioIcon },
  inheritAttrs: false,
  props: {
    contentType: {
      type: String
    },
    fixMode: {
      type: String
    },
    content: {
      type: String
    },
    style: {
      type: Object as PropType<CSSStyleDeclaration>
    },
    color: {
      type: String,
      default: 'var(--oio-text-color)'
    },
    fontSize: {
      type: String,
      default: 'var(--oio-font-size)'
    }
  },
  setup() {
    return { InputPreSuffixType };
  }
});
</script>
