<template>
  <div>
    <a-divider :orientation="dataValueStyle.textAlign" :style="dataValueStyle">
      <span v-if="!dataValueStyle.height"> {{ dataValue }}</span>
    </a-divider>
  </div>
</template>

<script setup name="FormDivideLine">
import { computed } from 'vue';

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  record: {
    type: Object,
    default: {}
  }
});

// 内容值
const dataValue = computed(() => {
  return props.record?.itemLabelName;
});

const dataValueStyle = computed(() => {
  const { fontSize, fontColor, textAlign, fontWeight, lineHeight, lineColor } = props.record.formItemContent;
  let style = {
    'font-size': fontSize,
    color: fontColor,
    textAlign: textAlign,
    fontWeight: fontWeight,
    borderColor: lineColor
  };
  if (lineHeight) {
    style.height = lineHeight;
    style.backgroundColor = lineColor;
  }
  return style;
});
</script>

<style scoped lang="less"></style>
