<template>
  <div class="noticebarView" :style="styleData" v-if="isShow && winGiftTitle">
    <div :class="[noticeTextViewClass]" v-if="winGiftTitle">
      <img class="userImg" :src="userImg">
      <div style="position: absolute;left: 0.5rem;top: 0.05rem">
        {{ winGiftTitle }}
      </div>
    </div>
  </div>
</template>

<script>
import randowmGiftUtil from '../../../util/randomGift.js';
import apis1 from '../../../util/apis1.js';
let { getWinnerData } = apis1;
export default {
  props: ["isTemplate", "datas", "keyData", "styleData", "templateData"],
  data() {
    return {
      isShow: true, //是否显示
      noticeTextViewClass: 'noticeTextView',
      winGiftTitle: '',
      giftArrList: [],
      userImgList:{},
      userImg:'',
    };
  },

  created() {
    this.isShow = true;
    this.initData();
  },

  methods: {
    //初始化请求接口
    async initData() {
      if (this.isTemplate == true) {
        for (var i = 0; i < 2; i++) {
          this.giftArrList[0] = '用户李**娟抽到了积分';
          this.giftArrList[1] = '用户w***j抽到了优惠券';
        }
      } else {
        await getWinnerData(initDtasAll => {
          this.winRcordListData = initDtasAll.data;
          console.log(this.winRcordListData,'winRcordListData')
          if(this.winRcordListData && this.winRcordListData.length > 0){
            for (var i = 0; i < this.winRcordListData.length; i++) {
              var nickNameFirst = this.winRcordListData[i].nickName.substr(0, 1) + '***' + this.winRcordListData[i].nickName.substr(-1, 1);
              var prizeName = this.winRcordListData[i].prizeName.substr(0, 1) + '***' + this.winRcordListData[i].prizeName.substr(-1, 1);

              this.giftArrList.push({
                userPrizeName:'用户' + nickNameFirst + '抽到了' + prizeName,
                userImg:this.winRcordListData[i].userImg,
              })
            }
          }else{
            this.winGiftTitle = null;
            this.userImg = null;
          }
        });
      }

      this.intervalGift = setInterval(() => {
        this.noticeTextViewClass = 'noticeTextView';
        this.userImgList = randowmGiftUtil.randomGift1(this.giftArrList);
        this.winGiftTitle = this.userImgList.userPrizeName;
        this.userImg = this.userImgList.userImg;
      }, 3000);

    }
  }
};
</script>

<style lang="scss">
.noticebarView {
  color: #ffffff;
  z-index: 20;
  background: rgba($color: #000000, $alpha: 0.5);
  border-radius: 0 0.5rem 0.5rem 0;
  width: 2.8rem;
   overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  -o-text-overflow: ellipsis;
  .noticeTextView {
    height: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    -o-text-overflow: ellipsis;
    font-size: 0.25rem;
    animation: 3s rowup1 infinite;
    animation-iteration-count: infinite;
    text-align: center;
    vertical-align: middle;
  }
}

@keyframes rowup1 {
  0% {
    transform: translate3d(0, 0.4rem, 0);
  }
  100% {
    transform: translate3d(0, -0.5rem, 0);
  }
}
.userImg{
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  border-radius: 0.2rem;
  left: 0rem;
}
</style>
