<template>
  <div :style="styleData.drawUserInfodiv" ref="integralGuessSize"
    @click="styleClick('click', 'integralGuessSize')"
    @mousemove="styleClick('mousemove', 'integralGuessSize')"
    @mouseout="styleClick('mouseout')">
    <div class="dice-content" :style="styleData.diceContent" :class="getDiceStatus()"></div>
    <div class="draw-user-info" :style="styleData.drawUserInfo">
      <div class="draw-user-name" :style="styleData.drawUserName">
        <img class="userTouxiang" :src="integralMode.userImg" :style="styleData.userTouxiang"/>
        <span :style="styleData.userName">{{
          integralMode.nickName
        }}</span>
      </div>
      <div class="draw-user-jifen" :style="styleData.drawUserJifen">
        <span>积分余额 : </span
        ><span :style="styleData.myjifenspan"
          >{{ integralMode.integralBalance }}</span
        ><span> 积分</span>
      </div>
    </div>
    <div class="draw-guess-table" :style="styleData.drawGuessTable">
      <div :style="styleData.bigOrsallImg"></div>
      <div class="draw-guess-table-title" v-if="tableStatues == '0'" :style="styleData.drawGuessTableTitle1"></div>
      <div class="draw-guess-table-title" v-if="tableStatues == '1'" :style="styleData.drawGuessTableTitle2"></div>
      <div class="draw-guess-table-title" v-if="tableStatues == '2'" :style="styleData.drawGuessTableTitle3"></div>

      <div class="draw-guess-big-bg"><div class="draw-guess-big" :style="styleData.drawGuessBig" :class="getTableTextCss()">大</div></div>
      <div class="draw-guess-small-bg" ><div class="draw-guess-small" :style="styleData.drawGuessSmall" :class="getTableTextCss()">小</div> </div>
      <div class="draw-guess-big-select" :style="styleData.drawGuessBigSelect" @click="selectBigOrSmall('big')">
        <div
          class="draw-guess-select-big"
          :style="styleData.drawGuessSelectBig"
          v-if="tableStatues == 2 && guessSelect.isBig == true"
        >
          <img :src="guessSelect.jifenImg" />
          <img
            @click.stop="closeSelectBtn"
            class="draw-close-guess"
            :style="styleData.drawCloseGuess"
            :src="datas.closeImg || closeImg"
          />
        </div>
      </div>
      <div class="draw-guess-small-select" :style="styleData.drawGuessSmallSelect" @click="selectBigOrSmall('small')">
        <div
          class="draw-guess-select-small"
          :style="styleData.drawGuesSselectSmall"
          v-if="tableStatues == 2 && guessSelect.isBig == false"
        >
          <img :src="guessSelect.jifenImg" />
          <img
            @click.stop="closeSelectBtn"
            class="draw-close-guess"
            :style="styleData.drawCloseGuess"
            :src="datas.closeImg || closeImg"
          />
        </div>
      </div>
    </div>
    <div class="draw-guess-jifen" :style="styleData.drawGuessJifen">
      <div
        v-for="(item, index) in jifenArr"
        :key="index"
        class="draw-guess-jifen-item"
        :style="styleData.drawGuessJifenItem"
        v-bind:class="{ active: item.active && tableStatues != 2 }"
        @click="changeJifenActive(index)"
      >
        <img :src="item.jifenImg" style="width:100%"/>
      </div>
    </div>
    
    <div
      class="draw-play-btn"
      :style="canPlayGame() ?styleData.drawPlayBtn:styleData.btndisable"
      @click="guess()"
    >
    </div>
    <div class="draw-text" :style="styleData.drawText">
      点击积分，进行押注，赢了可获得{{integralMode.integralMultiple}}倍奖励哦！
    </div>
    <div v-if="drawStatus == 3" :style="styleData.drawText">
      今日还剩
      <span style="color:red">{{drawNum}}</span>
      次下注机会
    </div>
    <div v-if="drawStatus == 1" :style="styleData.drawText">已达到每天抽奖次数上限，感谢您的参与～</div>
    <div v-if="drawStatus == 2" :style="styleData.drawText">已达到活动抽奖次数上限，感谢您的参与～</div>
    
  </div>
</template>
<script>
import dateUtil from "../../../util/dateUtil.js";

