<template>
  <div ref="pointsPkNew" 
    @click="styleClick('click', 'pointsPkNew')"
    @mousemove="styleClick('mousemove', 'pointsPkNew')"
    @mouseout="styleClick('mouseout')">
    <div>
      <div :style="styleData.coupondiv">
        <div class="couponul">
          <div class="couponlistitem" :style="styleData.couponlistitem">
            <div class="couponlistitemTitle" :style="styleData.couponlistitemTitle"></div>
            <div class="itemTitle" :style="styleData.itemTitle">
              {{ pkData.pkTheme }}
            </div>
            <div class="pkTime-box" v-if="!activityStatus"></div>
            <div  class="itemImg" :style="styleData.itemImg">
              <div>
                <div class="imgDiv" :style="styleData.imgDiv">
                  <div v-if="imgStatue === 1 || imgStatue === 3" :style="styleData.imgDivBlue"></div>
                  <div v-if="imgStatue === 2" :style="styleData.imgDivGary"></div> 
                  <img
                  class="showImageLeftSrc"
                  :style="styleData.showImageLeftSrc"
                  :src="pkData.pkFirImg"
                />
                <div class="imgTextBox" :style="styleData.imgTextBox" >
                  <div class="imgText" :style="imgStatue === 1 || imgStatue === 3 ? [styleData.imgText,styleData.whiteText] : styleData.imgText">{{pkData.pkFirDescribe}}</div>
                  <div class="imgTextNum"  :style="imgStatue === 1 || imgStatue === 3 ? [styleData.imgTextNum,styleData.whiteText]: styleData.imgTextNum">{{pkData.pkFirImgNum}}票 </div>
                  <div class="activityStatus" :style="styleData.activityStatus" v-if="imgStatue === 2">败</div>
                  <div class="activityStatus" :style="styleData.activityStatus" v-if="imgStatue === 1">胜</div> 
                  <div class="activityStatus" :style="styleData.activityStatus" v-if="imgStatue === 3">平</div>
                </div>
                <div v-if="selectPkImg === '0'" class="selectPkImg" :style="styleData.selectPkImg"></div>
              </div>
                
                <button
                v-if="btnShow"
                  :style="pkImgType == '1'|| activityStatus? [styleData.pkBtn, styleData.pkBtnGary]:[styleData.pkBtn, styleData.pkBtnLeft]"
                  @click="voteClick(0)"
                ><van-icon name="good-job-o" v-if="leftGoodIconShow"/>
                <van-icon name="success" v-if="leftSuccessIconShow" />
                  {{pkImgLeftText}}
                </button>
              </div>
              <div>
                 <div class="imgDiv" :style="styleData.imgDiv" >
                 <div v-if="imgStatue === 2 || imgStatue === 3" :style="styleData.imgDivRed"></div>
                 <div v-if="imgStatue === 1" :style="styleData.imgDivGary"></div> 
                <img
                  :style="styleData.showImageLeftSrc"
                  :src="pkData.pkSecImg"
                />
                 <div class="imgTextBox" :style="styleData.imgTextBox">
                  <div class="imgText" :style="imgStatue === 2 || imgStatue === 3 ? [styleData.imgText,styleData.whiteText] : styleData.imgText">{{pkData.pkSecDescribe}}</div>
                  <div class="imgTextNum" :style="imgStatue === 2 || imgStatue === 3 ? [styleData.imgTextNum,styleData.whiteText]:styleData.imgTextNum">{{pkData.pkSecImgNum}}票</div>
                  <div class="activityStatus" :style="styleData.activityStatus" v-if="imgStatue === 1">败</div>
                  <div class="activityStatus" :style="styleData.activityStatus" v-if="imgStatue === 2">胜</div> 
                  <div class="activityStatus" :style="styleData.activityStatus" v-if="imgStatue === 3">平</div>
                </div>
                 <div v-if="selectPkImg === '1'" class="selectPkImg" :style="styleData.selectPkImg"></div>
              </div>
               <button
                 v-if="btnShow"
                  :style="pkImgType == '0' || activityStatus? [styleData.pkBtn, styleData.pkBtnGary]:[styleData.pkBtn, styleData.pkBtnRught]"
                   @click="voteClick(1)"
                  
                >
                 <!-- :disabled="isDisabled" -->
                <van-icon name="good-job-o" v-if="rightGoodIconShow" />
                <van-icon name="success" v-if="rightSuccessIconShow" />
                 {{pkImgRightText}}
                </button>
              </div>
             
              <div :style="styleData.pkImgs"></div>
            </div>
            <div v-if="status === 0">
               <div class="textHint" :style="styleData.textHint">{{pkData.integralCost}}积分投票一次 汇总入积分池</div>
              <div class="textHint" :style="styleData.textHint">活动结束时，投票多的一方瓜分积分池</div>
              <button @click="shareActivity()" class="inviteBtn" :style="activityStatus? styleData.inviteBtnGary:styleData.inviteBtn" :disabled="activityStatus">邀请好友来助力</button>
            </div>
            <div class="text"  v-if="status === 1">
              <div>
              <div class="textRiumphTilte">恭喜PK获胜</div>
              <div class="textRiumphWord">积分奖励已发送您的京东账户</div>
              <div class="textRiumphWord">会有5-10分钟的延时哦~</div>
              </div>
              
            </div>
            <div  class="text"  v-if="status === 2">
              <div class="textLose" >
              <div class="textLoseTilte">很遗憾，此次PK失败了~</div>
              <div class="textLoseWord">感谢您的参与~</div>
              </div>
            </div>
            <div class="text"  v-if="status === 3">
              <div class="textDogfall">
              <div class="textDogfallTilte">此次PK平局</div>
              <div class="textDogfallWord">您的{{pkData.integralCost}}积分已返还您的京东账户</div>
              <div class="textDogfallWord">会有5-10分钟的延时哦~</div>
            </div>
            </div>
            
            
             
          </div>
          <div class="couponlistitem" :style="styleData.couponlistitem" v-if="status === 0">
              <div class="couponlistitemTitle2" :style="styleData.couponlistitemTitle2"></div>
                <div class="itemTitle2" :style="styleData.itemTitle2">胜方瓜分 基础奖池</div>
                <div class="prizeImg" :style="styleData.prizeImg"></div>
                <div class="prizeNum" :style="styleData.prizeNum">{{pkData.pkIntegraTotal}}积分</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dateUtil from "../../../util/dateUtil.js";
