<template>
  <div v-if="showNotice" class="hae-notice-bar">
    <span class="iconfont">&#xe691;</span>
    <p ref="content" class="notice-content">这是内容</p>
    <span @click="closeNotice" class="iconfont">&#xe747;</span>
  </div>
</template>
<script>
export default {
  name: 'notice-bar',
  data () {
    return {
      showNotice: true
    }
  },
  props: {
    type: {
      type: String,
    // 'scroll'、'text'
      default: 'text'
    }
  },
  methods: {
    closeNotice () {
      this.showNotice = false;
    },
    renderNotce (width) {
      this.$nextTick(() => {
        if (this.$refs.content.offsetLeft <= 15) {
          return;
        }
        width += 10;
        this.$refs.content.style.right = width + 'px';
        setTimeout(() => {
          this.renderNotce(width);
        }, 200);
      })
    }
  },
  created () {
    if (this.type === 'scroll') {
      this.$nextTick(() => {
        let width = -this.$refs.content.clientWidth;
        this.renderNotce(width);
      });
    }
  }
};
</script>
<style lang="less">
  .hae-notice-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px;
    background-color: #fefcec;
    color: #f76a24;
    position: relative;
    overflow: hidden;
  }
  .notice-content {
    flex: 1;
    padding: 0 10px;
    font-size: 14px;
    position: relative;
    transition: all 0.2s linear;
  }
  .iconfont{
    background-color: #fefcec;
    position: relative;
    z-index: 2;
  }
</style>