<template>
    <div class="s-form-item" :style="{width}">
        <div class="label" :style="{width:labelWidth,marginRight:'8px'}">{{label?`${label}：`:' '}}</div>
        <slot></slot>
    </div>
</template>
<script lang="ts" setup>
interface Props{
   label?:string,
   width?:string,
   labelCol?:number
}
const props = withDefaults(defineProps<Props>(), {
   width: "100%",
   labelCol: 1
})
const persents = ["10%", "20%", "30%", "40%", "50%", "60%", "80%", "90%", "100%"]
const labelWidth = persents[props.labelCol]

</script>
<style lang="less" scoped>
  .s-form-item{
    display: flex;
    align-items: baseline;
    margin-bottom: @itemSpace;
    .label{
      text-align: right;
    }
  }
</style>
