<template>
  <div
    class="broadcastStyle"
    :style="styleData.broadcastStyle"
    ref="broadcast"
    @click="styleClick('click', 'broadcast')"
    @mousemove="styleClick('mousemove', 'broadcast')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.broadcastLiStyle" ref="movelist">
      <div v-for="item in prizeList" :key="item.id" class="prizeText">
        参与投票有机会获得{{ item.prizeName }}
      </div>
    </div>
    <div :style="styleData.muchJoinStyle">{{ muchJoin }}人已参与</div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
let { drawPrize, votePolitely } = apis1;
import bus from "../../../util/bus.js";
export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      prizeList: [],
      muchJoin: 0,
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.muchJoin = this.datas.muchJoin;
  },
  mounted() {
    this.initData();
    this.moveList();
  },
  updated() {
    bus.$on("muchJoin", (content) => {
      //将当前参与的用户人数通过Bus赋值
      this.muchJoin = content;
    });
    console.log(this.muchJoin);
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      //初始化数据
      var data;
      if (this.isTemplate) {
        var datasAll = this.templateData;
        this.$toast("活动预览，仅供查看");
        this.muchJoin = 8888;
        this.prizeList = [
          {
            showImg:
              "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            prizeName: "10元优惠券",
          },
          {
            showImg:
              "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            prizeName: "20元优惠券",
          },
          {
            showImg:
              "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            prizeName: "10元优惠券",
          },
          {
            showImg:
              "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            prizeName: "20元优惠券",
          },
        ];
        this.moveList();
        if (datasAll) {
          this.muchJoin = 0;
          this.prizeList = datasAll.voting.draw.prizeList;
        }
        return;
      }
      const self = this;
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
      }
      votePolitely((data) => {
        console.log(data.data, "votePolitely");
        this.muchJoin = data.data.voteUserCount;
        bus.$emit("data", data.data);
        console.log(this.muchJoin, "endTime");
        drawPrize((initdatas) => {
          //调用奖品接口
          console.log(initdatas);
          this.prizeList = initdatas.data.prizeInfo;
        });
      });
    },
    moveList() {
      var nowNum = 0;
      var height = this.$refs.movelist.offsetHeight; //奖品列表DOM总高度
      var thisDom = this.$refs.movelist; //奖品列表DOM
      var nowheight = height;
      setInterval(() => {
        var num = this.prizeList.length;
        if (this.prizeList.length <= 1) {
          //如果奖品数量未超过2个或等于奖品数量总长度
          thisDom.style.transform = `translate3d(0px, 0px, 0px)`;
          nowNum = 0;
          nowheight = 0;
        } else {
          if (nowNum >= num) {
            nowNum = 0;
            nowheight = height;
            thisDom.style.transform = `translate3d(0px, ${height}px, 0px)`;
            thisDom.style.transition = "none";
            setTimeout(() => {
              thisDom.style.transition = "all 1s";
              thisDom.style.transform = `translate3d(0px, ${
                nowheight - height
              }px, 0px)`;
            }, 100);
          } else {
            //每次执行将div向上位移
            nowheight -= height;
            thisDom.style.transition = "all 1s";
            thisDom.style.transform = `translate3d(0px, ${nowheight}px, 0px)`;
            nowNum++;
          }
        }
      }, 1500);
    },
  },
};
</script>
<style lang="scss" scoped>
s {
}
.prizeText {
  line-height: 0.7rem;
  height: 100%;
}
.broadcastStyle {
  position: relative;
}
</style>