Vue.component('c-marquee', {
  props: ['merchant'],
  mounted () {
  },
  methods: {
    get_marquee_width () {
      return (this.$refs.roll||{}).scrollWidth || 1000
    },
    onResize () {
      this.$forceUpdate(); // update meearqu style (get_marquee_width())
    },
  },
  template: 
`
<v-fade-transition>
  <div
    v-if="(merchant.announcements||[]).length > 0"
    style="
      position: sticky; 
      top: 48px; 
      left: 0; 
      width: 100%;
      color: white;
      z-index: 2;
      display: flex;
      white-space: nowrap;
      overflow:hidden;
      text-shadow: 1px 1px 1px grey, 0px 0px 3px white;
    "
    class="marquee primary"
    ref="marquee"
  >
    <div v-resize="onResize" class="roll" ref="roll" :style="'user-select:none; animation: marquee linear '+(get_marquee_width()/50)+'s infinite;'">
      <div style="min-width:100vw">
        <span class="title" v-for="(announcement, i) in merchant.announcements" :key="i" style="margin-right: 5rem;">{{announcement}}</span>
      </div>
    </div>
  </div>
</v-fade-transition>`
});