<template>
  <div
    :style="styleData.tieleNameStyle"
    v-if="startTime"
    :key="keyee"
    ref="titleNameNew"
    @click="styleClick('click', 'titleNameNew')"
    @mousemove="styleClick('mousemove', 'titleNameNew')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.titleHeader">
      {{ titleName }}
      <span class="titlespan" v-if="titleSelect != ''"
        >({{
          titleText == 0 ? titleSelect : `最多选${allData.choiceCount}项`
        }})</span
      >
    </div>
    <div :style="styleData.titleTime" v-if="noSelect && nowEnd != true">
      {{ moveEndTime }} 后结束
    </div>
    <div class="flex" v-if="noSelect != true && nowEnd != true">
      <div :style="styleData.timeText">距活动结束剩余：</div>
      <div :style="styleData.titleTime">
        <span :style="styleData.timeStyle">{{ day }}</span>
        <span :style="styleData.timeTextStyle">天 </span>
        <span :style="styleData.timeStyle">{{ hour }}</span>
        <span :style="styleData.timeTextStyle">时 </span>
        <span :style="styleData.timeStyle">{{ minute }}</span>
        <span :style="styleData.timeTextStyle">分 </span>
        <span :style="styleData.timeStyle">{{ second }}</span>
        <span :style="styleData.timeTextStyle">秒</span>
      </div>
    </div>
    <div :style="styleData.nowEndStyle" v-if="nowEnd"></div>
    <div
      v-if="
        anmition && drawSetting == 1 && drizeList.length != 0 && drizetext != ''
      "
      :style="styleData.anmition"
      class="anmition"
    >
      恭喜{{ drizetext }}中奖！
    </div>
  </div>