import { allShare } from "../../../js/share.js";
import store from "../../../store/store";
import { goToShopPage } from "../../../util/tools.js";
import apis1 from "../../../util/apis1.js";
let { pkVote,queryPkActivity,getPkIntegral,storeGoodsPoint } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      leftGoodIconShow:true,
      leftSuccessIconShow:false,
      rightGoodIconShow:true,
      rightSuccessIconShow:false,
      pkImgType:'', // 当前选择状态0：选择左边1：选择右边
      btnShow:true, // 活动结束按钮不显示
      status:0, // 活动结果状态1：胜利2：失败3：平局
      imgStatue:0, // 活动结束后状态1：左边胜利2：右边胜利3：平局
      selectPkImg:2, // 活动结束后我得选择0：选择左边1：选择右边
      activityStatus:false, // 活动开始
      pkData:{
            pkIntegraTotal:0, // 积分奖池
            pkTheme:'', // 主题
            pkFirImg:'', // 左边图片
            pkFirImgNum:0,//左边总票数
            pkFirDescribe:'',// 左边文字
            pkSecImg:'', // 右边图片
            pkSecImgNum:0,// 右边总票数
            pkSecDescribe:'',//右边文字
            integralCost:'' // 消耗积分
      },
      isDisabled:false,
      pkImgLeftText:'投票',
      pkImgRightText:'投票',
      voteState:false,
    };
  },

  created(){
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.queryData();
  },

  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);
      }
    },
      queryData(){
         if (this.isTemplate) {
         if(this.templateData){
          this.pkData = this.templateData.activityCommonRule.rules
          this.pkData.pkFirImgNum =  0
          this.pkData.pkSecImgNum =  0
        }
        else{
       this.pkData = {
            pkIntegraTotal:1000, // 积分奖池
            pkTheme:'为您心目中的所爱投票', // 主题
            pkFirImg:'//img10.360buyimg.com/imgzone/jfs/t1/48892/12/18806/541515/629d937fE97b6d5a4/2892a12d56f29c90.png', // 左边图片
            pkFirImgNum:4,//左边总票数
            pkFirDescribe:'积分PK',// 左边文字
            pkSecImg:'//img10.360buyimg.com/imgzone/jfs/t1/48892/12/18806/541515/629d937fE97b6d5a4/2892a12d56f29c90.png', // 右边图片
            pkSecImgNum:3,// 右边总票数
            pkSecDescribe:'积分PK',//右边文字
            integralCost:'1' // 消耗积分
        }
      }
        return ;
      }
      if (this.isWebClick) {
           return;
         }
      
      queryPkActivity((datas) => {
        if(this.voteState){
         this.$toast("投票成功，请于投票结束后查看您是否获胜");
      }
          this.pkData = datas.data
          // 当前活动状态
          let activityTime = {startTime:datas.data.pkStartTime,endTime:datas.data.pkEndTime}
          this.publicData.$emit('activityPkTime',activityTime)
           this.pkImgType = datas.data.pkImgType 
           
          if(datas.data.pkStartTime > new Date().getTime()){
            this.isDisabled = true
            // 活动未开始或活动结束
            this.activityStatus = true 
            this.pkImgRightText ="未开始"
            this.pkImgLeftText ="未开始"
            this.rightGoodIconShow = false
            this.leftGoodIconShow = false
            this.rightSuccessIconShow = false
            this.leftSuccessIconShow = false
            // 用来判断当前选择那个 0：选择左边，1：选择右边
           
          } else {
            this.activityStatus = false
         // 是否已选择
          if(datas.data.userStatus === 1){
              this.isDisabled = true
              
              if(datas.data.pkImgType === '0'){
              this.pkImgLeftText = "已投票"
              this.pkImgRightText ="未投票"
              this.rightGoodIconShow = false
              this.leftGoodIconShow = false
              this.rightSuccessIconShow = false
              this.leftSuccessIconShow = true
          } else {
              this.pkImgRightText = "已投票"
              this.pkImgLeftText = "未投票"
              this.rightGoodIconShow = false
              this.leftGoodIconShow = false
              this.rightSuccessIconShow = true
              this.leftSuccessIconShow = false
          }
          } else {
               this.isDisabled = false
               this.pkImgLeftText = "投票"
                this.pkImgRightText ="投票"
                this.rightGoodIconShow = true
                this.leftGoodIconShow = true
                this.rightSuccessIconShow = false
                this.leftSuccessIconShow = false
          }
          }
          // 领奖
          if(datas.data.pkEndTime <=  new Date().getTime()){
             this.activityStatus = true
            this.status = datas.data.status
            // 活动结束我选择
            this.selectPkImg = datas.data.pkImgType
            this.isDisabled = true
            this.btnShow = false
            if(this.pkData.pkFirImgNum === this.pkData.pkSecImgNum){
              //平局
              this.imgStatue = 3
            } else if(this.pkData.pkFirImgNum > this.pkData.pkSecImgNum){
              //左边赢
              this.imgStatue = 1
            }else if(this.pkData.pkFirImgNum < this.pkData.pkSecImgNum){
              //右边赢
              this.imgStatue = 2
            }
            
          }
      })
      },
      // 投票
      voteClick(tyle){
         if (this.isWebClick) {
           return;
         }
         if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      if(this.pkImgType && (this.pkImgType === '0' || this.pkImgType === '1')){
        this.$toast("您已完成投票，请于投票结束后查看您是否获胜~");
         return;
      }
      if(this.pkData.pkStartTime > new Date().getTime()){
         this.$toast("活动尚未开始");
         return;
      }
          pkVote(tyle,(data) =>{
        if(data.data === 0){
         this.voteState = true
         this.queryData()
         
        } else{
          this.$toast("积分不够~");
        }
          })
      },
    // 进入店铺
    enterstore() {
      console.log("aaaa");
      if (this.isWebClick) {
           return;
         }
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      document.querySelector("body").removeAttribute("style");
      console.log("进入商店");
      let shopId = store.state.shopId;
      storeGoodsPoint(4)
      goToShopPage(shopId);
    },

    //邀请好友
    shareActivity() {
      if (this.isWebClick) {
           return;
         }
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");

      if (!this.isTemplate) {
        if (actStatus == 2) {
          // Toast
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          // Toast('活动尚未开始');
          return;
        }
        if (actStatus == 3) {
          // Toast('活动正在惊醒中');
          // this.share = 1
          allShare(this.isTemplate, this, (callBackData) => {
            console.log(callBackData, "callBackData");
          });
        }
      } else {
        this.$toast("活动预览，仅供查看");
      }
    },
  },
};
</script>
<style lang="scss" scoped>

