<template>
  <div :style="styleData.maskStyleAll">
    <div
      :key="timer"
      :style="styleData.maskStyle"
      class="maskStyle"
      v-show="isShow"
      ref="winnersRecord"
      @click="styleClick('click', 'winnersRecord')"
      @mousemove="styleClick('mousemove', 'winnersRecord')"
      @mouseout="styleClick('mouseout')"
    >
      <!-- <div class="mainStyleDiv" :style="flag?flag2?flag3?styleData.mainStyleDiv:styleData.hasStyleDiv:styleData.noStyleDiv:styleData.dontStyleDiv"> -->
      <!-- flag 0 立即领取 1 已领取 2未入榜 3 已领完 4：未到开奖时间-->
      <div v-if="nowTime>=endTime" class="mainStyleDiv" :style="[nowTime<(endTime+300000)?styleData.timeStyleDiv:flag=='0'?styleData.mainStyleDiv:flag=='1'?styleData.mainStyleDiv:flag=='2'?styleData.dontStyleDiv:styleData.mainStyleDiv]">

        <div v-if="flag==1&&nowTime>(endTime+300000)" :style="styleData.hasBtnStyleDiv"></div>
        <div v-if="flag==3&&nowTime>(endTime+300000)" :style="styleData.noBtnStyleDiv"></div>
        <div v-if="flag==2&&nowTime>(endTime+300000)" :style="styleData.dontBtnStyleDiv"></div>

        <div v-if="flag!=2&&nowTime>(endTime+300000)" :style="styleData.rankingLeft">您获得: 第{{ranking}}名</div>

        <div v-if="flag!=4&&nowTime<(endTime+300000)" :style="styleData.rankingLeft">排名正在进行中！</div>

        <div :style="styleData.mainBtnStyleDiv" v-if="flag==0&&nowTime>(endTime+300000)" @click="drawprize()" class="goBtn"></div>
        <img
          v-if="closeImg"
          class="closeImg"
          @click="closeClick"
          :style="styleData.closeImgStyle"
          :src="closeImg"
        />
        <div class="recordListDiv" :style="styleData.recordListDiv">
          <div v-if="nowTime>(endTime+300000)">
            <div v-if="winRcordListData.length > 0">
              <div v-for="(it,i) in winRcordListData" :key="i" :style="styleData.inListDiv">
                <div :style="styleData.flexDiv">
                  <div v-if="i==0" :style="styleData.firstDiv"></div>
                  <div v-else-if="i==1" :style="styleData.secondDiv"></div>
                  <div v-else-if="i==2" :style="styleData.thirdDiv"></div>
                  <div v-else :style="styleData.otherDiv">{{i+1}}</div>
                  <img :style="styleData.imgDiv" :src="it.userHeadImg">
                  <span :style="styleData.nameDiv">{{it.userNickName}}</span>
                </div>
                <div>
                  <div :style="styleData.inviteDiv">邀请好友人数:<span :style="styleData.numDiv">{{it.inviteNum}}</span>人</div>
                </div>
              </div>
            </div>
            <div v-else class="noData" :style="record"></div>
          </div>
           <div v-else class="noData" :style="record"></div>
          <div v-if="isShowtututu && winRcordListData.length <= 0">
            <img :style="failimg" :src="keyData.noneimage" alt="图片加载失败" />
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import dataJson from "../../../../src/data.json";
import styleJson from "./winnersRecord.json";
import apis1 from "../../../util/apis1.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
  PrizeResultRankPopComService
} from "../../../util/comCreate.js";
let {
  getInviteRanking,
  immediatelyDraw,
  inviteFollowShop, } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      nowTime:'',
      ranking:'1',
      flag:'0',
      endTime:'',
      timer: new Date().getTime(),
      isOpenTouch: false,
      isShowtututu: false, //暂无数据图片
      failimg: "", //暂无数据图片样式
      record: "", //暂无数据文字样式
      mainStyleDiv: "", //背景样式
      winRecordImg: "", //标题背景样式
      recordListStyle: "", //列表样式
      recordItemStyle: "", //列表item样式
      recordItemLeftStyle: "", //列表左面样式
      recordItemRight: "", //列表右面样式
      userImgImg: "", //获奖人头像
      maskStyle: "", //幕布样式
      closeImgStyle: "", //关闭图片样式
      userImg:
        "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
      winRcordListData: [
          ],
      isShow: false,

      titleImage: "", //标题图片
      closeImg: "", //关闭图片
      styleDataOld: {},
      isPlayType:false,
      prizeInfoId:'',
    };
  },
  watch: {
    styleData: {
      handler(val) {
        console.log("styleData", val);
        this.styleData = val;
        this.$forceUpdate();
      },
      deep: true,
    },
  },

  created() {
    this.nowTime = new Date().getTime()
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    console.log("styleData7777", this.styleData);
    //如果父组件传递过来的样式数据则使用样式数据否则使用默认数据

    this.datas = this.datas ? this.datas : this.datasCom;
    this.styleData = this.styleData ? this.styleData : this.styleDataCom;
    this.keyData = this.keyData ? this.keyData : this.keyDataCom;
    this.isShowtututu = this.datas.isShowtututu;
    this.failimg = this.styleData.failimg;
    this.record = this.styleData.record;

    this.titleImage = this.datas.titleImage;

    console.log(this.datas, "dsfhglsadf");
    this.isShow = this.datas.isShowRecord;

    //是否显示重新调用接口
    // this.publicData.$on("isNotyFiceWinnerReorrd", (datas, isTemplate) => {
    //   this.isTemplate = isTemplate;
    //   if (datas == true) {
    //     this.isShow = true;
    //     this.initData();
    //   } else {
    //     this.isShow = false;
    //   }
    // });
    // this.publicData.$on("showCarouselimg", (datas) => {
    //   console.log(datas);
    //   if (datas == false) {
    //     this.isShow = true;
    //   } else {
    //     this.isShow = false;
    //   }
    // });

    this.closeImg = this.datas.closeImg;
    this.initData();
    this.timer = new Date().getTime();
  },
  methods: {
    // 领取排行奖品
    //立即领取点击按钮
    drawprize(index, itemData, type) {
      console.log(this.flag);
      if (type == 0) {
        Toast("很抱歉,奖品领取已达规定上限");
        return;
      } else if (type == 1) {
        Toast("您未达到领取条件~");
        return;
      } else if (type == 3) {
        Toast("奖品已发完~");
        return;
      }
      if (this.isPlayType) {
        return;
      }
      this.isPlayType = true;
      if (this.isTemplate) {
          this.$toast("活动预览，仅供查看");
          return;
      } else if (!this.isTemplate) {
        let actStatus = sessionStorage.getItem("actStatus");
        if (actStatus == 1) {
          Toast("活动尚未开始");
          return;
        } else if (actStatus == 2) {
          Toast("活动已结束");
          return;
        }
        console.log(this.prizeInfoId, "领奖中");
        immediatelyDraw(this.prizeInfoId, (receiveData) => {
          console.log(receiveData, "领奖中");
          // console.log(itemData);
          if (receiveData.resp_code == 0) {
            this.isPlayType = false;
            if (receiveData.data.result == true) {
              this.initData();
              var obj = {
                datas: {},
                keyData: {
                  prizeUrl: "showImg",
                  prizeName: "prizeName",
                  prizeType: "prizeType",
                  priceInfo: "priceInfo",
                  discountType: "discountType",
                  couponType: "couponType",
                },
              };
              obj.datas = receiveData.data;
              console.log(obj, "obj");
              PrizeResultPopComService.create(
                obj,
                receiveData.data,
                (submit) => {
                  console.log(submit);
                  PrizeResultRankPopComService.close();
                }
              );
            } else {
              NoPrizeResultPopComService.create(
                "抱歉您与奖品擦肩而过~",
                "//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png",
                (submit) => {
                  NoPrizeResultPopComService.close();
                }
              );
              this.initData();
            }
          } else {
            this.isPlayType = false;
            // this.prizeList[index].status = 3;
            this.$toast("奖品已领完，下次早点哦");
          }
        });
      }
    },
    //点击可修改位置的方法
    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);
      }
    },
    // showDialog(){

    // },
    closeClick() {
      this.isShow = false;
    },

    initData() {
      var datasAll = this.templateData;
      console.log(this.isTemplate, "this.isTemplate");
      console.log(datasAll, "datasAllthis.isTemplate");
      if (this.isTemplate == true) {
        if (this.isWebClick) {
          this.winRcordListData = [
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "z***撒",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "a***3",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "李***云",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***3",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***8",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***3",
              inviteNum: "500",
            },
          ]; //获奖名单
        } else {
          // if (!datasAll) {
          this.winRcordListData = [
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "z***撒",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "a***3",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "李***云",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***3",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***8",
              inviteNum: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***3",
              inviteNum: "500",
            },
          ]; //获奖名单
          // }
        }
      } else {
        //去请求接口
        if (this.isShow) {
          getInviteRanking((initDtasAll) => {
            this.flag = initDtasAll.data.status;
            this.ranking = initDtasAll.data.ranking;
            this.winRcordListData = initDtasAll.data.taskRankUserRecordDTOList;
            this.endTime = initDtasAll.data.settlementStartTime;
            this.prizeInfoId = initDtasAll.data.prizeInfoId
            this.publicData.$emit('getEndTime', this.endTime);
            console.log(this.nowTime<(this.endTime+300000));
            if(this.nowTime<(this.endTime+300000)){
              if(this.winRcordListData.length!=0){
                for (var i = 0; i < this.winRcordListData.length; i++) {
                  this.winRcordListData[i].userNickName =
                    this.winRcordListData[i].userNickName.substr(0, 1) +
                    "***" +
                    this.winRcordListData[i].userNickName.substr(-1, 1);
                }
              }
            }
           });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.mainStyleDiv {
  .noData {
    font-size: 0.24rem;
    width: 100%;
    color: #8c8c8c;
    height: calc(100% - 0.3rem);
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.recordListDiv::-webkit-scrollbar {
  width: 0;
}
.maskStyle {
  position: relative;
}
.goBtn{
  width: 1.5rem;
  height: .5rem;
  position: absolute;
  right: 0.45rem;
  top: 1.22rem;
}
@keyframes rowup {
  0% {
    transform: translate3d(0, 300px, 0);
  }
  100% {
    transform: translate3d(0, -300px, 0);
  }
}
</style>