import store from "../../../store/store";
import { goToShopPage } from "../../../util/tools.js";
import apis1 from "../../../util/apis1.js";
let { getIntegralInfo, pointsDraw,followShop,storeGoodsPoint,doGame } = apis1;
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
  noticePopComService
} from "../../../util/hdzxtcomCreate.js";
export default {
  props: ["isTemplate", "datas", "keyData", "styleData", "templateData","isWebClick", "modifyContent"],
  components: {},
  data() {
    return {
    integralMode:{
      nickName:"jd*********jd",
      integralBalance:1000,
      userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/9529/39/3166/1273/5bd67241E2d74c9d5/19440fb8b44dd788.png'
    },
    lotteryText:'', // 是否可以抽奖提示
    needFollow: "0", // 关注店铺开始按钮样式 0不显示关注 1显示关注
    isCustomSwitching:"", //有tab切换时
    diceStatus: 1, //1ready,2moving,3end 骰子转动转态
    diceEndNum: 1, // 顶部骰子显示数
      tableStatues: 0, //0没有选择，1选择了积分，2选择了大小
      isPlaying: false, // 防止重复点击摇骰子
      guessSelect: {
        jifenNum: 10, // 押注积分
        jifenImg: "",
        isBig: false, // true为大 false为小
      },

      prizeResultData: {
        styleData: {},
        datas: {
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          prizeType: 4,
          prizeName: "积分",
          priceInfo: 0,
        },
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      closeImg:"https://img10.360buyimg.com/imgzone/jfs/t1/119134/15/29011/1886/62fda054E90943986/060e0629da540f4f.png",
      jifenTitleImg:
        "https://img10.360buyimg.com/imgzone/jfs/t1/189442/18/9417/788/60d18787Ecabfef2a/4a71558c92e7204d.png",
      // 押大小区域框图片
      bigOrsallImg:
        "https://img10.360buyimg.com/imgzone/jfs/t22867/96/2659946120/26131/b142695e/5b87c1d6N6e469de1.png",
      clossButtonImg:
        "https://img10.360buyimg.com/imgzone/jfs/t24448/17/2589229455/492/b3aba712/5b875dbeN336a379b.png",
      // 筹码list
    jifenArr: [
        {
          jifenNum: 5,
          jifenImg:this.datas.jifenImg5,
          active: false,
        },
        {
          jifenNum: 10,
          jifenImg:this.datas.jifenImg10,
          active: false,
        },
        {
          jifenNum: 20,
          jifenImg:this.datas.jifenImg20,
          active: false,
        },
        {
          jifenNum: 50,
          jifenImg:this.datas.jifenImg50,
          active: false,
        },
      ],
      drawStatus:0,
      drawNum:0,

    };
  },

  created() {
    this.initData();
     //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
  },
  mounted(){
    console.log(this.defaultDatas,'defaultDatasdefaultDatas')
  },

  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.isCustomSwitching, //有tab切换时
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var datasAll = this.templateData;
      console.log(datasAll,'datasAlldatasAlldatasAll')
      if (this.isTemplate == true) {
        if (datasAll) {
         this.integralMode = datasAll.drawChanceData
         this.integralMode.nickName = "jd*********jd"
         this.integralMode.integralBalance = 1000
         this.integralMode.userImg = 'https://img10.360buyimg.com/imgzone/jfs/t1/9529/39/3166/1273/5bd67241E2d74c9d5/19440fb8b44dd788.png'
        } else {
          this.integralMode.integralMultiple = 2
         this.integralMode.nickName = "jd*********jd"
         this.integralMode.integralBalance = 1000
         this.integralMode.userImg = 'https://img10.360buyimg.com/imgzone/jfs/t1/9529/39/3166/1273/5bd67241E2d74c9d5/19440fb8b44dd788.png'
        }
      } else {
        let params ={
            prd:this.$route.query.prd,
            actType:Number(this.$route.query.activityType)
          }
        console.log(this,'recordData.data.nickName1111');
        getIntegralInfo(params,(recordData) => {
          console.log(this,recordData.data.nickName,'recordData.data.nickName');
          if (recordData.data) {
           this.integralMode = recordData.data
           this.drawStatus = recordData.data.drawStatus
           this.drawNum = recordData.data.drawNum
          } else {
          }
         
        });
      }
    },
    // 骰子动态转动
    getDiceStatus() {
      if (this.diceStatus == 1) {
        return "ready";
      } else if (this.diceStatus == 2) {
        return "moving";
      } else {
        console.log(this.diceEndNum,'this.diceEndNumthis.diceEndNum')
        return "end" + this.diceEndNum;
      }
    },
    // 选择积分样式
    changeJifenActive(num) {
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      if(this.isWebClick){
        return
      }
      if (this.tableStatues == 2) {
        return;
      }
      this.tableStatues = 1;
      this.jifenArr.forEach(function (item, index, arr) {
        item.active = false;
        if (index == num) {
          item.active = true;
        }
      });
    },
    // 大小抖动样式
    getTableTextCss() {
      if (this.tableStatues == 1) {
        return "textmove";
      } else {
        return "";
      }
    },
    // // 获取title显示
    // getTableTitle() {
    //   if (this.tableStatues == 0) {
    //     return "请选择积分筹码";
    //   } else if (this.tableStatues == 1) {
    //     return "请选择大或小区下注";
    //   } else if (this.tableStatues == 2) {
    //     return "点击 X 符号取消下注";
    //   }
    // },
    // 选择压小
    selectBigOrSmall(type) {
      var _this = this;
      if (this.tableStatues != 1) {
        return;
      }
      this.jifenArr.forEach(function (item, index, arr) {
        if (item.active == true) {
          _this.guessSelect.jifenImg = item.jifenImg;
          _this.guessSelect.jifenNum = item.jifenNum;
        }
      });
      if (type == "big") {
        this.tableStatues = 2;
        this.guessSelect.isBig = true;
      } else {
        this.tableStatues = 2;
        this.guessSelect.isBig = false;
      }
    },
    // 移除押大小
    closeSelectBtn() {
      this.tableStatues = 1;
      this.guessSelect.jifenNum = 0;
    },
    // 页面按钮
    canPlayGame() {
      console.log(this.tableStatues ,this.guessSelect.jifenNum)
      if (
        this.tableStatues == 2 &&
        this.guessSelect.jifenNum != 0 &&
        this.integralMode.integralBalance >= this.guessSelect.jifenNum 
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 页面显示初始化
    startStatus() {
      this.diceStatus = 1;
      this.tableStatues = 0;
      this.guessSelect = {
        jifenNum: 0,
        jifenImg: "",
        isBig: false,
      };
      this.jifenArr.forEach(function (item, index) {
        item.active = false;
      });
    },

    // showResult(data) {
    //   var _this = this;
    //   setTimeout(function () {
    //     _this.isPlaying = false;
    //   }, 1000);
    // },
    //猜大小
    guess() {

    
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      if(this.guessSelect.jifenNum > this.integralMode.integralBalance){
        this.$toast("当前积分不足，进店逛逛吧~");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      if (this.isPlaying) {
        return;
      }
      if(!this.canPlayGame()){
        return;
      }
      if(this.lotteryText && this.lotteryText != ''){
        this.$toast(this.lotteryText);
        return;
      }
      if (this.needFollow == 1) {
            followShop((initdatas) => {});
        }
        this.isPlaying = true; // 开始按钮不可点
 
      let params ={
        size: this.guessSelect.isBig ? '1' : '0',
        consumeIntegral:this.guessSelect.jifenNum
      }
    const _this = this;
     doGame(params,(datas) =>{
       console.log(datas.data,'datadata')
        this.diceStatus = 2; //骰子开始动
       if(datas.resp_code == 0){
         setTimeout(function () {
             _this.initData()
            _this.diceStatus = 3; // 骰子停止转动
            _this.diceEndNum = datas.data.diceNum; // 显示骰子数
            _this.integralMode.integralBalance = datas.data.integralBalance
            _this.getDiceStatus()
            if (datas.data.points > 0) {
              _this.prizeResultData.datas.prizeName = datas.data.points + '积分';
              setTimeout(function () {
                _this.fulfillHandle(
                  _this.prizeResultData,
                  _this.prizeResultData
                );
              }, 1000);
             
            } else {
              setTimeout(function () {
                _this.diceStatus = 3; // 骰子停止转动
                _this.diceEndNum = datas.data.diceNum; // 显示骰子数
                _this.getDiceStatus()
                if(datas.data.everyDay && datas.data.everyDay != ''){
                  _this.$toast(datas.data.everyDay)
                  _this.isPlaying = false
                  _this.lotteryText = datas.data.everyDay

                } else{
                   _this.fulfillHandle("未中奖");

                }
                
                
              }, 1000);
            }
          }, 1000);
       }else if(datas.resp_code == 73002 || datas.resp_code == 73001){
        setTimeout(function(){
          noticePopComService.create(
            datas.resp_msg,
              (submit) => {
                noticePopComService.close();
              }
          );
          _this.diceStatus = 1; // 骰子停止转动
          _this.getDiceStatus()
          _this.isPlaying = false
        },1000)
       }

     })
    },
    enterstore() {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      document.querySelector("body").removeAttribute("style");
      console.log("进入商店");
      let shopId = store.state.shopId;
      storeGoodsPoint(4)
      goToShopPage(shopId);
    },

    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      if (prizeData == "未中奖") {
        NoPrizeResultPopComService.create(
         this.styleData,
          (submit) => {
            NoPrizeResultPopComService.close();
            this.isPlaying = false;
            
          }
        );
      } else {
        //中奖
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          this.styleData,
          (submit) => {
            PrizeResultPopComService.close();
            this.isPlaying = false;
          }
        );
      }
    },

  },
};
</script>
<style lang="scss" scoped>
.draw-guess-big-bg{
  position: absolute;
  z-index: 1;
    top: 1.31rem;
    left: 0.46rem;
}
.draw-guess-big-bg::before{
  content:'大';
  position: absolute;
  top: calc(50% - .75rem);
  left: calc(50% - .55rem);
  font-size: 1.08rem;
  font-family: SourceHanSansCN;
  -webkit-text-stroke:0;
  font-weight: bold;
  color: #dae0f3;
  z-index: 0;
  
}
.draw-guess-small-bg{
  position: absolute;
  z-index: 1;
    top: 1.31rem;
    right: 0.46rem;
}
.draw-guess-small-bg::before{
  content:'小';
  position: absolute;
  top: calc(50% - .75rem);
  left: calc(50% - .55rem);
  font-size: 1.08rem;
  font-family: SourceHanSansCN;
  -webkit-text-stroke:0;
  font-weight: bold;
  color: #fff2d1;
  z-index: 0;
  
}
.draw-guess-big.textmove,
.draw-guess-small.textmove {
  animation: tada 1s infinite;
}
.draw-guess-jifen-item.active {
  transform: scale(1.2);
}
#appC .dice-content.moving {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/33377/24/16189/62218/62fca1e4E51fa47b8/de809833e5c8a1e6.png");
  -webkit-animation: movingDice 0.4s steps(4) infinite;
  animation: movingDice 0.4s steps(4) infinite;
}
#appC .dice-content.ready {
  animation: readyRotateIn 1s;
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/220744/38/21092/7874/62fc9b13E598134b7/5edcfe7a68680a91.png") !important;
}

.dice-content{
    animation: wobbleDick 1s infinite;

}
@keyframes readyRotateIn {
  0% {
    transform-origin: center;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    opacity: 0;
  }
  40% {
    transform-origin: center;
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)
      rotate(-200deg);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
  to {
    transform-origin: center;
    opacity: 1;
  }
}

#appC .dice-content.end1 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/84250/10/22078/13343/6303344dE3e8f1403/b4eea20dd68c8f6c.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end2 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/157195/20/29762/14072/6303344dEc9e78d96/dc5291effd7dafde.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end3 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/144263/12/28577/13937/6303344dEd1a946a5/7eb8d6827787d05a.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end4 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/171399/36/29218/14397/6303344dE79b01ddb/c232775f37daceea.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end5 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/67768/13/21567/14871/6303344dEf559d9f5/4524af2a79437030.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end6 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/146488/15/29196/14854/6303344eEa41c0b89/5a153da20b992c94.png") !important;
  animation: tada 1s;
}
@-webkit-keyframes movingDice {
 from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes movingDice {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}
@keyframes wobbleDick {
  0% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.draw-guess-select-big img,.draw-guess-select-small img{
  width: 100%;
}

</style>