.pk-bgcolour{
  // background-color: #5177FE;
}

.blue-btn{
    background-color: rgb(1,153,250) !important;
    color: #fff !important;
}
.red-btn{
     background-color: rgb(255,80,112) !important;
     color: #fff !important;
}

.couponul {
  margin: 0rem 0.3rem;
}

/*改变checkbox的样式*/
.input_check1 {
  position: absolute;
  width: 0.35rem;
  height: 0.35rem;
  visibility: hidden;
  background: #e92333;
}

span {
  position: relative;
}

.input_check1 + label {
  display: inline-block;
  width: 0.48rem;
  height: 0.23rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/16864/36/6919/798/5c64da62E85bbc1f3/b6c8f808ad128c9f.png")
    no-repeat center;
  background-size: 100%;
  float: left;
  margin-top: 0.21rem;
  margin-left: 0.355rem;
}

.input_check1:checked + label {
  width: 0.26rem;
  height: 0.19rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/8708/29/14463/267/5c64da6aE68d9ad32/903fa6f6006ac6b3.png")
    no-repeat center;
  background-size: 100%;
  margin-top: 0.25rem;
  margin-left: 0.45rem;
}
.pkTime-box{
  height: .6rem;
}
.textRiumphTilte{
  text-align: center;
  height: .4rem;
font-size: .42rem;
font-family: PingFang;
font-weight: bold;
color: #F2270C;
line-height: .36rem;
margin-bottom: .19rem;
}
.textRiumphWord{
  text-align: center;
  height:.33rem;
font-size: .24rem;
font-family: PingFang;
font-weight: 500;
color: #F2270C;
line-height: .36rem;
}
.text{
  min-height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;

}
.textLoseTilte{
  text-align: center;
  height: .4rem;
font-size: .42rem;
font-weight: bold;
color: #262626;
line-height: .36rem;
margin-bottom: .19rem;
}
.textLoseWord{
   text-align: center;
  height:.33rem;
font-size: .24rem;
font-weight: 500;
color: #8C8C8C;
line-height: .36rem;
}
.textDogfallTilte{
  text-align: center;
  height: .4rem;
font-size: .42rem;
font-weight: bold;
color: #FF9000;
line-height: .36rem;
margin-bottom: .19rem;

}
.textDogfallWord{
 text-align: center;
  height:.33rem;
font-size: .24rem;
font-weight: 500;
color: #FF9000;
line-height: .36rem;
}
.greyBg{
  filter: grayscale(100%);
}
</style>