<template>
  <div :style="{...props.style, ...(placement === 'bottom' ? { display: 'block' } : {})}" class="j-label">
    <div
      class="label"
      :class="{'j-class-label' : props.labelBorder, 'required': props.required}"
      v-if="label"
      :style="{...labelStyleComputed, minWidth: (isNumber(props.labelWidth) ? props.labelWidth + 'px' : props.labelWidth)}"
    >
      {{ props.label }}
    </div>
    <div :class="props.labelBorder ? '' : 'content'">
      <slot name="default"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { isNumber } from "@/utils/is";
import { basicProps } from './props';
import { addStyle } from "@/utils";
import {computed} from "vue";
// todo
const props = defineProps({ ...basicProps });
const labelStyleComputed = computed(() => {
  return addStyle(props.labelStyle)
})
</script>

<style scoped lang="scss">

.j-label {
  display: flex;
  align-items: center;

  .label {
    padding-right: 8px;
  }
  .content {
    flex: 1;
  }
  .required {
    &:after {
      content: '*';
      color: #F35534;
    }
  }
}
.j-class-label {
  font-weight: bolder;
  padding-left: 6px;
  border-left: 3px solid #008ded;
}

</style>
