<template>
  <div class="noticebarView" :style="styleData" v-if="isShow && winGiftTitle">
    <div :class="[noticeTextViewClass]" v-if="winGiftTitle">{{ winGiftTitle }}</div>
  </div>
</template>

<script>
import randowmGiftUtil from '../../../util/randomGift.js';
import apis1 from '../../../util/apis1.js';
let { getWinnerData } = apis1;
export default {
  props: ['datas', 'styleData', 'keyData','isTemplate'],
  data() {
    return {
      isShow: false, //是否显示
      noticeTextViewClass: 'noticeTextView',
      winGiftTitle: '',
      // giftArrList: ['100京豆', '满50优惠券', '20瓦充电器', '50积分']
      giftArrList: []
    };
  },

  created() {
    this.publicData.$on('isDrawRolled', (datas, isTemplate) => {
      console.log(isTemplate,'isDrawRolled');
      this.isTemplate = isTemplate;
      if (datas == true) {
        this.isShow = true;
        this.initData();
      } else {
        this.isShow = false;
      }
    });
  },

  methods: {
    //初始化请求接口
    async initData() {
      if (this.isTemplate) {
        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){
            // console.log('有奖品')
            this.winGiftTitle = '恭喜' + this.winRcordListData[0].nickName.substr(0, 1) + '***' + this.winRcordListData[0].nickName.substr(-1, 1)  + '获得' + this.winRcordListData[0].prizeName;
            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 nickName = this.winRcordListData[i].nickName;
              this.giftArrList[i] = '恭喜' + nickNameFirst + '获得' + this.winRcordListData[i].prizeName;
            }

          }else{
            // console.log('没有奖品')
            this.winGiftTitle = null
          }
          // var nickNameEnd = this.winRcordListData.length > 0 ? this.winRcordListData[0].nickName.substr(0, 1) + '***' + this.winRcordListData[0].nickName.substr(-1, 1) : null;
          // this.winGiftTitle = this.winRcordListData.length > 0 ? '恭喜' + nickNameEnd + '获得' + this.winRcordListData[0].prizeName : '';
        });
      }

      this.intervalGift = setInterval(() => {
        this.noticeTextViewClass = 'noticeTextView';
        this.winGiftTitle = randowmGiftUtil.randomGift(this.giftArrList);
      }, 3000);

    }
  }
};
</script>

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

@keyframes rowup1 {
  0% {
    transform: translate3d(0, 0.4rem, 0);
  }
  100% {
    transform: translate3d(0, -0.5rem, 0);
  }
}
</style>
