<template>
  <div
    class="c-marquee"
    :style="styles"
  >
    <marquee
      :key="step"
      class="c-marquee__content"
      scrolldelay="1000"
      :scrollamount="step"
    >
      {{ node.text }}
    </marquee>
  </div>
</template>

<script>
import { WidgetType } from '../constant'

export default {
  name: WidgetType.MARQUEE,
  props: {
    node: {
      type: Object,
      default: null
    }
  },
  computed: {
    styles () {
      const {
        width,
        height,
        color,
        fontSize,
        fontWeight,
        backgroundColor
      } = this.node
      return {
        width: `${width}px`,
        height: `${height}px`,
        color,
        'font-size': `${fontSize}px`,
        'font-weight': fontWeight,
        'background-color': backgroundColor
      }
    },
    step () {
      return this.node.refreshRate * this.node.step
    }
  }
}
</script>

<style lang="scss" scoped>
.c-marquee {
  display: inline-flex;
  align-items: center;
  overflow: hidden;

  &__content {
    line-height: 1;
  }
}
</style>
