<template>
  <div>
    <div class="notice_bonus" v-if="isShowNotice">
      <img class="icon_container" src="../images/components/NoticeBonus/sy_guangbo.png" alt="">
      <div ref="container" class="msg_container">
        <!--<div class="notice_msg" v-for='item in notice_list'>-->
        <!--{{item}}-->
        <!--</div>-->
        <div ref="msg1" :class="['notice_msg', startAnimate?'msg1':'']">{{msg1}}</div>
        <div :class="['notice_msg', startAnimate?'msg2':'']">{{msg2}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { gameInfo } from "@/components/axios/api";

export default {
  name: "NoticeBonus",
  data() {
    return {
      isShowNotice: false,
      notice_list: [],
      gameInfo: {
        fly_top: [],
        fly_bot: []
      },
      canScroll: true,
      curIndex: 0,
      startAnimate: false,
      msg1: "",
      msg2: ""
    };
  },
  // props: ["notice_list"],
  // computed: {
  //   notice() {
  //     return this.notice_list;
  //   }
  // },
  methods: {
    stopScroll(e) {
      console.log(e);
      e.preventDefault();
    },
    getGameInfo(nonRefresh) {
      gameInfo().then(result => {
        console.log("result", result);
        if (
          result.code == 0 &&
          (result.data.fly_bot.length || result.data.fly_top.length)
        ) {
          let fly_bot = result.data.fly_bot;
          let fly_top = result.data.fly_top || [];
          let len = Math.max(fly_bot.length, fly_top.length);
          let list = [];
          for (let i = 0; i < len; i++) {
            fly_bot[i] && list.push(fly_bot[i]);
            fly_top[i] && list.push(fly_top[i]);
          }
          this.notice_list = list;
          this.canScroll = true;
          this.msg1 = this.notice_list[0];
          this.msg2 = this.notice_list[1];
          console.log("this.notice_list", this.notice_list);

          this.isShowNotice = true;
        }
      });
    },
    msgAnimate() {
      setTimeout(() => {
        this.startAnimate = true;
      }, 100);
      let timer = sessionStorage.getItem("timer");
      if (timer) {
        clearInterval(Number(timer));
      }
      let newTimer = setInterval(() => {
        if (Math.abs(this.notice_list.length - this.curIndex) <= 2) {
          this.curIndex = 0;
          if (window.location.hash == "#/Daka") {
            this.getGameInfo();
          }
        } else {
          this.curIndex += 2;
        }
        this.msg1 = this.notice_list[this.curIndex];
        this.msg2 = this.notice_list[this.curIndex + 1];
      }, 10000);
      sessionStorage.setItem("timer", newTimer + "");
    }
  },
  created() {
    this.getGameInfo();
  },
  mounted() {
    this.msgAnimate();
  }
};
</script>

<style>
.notice_bonus {
  width: 6.4rem;
  height: 0.48rem;
  border-radius: 0.22rem;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  padding: 0 0.14rem;
  box-sizing: border-box;
}

.icon_container {
  width: 0.22rem;
  height: 0.2rem;
  flex-shrink: 0;
  margin-right: 0.1rem;
}

.msg_container {
  flex: 1;
  height: 0.48rem;
  transform-style: preserve-3d;
  overflow: hidden;
}

.notice_msg {
  font-size: 0.24rem;
  color: #fff;
  line-height: 0.48rem;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}

.msg1 {
  transform: translate3d(0, 0.48rem, 0);
  animation: rowUp 10s infinite;
  /* transform: translateZ(35rpx); */
}

.msg2 {
  transform: translate3d(0, 0, 0);
  animation: rowUp2 10s infinite;
  /* transform: rotateX(90deg) translateZ(35rpx);  */
}

/* .rotate-animation {
      animation: rotate .3s linear 0s 1 normal forwards;
    }

    @keyframes rotate {
      0% {
        transform: rotateX(0deg);
      }
      100% {
        transform: rotateX(-90deg);
      }
    } */

@keyframes rowUp {
  0% {
    -webkit-transform: translate3d(0, 0.48rem, 0);
    transform: translate3d(0, 0.48rem, 0);
  }
  10% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, -0.48rem, 0);
    transform: translate3d(0, -0.48rem, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -0.48rem, 0);
    transform: translate3d(0, -0.48rem, 0);
  }
}

@keyframes rowUp2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  60% {
    -webkit-transform: translate3d(0, -0.48rem, 0);
    transform: translate3d(0, -0.48rem, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -0.32rem, 0);
    transform: translate3d(0, -0.48rem, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -0.96rem, 0);
    transform: translate3d(0, -0.96rem, 0);
  }
}
</style>
