<style lang="less" scoped>
@import "./index.less";
</style>
<template>
  <div :style="blankStyle" />
</template>
<script>
import { addUnit } from '../utils';

export default {
  name: 'blank',
  /**
   * 组件的属性列表
   */
  props: {
    /**
     * 分割类型  @BLANK:0:辅助空白  @LINE:1:辅助线
     */
    lineType: {
      type: String,
      default: 'BLANK'
    },
    /**
     * 线的样式  solid-line:实线  dotted-line:虚线  point-line:点线
     */
    lineStyle: {
      type: String,
      default: 'solid-line'
    },

    /**
     * 左右边距
     */
    lineMargin: {
      type: [String, Number],
      default: '0'
    },
    /**
    * 高度
    */
    height: {
      type: [String, Number],
      default: '0'
    },

    /**
     * 标题颜色
     */
    lineColor: {
      type: String,
      default: '#e5e5e5'
    },
    /**
     * 背景色
     */
    backgroundColor: {
      type: String,
      value: null
    }
  },

  /**
   * 组件的初始数据
   */
  data() {
    return {
    };
  },
  computed: {
    /**
     * 样式
     */
    blankStyle () {
      const style = [];
      const { height, backgroundColor, lineType } = this;
      if (lineType === 'BLANK') {
        style.push(`height:${addUnit(height)}`);
      }
      if (backgroundColor) {
        style.push(`background-color:${backgroundColor}`);
      }
      return style.join(';');
    }
  },
  watch: {
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
};
</script>
