<template>
  <el-descriptions :column="descColumn" border :labelStyle="labelStyle" :contentStyle="descStyle">
    <slot name="default"/>
  </el-descriptions>
</template>

<script>
export default {
  name: "Descriptions",
  props: {
    descColumn: { // 详情组件列数
      type: Number,
      default: 2,
    },
    descLabelWidth: { // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
      type: Number,
      default: 15,
    },
    rawStyle: { // 详情组件列数
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    };
  },
  computed: {
    labelStyle() {
      let style = {
        width: `${this.descLabelWidth}%`,
      };
      if(!this.rawStyle)
      {
        style['border-top'] = 0;
        style['border-left'] = 0;
        style['border-right'] = 0;
        style['background-color'] = 'unset';
      }
      return style;
    },
    descStyle() {
      let style = {
        width: `${(100 / this.descColumn) - this.descLabelWidth}%`,
      };
      if(!this.rawStyle)
      {
        style['border-top'] = 0;
        style['border-left'] = 0;
        style['border-right'] = 0;
      }
      return style;
    },
  },
}
</script>

<style scoped>

</style>
