<template>
  <div class='bk-noticeBar' :style="{
      backgroundColor: bgColor, 
      color: textColor,
      fontSize: textSize + 'px'
    }">
    <scroll-view 
      class='scroll-wrap'
      scroll-x
      :scroll-left="x"
      style="width: 100%"
    >
      <div class='before-icon-wrap' v-if='beforeIcon' :style="{
        backgroundColor: bgColor
      }">
        <BKIcon :name="beforeIcon"></BKIcon>
      </div>
      <div class='text-wrap' :style="{
        paddingRight: length + windowWidth + 'px',
        color: textColor,
        fontSize: textSize + 'px'
      }">{{text}}</div>
      <div class='after-icon-wrap' v-if='afterIcon' :style="{
        backgroundColor: bgColor
      }">
        <BKIcon :name="afterIcon"></BKIcon>
      </div>
    </scroll-view>
  </div>
</template>
<script>
import BKIcon from './BKIcon'

export default {
  components: {
    BKIcon
  },
  props: {
    textColor: {
      type: String,
      default: () => '#ed6a0c'
    },
    textSize: {
      type: [String, Number],
      default: () => '14'
    },
    text: {
      type: String,
      default: () => ''
    },
    bgColor: {
      type: String,
      default: () => '#fffbe8'
    },
    beforeIcon: {
      type: String,
      default: () => ''
    },
    afterIcon: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      x: 0,
      length: 0,
      windowWidth: 0,
      timer: null
    }
  },
  onUnload () {
    clearInterval(this.timer)
  },
  mounted () {
    this.length = this.text.length * this.textSize
    this.windowWidth = wx.getSystemInfoSync().windowWidth
    this.goRight()
  },
  methods: {
    goRight () {
      this.timer = setInterval(() => {
        if (this.x >= this.windowWidth + this.length) {
          this.x = 0
        } else {
          this.x = this.x + 5
        }
      }, 200)
    }
  }
}
</script>

<style scoped>
.bk-noticeBar {
  padding: 13px 20px;
}
.text-wrap {
  white-space:nowrap;
  margin-left: 105vw;
}
.scroll-wrap {
  display: flex;
  position: relative;
}
.before-icon-wrap {
  width: 40px;
  height: 40px;
  position: fixed;
  left: 10px;
}
.after-icon-wrap {
   width: 40px;
  height: 40px;
  position: fixed;
  right: 10px;
  transform: translateY(-40px)
}
</style>
