<script lang="ts" setup name="FormTitle">
import { ref } from 'vue'

const props = withDefaults(defineProps<{
  titleName?: string,
  id?: string,
  line?: boolean,
  leftBox?:boolean, // 增加参数左侧 自定义div 默认 false
  isStar?: boolean, // 是否显示星号
  border?: boolean, // 是否显示分割线
}>(), {
  line: true,
  leftBox: false,
  border: false,
  isStar: false // 是否显示星号
})
</script>

<template>
  <div class="titleBox" :style="border ? 'border-bottom: 1px solid rgba(241, 243, 245, 1);': 'border-bottom: none;'" >
    <div class="leftBox">
      <div v-if="props.line" class="borderLeft"/>
      <div :id="props.id" class="titleName mini-title"><span class="red-star" v-if="props.isStar">*</span>{{ props.titleName }}</div>
      <div v-if="props.leftBox" class="leftBox-div"> <slot name="leftBox"/></div>
    </div>
    <div class="rightBox">
      <slot/>
    </div>
  </div>
</template>

<style lang="scss">
.el-row {
  > .titleBox {
    padding-left: 6px;
    padding-right: 6px;
  }
}
</style>

<style lang="scss" scoped>
.titleBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 8px;
  width: 100%;
  height: 32px;
  border-bottom: 1px solid rgba(241, 243, 245, 1);
  .leftBox{
    display: flex;
    align-items: center;
    height: 100%;
    .borderLeft{
      margin-right: 10px;
      border-radius: 20px;
      width: 3px;
      height: 14px;
      background: rgba(53, 108, 236, 1);
    }
    .titleName{
      font-size: 14px;
      font-weight: 600;
      line-height: 19.6px;
      color: rgba(46, 46, 46, 1);
    }
  }
  .rightBox{

  }
}
.leftBox-div{
  margin-left: 10px;
}
.red-star {
    color: #f56c6c;
    margin-right: 4px;
}
</style>