<template>
  <div
    class="hn-viewer-rect"
    :style="computedStyles" />
</template>
<script>
export default {
  name: 'HnViewerRect',
  props: {
    x1: {
      type: Number,
      default: 0
    },
    y1: {
      type: Number,
      default: 0
    },
    x2: {
      type: Number,
      default: 0
    },
    y2: {
      type: Number,
      default: 0
    },
    background: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 方块的位置信息
    computedStyles() {
      const { x1, x2, y1, y2, background } = this;
      const h = y2 - y1;
      return {
        top: y1 + 'px',
        left: x1 + 'px',
        width: `${x2 - x1 + 1}px`,
        height: `${h + 1}px`,
        lineHeight: h + 'px',
        background
      };
    }
  }
};
</script>