</template>
<script>
import bus from "../../../util/bus.js";
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store";
let { getWinnerData } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      allData: null, //初始数据
      titleName: "", //标题名
      titleText: 0,
      titleSelect: "",
      moveEndTime: 0, //时间结果
      nowTime: null, //当前时间
      endTime: null, //结束时间
      day: 0, //天
      hour: 0, //时
      minute: 0, //分
      second: 0, //秒
      startTime: false, //起始时间
      timer: {}, //时间数据
      keyee: 0,
      noSelect: false, //控制模板样式
      anmition: false, //控制动画显示隐藏
      drawSetting: null, //控制动画
      drizeList: [], //中奖人列表
      drizetext: "", //中奖用户信息
      nowEnd: false,
      Interval: null,
      styleDataOld: {},
      winRcordListData: [
        {
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
          nickName: "z***撒",
          prizeName: "中了100京豆",
        },
        {
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
          nickName: "a***3",
          prizeName: "中了满100减5优惠券",
        },
        {
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
          nickName: "李***云",
          prizeName: "中了充电宝",
        },
        {
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
          nickName: "j***3",
          prizeName: "中了充电宝",
        },
        {
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
          nickName: "j***8",
          prizeName: "中了充电宝",
        },
        {
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
          nickName: "j***3",
          prizeName: "中了充电宝",
        },
      ],
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  mounted() {},
  updated() {
    bus.$on("winner", (content) => {
      var nownum = 0;
      console.log(content, "winner");
      this.drizeList.push(content);
      this.drizeList.forEach((v) => {
        v.nickName = v.nickName.substr(0, 1) + "**" + v.nickName.substr(-1, 1);
      });
      clearInterval(this.Interval);
      this.Interval = setInterval(() => {
        if (nownum == this.drizeList.length) {
          nownum = 0;
        }
        console.log(this.drizeList[nownum].nickName, this.drizeList);
        this.drizetext = this.drizeList[nownum].nickName;
        nownum++;
      }, 3000);
    });
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      this.anmition = this.datas.anmition;
      this.titleSelect = this.datas.titleSelect; //将json中数据赋值
      if (this.isTemplate == true) {
        this.noSelect = this.datas.noSelect; //将json中数据赋值
        this.titleName = this.datas.titleName; //将json中数据赋值

        var datasAll = this.templateData;
        console.log(datasAll, "2222222222222TempLate");
        if (datasAll) {
          this.nowTime = new Date().getTime();
          this.endTime =
            datasAll.seniorDraw.issuingTime ||
            new Date(datasAll.activity.dateValue[1]).getTime();
          if (datasAll.evaluation && datasAll.evaluation.evaluationStar) {
            this.titleName = datasAll.activity.actName;
          } else {
            console.log("aaaa");
            if (
              datasAll.voting.votingTheme == null ||
              datasAll.voting.votingTheme == ""
            ) {
              this.titleName = datasAll.activity.shareTitle;
            } else {
              this.titleName = datasAll.voting.votingTheme;
            }
          }
          this.titleText = datasAll.voting.votingForm;
          this.allData = datasAll.voting;
          console.log(this.endTime, this.nowTime);
          this.nowEnd = false;
          if (
            new Date().getTime() >
            new Date(datasAll.activity.dateValue[1]).getTime()
          ) {
            this.nowEnd = true;
          } else {
            this.nowEnd = false;
          }
        } else {
          this.nowTime = 1611388851000; //如果为浏览
          this.endTime = 1613878538000; //如果为浏览
        }
        this.winRcordListData.forEach((v) => {
          v.nickName =
            v.nickName.substr(0, 1) + "**" + v.nickName.substr(-1, 1);
        });
        this.drizeList = this.winRcordListData;
        var nownum = 0;
        setInterval(() => {
          //定时器计算时间
          this.nowTime += 1000;
          var time = (this.endTime - this.nowTime) / 1000; //计算总时间
          this.day = Math.floor(time / (24 * 60 * 60)); //做时间处理
          this.hour = Math.floor((time % (24 * 60 * 60)) / (60 * 60)); //做时间处理
          this.minute = Math.floor(((time % (24 * 60 * 60)) % (60 * 60)) / 60); //做时间处理
          this.second = Math.floor(((time % (24 * 60 * 60)) % (60 * 60)) % 60); //做时间处理
          if (this.day < 10) {
            //如果判定为一位数
            this.day = "0" + this.day;
          }
          if (this.hour < 10) {
            //如果判定为一位数
            this.hour = "0" + this.hour;
          }
          if (this.minute < 10) {
            //如果判定为一位数
            this.minute = "0" + this.minute;
          }
          if (this.second < 10) {
            //如果判定为一位数
            this.second = "0" + this.second;
          }
          this.moveEndTime = //计算结果
            this.day +
            "天" +
            this.hour +
            "时" +
            this.minute +
            "分" +
            this.second +
            "秒";
        }, 1000);
        this.Interval = setInterval(() => {
          if (nownum == this.drizeList.length) {
            nownum = 0;
          }
          // console.log(this.drizetext, this.drizeList[nownum].nickName);
          this.drizetext = this.drizeList[nownum].nickName;
          nownum++;
        }, 3000);
        bus.$on("initdata", (content) => {
          console.log(content, "myData1");
          this.timer = content.data; //接收初始化数据
          this.endTime = this.timer.endTime; //将时间戳转换为时间

          console.log(this.startTime);
        });
        bus.$on("data", (content) => {
          console.log(content, "myData");
          this.allData = content;
          this.titleName = content.votingTheme;
          this.titleText = content.votingForm;
          this.drawSetting = content.drawSettingType;
          this.keyee++;
          if (this.drawSetting) {
            getWinnerData((data) => {
              if (data.data.length != 0) {
                console.log(data.data, "getWinnerData");
                data.data.forEach((v) => {
                  v.nickName =
                    v.nickName.substr(0, 1) + "***" + v.nickName.substr(-1, 1);
                });
                this.drizeList = data.data;
                var nownum = 0;
                setInterval(() => {
                  if (nownum == this.drizeList.length) {
                    nownum = 0;
                  }
                  this.drizetext = this.drizeList[nownum].nickName;
                  nownum++;
                }, 3000);
              }
            });
          }
        });
        setInterval(() => {
          //定时器计算时间
          if (this.isTemplate == true) {
            this.nowTime -= 1000;
          } else {
            this.nowTime = new Date().getTime(); //获取当前时间
          }
          var time = (this.endTime - this.nowTime) / 1000; //计算总时间
          this.day = Math.floor(time / (24 * 60 * 60)); //做时间处理
          this.hour = Math.floor((time % (24 * 60 * 60)) / (60 * 60)); //做时间处理
          this.minute = Math.floor(((time % (24 * 60 * 60)) % (60 * 60)) / 60); //做时间处理
          this.second = Math.floor(((time % (24 * 60 * 60)) % (60 * 60)) % 60); //做时间处理
          if (this.day < 10) {
            //如果判定为一位数
            this.day = "0" + this.day;
          }
          if (this.hour < 10) {
            //如果判定为一位数
            this.hour = "0" + this.hour;
          }
          if (this.minute < 10) {
            //如果判定为一位数
            this.minute = "0" + this.minute;
          }
          if (this.second < 10) {
            //如果判定为一位数
            this.second = "0" + this.second;
          }
          this.moveEndTime = //计算结果
            this.day +
            "天" +
            this.hour +
            "时" +
            this.minute +
            "分" +
            this.second +
            "秒";
        }, 1000);
        return;
      } else {
        bus.$on("initdata", (content) => {
          console.log("actName", store.state.actName, content);
          this.timer = content.data; //接收初始化数据
          this.endTime = this.timer.endTime; //将时间戳转换为时间
          console.log("actName", store.state.actName);

          if (content.data.startTime > new Date().getTime()) {
            this.startTime = false;
          } else {
            this.startTime = true;
          }
          if (new Date().getTime() > this.endTime) {
            this.nowEnd = true;
            this.startTime = false;
          } else {
            this.nowEnd = false;
          }
          console.log(new Date().getTime() - this.endTime);
        });
        bus.$on("data", (content) => {
          console.log(content, "myData");

          // 多选
          this.allData = content;
          if (content.votingForm == 1) {
            this.titleSelect = content.votingForm;
          }
          if (content.votingTheme == null || content.votingTheme == "") {
            this.titleName = store.state.actName;
          } else {
            this.titleName = content.votingTheme;
          }

          this.titleText = content.votingForm;
          this.drawSetting = content.drawSettingType;
          this.keyee++;
          if (this.drawSetting) {
            getWinnerData((data) => {
              if (data.data.length != 0) {
                console.log(data.data, "getWinnerData");
                data.data.forEach((v) => {
                  v.nickName =
                    v.nickName.substr(0, 1) + "**" + v.nickName.substr(-1, 1);
                });
                this.drizeList = data.data;
                var nownum = 0;
                setInterval(() => {
                  if (nownum == this.drizeList.length) {
                    nownum = 0;
                  }
                  console.log(
                    this.drizeList,
                    this.drizeList[nownum].nickName,
                    "haha"
                  );
                  this.drizetext = this.drizeList[nownum].nickName;
                  nownum++;
                }, 3000);
              }
            });
          }
          setInterval(() => {
            //定时器计算时间
            if (this.isTemplate == true) {
              this.nowTime -= 1000;
            } else {
              this.nowTime = new Date().getTime(); //获取当前时间
            }
            var time = (this.endTime - this.nowTime) / 1000; //计算总时间
            this.day = Math.floor(time / (24 * 60 * 60)); //做时间处理
            this.hour = Math.floor((time % (24 * 60 * 60)) / (60 * 60)); //做时间处理
            this.minute = Math.floor(
              ((time % (24 * 60 * 60)) % (60 * 60)) / 60
            ); //做时间处理
            this.second = Math.floor(
              ((time % (24 * 60 * 60)) % (60 * 60)) % 60
            ); //做时间处理
            if (this.day < 10) {
              //如果判定为一位数
              this.day = "0" + this.day;
            }
            if (this.hour < 10) {
              //如果判定为一位数
              this.hour = "0" + this.hour;
            }
            if (this.minute < 10) {
              //如果判定为一位数
              this.minute = "0" + this.minute;
            }
            if (this.second < 10) {
              //如果判定为一位数
              this.second = "0" + this.second;
            }
            this.moveEndTime = //计算结果
              this.day +
              "天" +
              this.hour +
              "时" +
              this.minute +
              "分" +
              this.second +
              "秒";
          }, 0);
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100%;
}
.bigbox {
  text-align: left;
  position: relative;
}
.titlespan {
  color: rgb(240, 37, 15);
}
.anmition {
  animation: titleAnmition 3s infinite;
}
@keyframes titleAnmition {
  0% {
    top: 1.7rem;
    left: -0.5rem;
    opacity: 0;
  }
  25% {
    top: 1.3rem;
    left: 0rem;
    opacity: 1;
  }
  75% {
    top: 0.7rem;
    left: 0rem;
    opacity: 1;
  }
  100% {
    top: 0.5rem;
    left: -0.5rem;
    opacity: 0;
  }
}
</style>