<template>
  <div :style="styleData.drawUserInfodiv" ref="integralSize"
    @click="styleClick('click', 'integralSize')"
    @mousemove="styleClick('mousemove', 'integralSize')"
    @mouseout="styleClick('mouseout')">
        <div class="draw-user-info" :style="styleData.drawUserInfo">
      <div class="draw-user-name" :style="styleData.drawUserName">
        <img class="userTouxiang" :src="attrTouXiang" :style="styleData.userTouxiang"/>
        <span :style="styleData.userName">{{
          userInfo.nicknameShow
        }}</span>
      </div>
      <div class="draw-user-jifen" :style="styleData.drawUserJifen">
        <img class="userTouxiang" :src="jifenTitleImg" :style="styleData.userTouxiang"/><span>积分余额 : </span
        ><span :style="styleData.myjifenspan"
          >{{ myjifen }}</span
        ><span> 积分</span>
      </div>
    </div>
    <div class="draw-guess-table" :style="styleData.drawGuessTable">
      <div :style="styleData.bigOrsallImg"></div>
      <div class="draw-guess-table-title" :style="styleData.drawGuessTableTitle">{{ getTableTitle() }}</div>
      <div class="draw-guess-big" :style="styleData.drawGuessBig" :class="getTableTextCss()">大</div>
      <div class="draw-guess-small" :style="styleData.drawGuessSmall" :class="getTableTextCss()">小</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="clossButtonImg"
          />
        </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="clossButtonImg"
          />
        </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 v-if="limitTimes > 0" class="draw-guess-today-chance" :style="styleData.drawGuessTodayChance">
      今天剩余<span :style="styleData.lottery">{{
        limitTimes - guessCount > 0 ? limitTimes - guessCount : 0
      }}</span
      >次开奖机会
    </div>
    <div class="dice-content" :style="styleData.diceContent" :class="getDiceStatus()"></div>
    <div
      v-show="canPlayGame()"
      class="draw-play-btn"
      :style="styleData.drawPlayBtn"
      @click="guess"
      v-if="needFollow == '0'"
    >
      点击开始
    </div>
    <div
      v-show="canPlayGame()"
      class="draw-play-btn"
      :style="styleData.drawPlayBtn"
      @click="guess"
      v-if="needFollow == '1'"
    >
      关注店铺点击开始
    </div>

    <div class="draw-play-btn btndisable" :style="[styleData.drawPlayBtn,styleData.btndisable]" v-show="!canPlayGame()">
      <template v-if="myjifen >= guessSelect.jifenNum"> 下注后开始 </template>
      <template v-else>
        <a :style="styleData.enterstoreA" href="javascript:;" v-lz-click="'4'" @click="enterstore()"
          >积分不足 进店逛逛</a
        >
      </template>
    </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 { getPoints, pointsDraw,followShop,pointGuessResult,storeGoodsPoint } = apis1;
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/comCreate.js";
export default {
  props: ["isTemplate", "datas", "keyData", "styleData", "templateData","isWebClick", "modifyContent"],
  components: {},
  data() {
    return {
      styleDataOld:{},
      isCustomSwitching:"", //有tab切换时
      nickname: "",
      needFollow: "0", // 关注店铺开始按钮样式 0不显示关注 1显示关注
      attrTouXiang:
        "https://img10.360buyimg.com/imgzone/jfs/t1/9529/39/3166/1273/5bd67241E2d74c9d5/19440fb8b44dd788.png", //默认用户头像
      multiple: 2, //奖励倍数
      canGuess: true, //是否可以猜大小
      limitTimes: 0, //限制次数 0表示不限制
      guessCount: 0, //今天玩的次数
      myjifen: 0, //用户的积分
      userInfo: {
        nicknameShow: "预览",
      }, // 用户信息
      shopInfo: {}, //店铺信息
      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",
        },
      },

      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:
            "https://img10.360buyimg.com/imgzone/jfs/t22930/43/2552985313/4858/6e889304/5b875dbeNdb0e8bd3.png",
          active: false,
        },
        {
          jifenNum: 10,
          jifenImg:
            "https://img10.360buyimg.com/imgzone/jfs/t23935/87/2597170037/4750/c377921a/5b875dbeN55cb945d.png",
          active: false,
        },
        {
          jifenNum: 20,
          jifenImg:
            "https://img10.360buyimg.com/imgzone/jfs/t26917/87/158589208/4871/e1d7caf7/5b875dbeNf5270b5b.png",
          active: false,
        },
        {
          jifenNum: 50,
          jifenImg:
            "https://img10.360buyimg.com/imgzone/jfs/t27148/82/158302604/4891/9ede71a8/5b875dbeNa6871047.png",
          active: false,
        },
      ],
    };
  },

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

  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);
      }
    },
    async initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        if (datasAll) {
          console.log(datasAll);
          if (datasAll.drawChanceData.mostPartakeCount) {
            this.limitTimes = datasAll.drawChanceData.mostPartakeCount;
          }
            if (datasAll.activeConditions.involvementFlag == 1) {
              this.needFollow = 1;
            }
            this.myjifen = 10;
        } else {
          this.limitTimes = 1;
          this.myjifen = 10;
        }
      } else {
        await getPoints((datas) => {
          this.userInfo.nicknameShow = datas.data.nickName;
          this.limitTimes = datas.data.limitTimes;
          //去请求接口 获取已抽奖次数
        pointGuessResult((recordData) => {
          console.log(recordData);
          if (recordData.data) {
            this.guessCount = recordData.data.length
          } else {
            this.guessCount = 0;
          }
         
        });
          // this.guessCount = datas.data.guessCount;
          this.attrTouXiang = datas.data.userImg;
          this.myjifen = datas.data.poorScore;
          this.needFollow = datas.data.needFollow;
          // 测试用
          //  this.myjifen = 1000;
          console.log(this.nicknameShow);
        });
      }
    },

    // 骰子动态转动
    getDiceStatus() {
      if (this.diceStatus == 1) {
        return "ready";
      } else if (this.diceStatus == 2) {
        return "moving";
      } else {
        return "end" + this.diceEndNum;
      }
    },
    // 选择积分样式
    changeJifenActive(num) {
      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() {
      if (
        this.tableStatues == 2 &&
        this.guessSelect.jifenNum != 0 &&
        this.myjifen >= this.guessSelect.jifenNum &&
        (this.limitTimes == 0 || this.limitTimes > this.guessCount)
      ) {
        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;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      if (this.isPlaying) {
        return;
      }
      // 判断是否符合抽奖条件
      if (!this.canPlayGame()) {
        this.$toast("暂时不符合游戏条件");
        return;
      }
      if (this.needFollow == 1) {
            followShop((initdatas) => {});
        }
        this.isPlaying = true; // 开始按钮不可点
      var _this = this;

     
      var point = this.guessSelect.jifenNum; //押注积分
      var size = this.guessSelect.isBig ? 1 : 0; // 1为大  0为小
      pointsDraw(point, size, (datas) => {
        console.log(datas);
        if (datas.resp_code == 50009) {
          this.$toast("活动已结束");
          this.isPlaying = false;
          return;
        }
        if (datas.data.rtnFlg == 2) {
          this.$toast("积分不足,不可抽奖");
          this.isPlaying = false;
          return;
        }
        if (datas.data.rtnFlg == 3) {
          this.$toast("游戏火爆中，请稍后再试");
          this.isPlaying = false;
          return;
        }
        this.diceStatus = 2; //骰子开始动
        _this.guessCount++;
        if (datas.data.rtnFlg == 1) {
          setTimeout(function () {
            _this.diceStatus = 3; // 骰子停止转动
            _this.diceEndNum = datas.data.diceNum; // 显示骰子数
            if (datas.data.points > 0) {
              _this.prizeResultData.datas.prizeName =
                datas.data.points + _this.prizeResultData.datas.prizeName;
              _this.prizeResultData.datas.priceInfo = datas.data.points;

              setTimeout(function () {
                _this.fulfillHandle(
                  _this.prizeResultData,
                  _this.prizeResultData
                );
              }, 1000);
             
            } else {
              setTimeout(function () {
                _this.fulfillHandle("未中奖");
              }, 1000);
            }
          }, 1000);
          _this.myjifen = _this.myjifen - point + datas.data.points;
        }
      });
    },
    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(
          "非常遗憾，您与大奖擦肩而过~",
          "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
          (submit) => {
            NoPrizeResultPopComService.close();
            this.isPlaying = false;
            
          }
        );
      } else {
        //中奖
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          (submit) => {
            PrizeResultPopComService.close();
            this.isPlaying = false;
             this.prizeResultData.datas.prizeName = "积分";
          }
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.draw-guess-big.textmove,
.draw-guess-small.textmove {
  animation: tada 1s infinite;
}
.draw-guess-jifen-item.active {
  transform: scale(1.4);
}
#appC .dice-content.moving {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t19129/231/426516753/70155/db5fd4f1/5a78668bNf4559ee7.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/t14596/96/2188990943/17174/a3a45e0f/5a78668bN30c288f8.png") !important;
}
@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/t16087/150/2019041475/15710/d0e41d0/5a78668bN0e57bfe6.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end2 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t14356/354/2167565867/16607/3b661c1/5a78668cN960929f4.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end3 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t16885/247/438272867/16179/c234d837/5a78668cNbcf5f26f.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end4 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t16279/96/1916958641/16909/71ffcf55/5a78668cN1c12ed0f.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end5 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t18631/179/462131108/17357/2cff87bc/5a78668cN12b03c68.png") !important;
  animation: tada 1s;
}

#appC .dice-content.end6 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t18508/194/460327619/17294/4725ff16/5a78668cNc9ba88de.png") !important;
  animation: tada 1s;
}
@-webkit-keyframes movingDice {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 100%;
  }
}

@keyframes movingDice {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 100%;
  }
}
</style>