<template>
  <div
    :key="timer"
    :style="styleData.maskStyle"
    class="maskStyle"
    v-show="isShow"
    ref="winnersRecordRankingOrderCourtesy"
    @click="styleClick('click', 'winnersRecordRankingOrderCourtesy')"
    @mousemove="styleClick('mousemove', 'winnersRecordRankingOrderCourtesy')"
    @mouseout.stop="styleClick('mouseout')"
  >
    <div class="mainStyleDiv" :style="rankStyle">
      <div v-if="flag!=2&&nowTime>= settlementStartTime" :style="styleData.rankingLeft">您获得:
        第{{ ranking }}名
      </div>
      <div v-if="nowTime<settlementStartTime-60*60*1000" :style="styleData.rankingLeft" >
        榜单每两小时更新~
        <div :style="styleData.rankingLeftWord" v-if="endNum">排名前{{ endNum }}名可领取奖品</div>
      </div>
      <div :style="styleData.rankingLeft" v-if="nowTime >= settlementStartTime-60*60*1000 && nowTime <= settlementStartTime">
        排名结算中
        <div :style="styleData.rankingLeftWord" v-if="endNum">排名前{{ endNum }}名可领取奖品</div>
      </div>
      <div v-if="flag==0 && nowTime >= settlementStartTime" :style="styleData.goBtn" @click="drawprize()" class="goBtn"></div>
      <div class="recordListDiv" :style="styleData.recordListDiv">
        <div v-if="winRcordListData.length && (nowTime < settlementStartTime-60*60*1000 || nowTime > settlementStartTime )">
          <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.rankData }}</span>元</div>
            </div>
          </div> 
        </div>
        <div
          v-if="winRcordListData.length <= 0 && nowTime < (settlementStartTime-60*60*1000)"
          class="noData">
          <img :src="datas.noneimage" alt="图片加载失败"/>
        </div>
        <div
          v-if="nowTime >= settlementStartTime-60*60*1000 && nowTime < settlementStartTime"
          class="noData">
          <img :src="datas.closeImg" alt="结算中"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService
} from "../../../util/hdzxtcomCreate.js";

let {
  orderCourtesyRanking,
  getMemderGetPrize,
} = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      nowTime: '',
      ranking: '1',
      flag: '0',// 0：可领取，1已领取2未入榜3领完了4不能领奖未领取
      endTime: '',
      timer: new Date().getTime(),
      isOpenTouch: 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: '',
      settlementEndTime: '',
      settlementStartTime: '',
      endNum: '',
      rankStyle:{}
    };
  },
  watch: {
    styleData: {
      handler(val) {
        console.log("styleData", val);
        this.styleData = val;
        this.$forceUpdate();
      },
      deep: true,
    },
    nowTime(val) {
      if (val == this.settlementStartTime || val == this.settlementEndTime) {
        window.location.reload()
      }
    }
  },
  mounted(){
    this.publicData.$on('endNum', endNum => {
      this.endNum = endNum
    })
  },
  created() {
    this.nowTime = new Date().getTime()
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    console.log("styleData7777", this.settlementEndTime - new Date().getTime());
    //如果父组件传递过来的样式数据则使用样式数据否则使用默认数据
    // this.activityType = sessionStorage.getItem("activityType");
    // if (this.activityType == 10031) {
    //   if (this.styleData && JSON.stringify(this.styleData) != "{}") {
    //     console.log(this.styleData, 333);
    //     this.styleData.winRecordImg.imageUrl = this.styleData.winRecordImg
    //       .imageUrl
    //       ? this.styleData.winRecordImg.imageUrl
    //       : this.datas.titleImage;
    //   } else {
    //     this.styleData = styleJson; //默认数据
    //   }
    // }

    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.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) {
        this.$toast("很抱歉,奖品领取已达规定上限");
        return;
      } else if (type == 1) {
        this.$toast("您未达到领取条件~");
        return;
      } else if (type == 3) {
        this.$toast("奖品已发完~");
        return;
      }
      if (this.isPlayType) {
        return;
      }
      this.isPlayType = true;
      if (this.isTemplate || this.isWebClick) {
        // this.$toast("活动预览，仅供查看");
        return;
      } else if (!this.isTemplate) {
        let actStatus = sessionStorage.getItem("actStatus");
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          return;
        } else if (actStatus == 2) {
          this.$toast("您来晚了，活动已结束");
          return;
        }
        console.log(this.prizeInfoId, "领奖中");
        sessionStorage.setItem('prizeInfoId', this.prizeInfoId);
        getMemderGetPrize(this.prizeInfoId, (receiveData) => {
          console.log(receiveData, "领奖中");
          // console.log(itemData);
          if (receiveData.resp_code == 0) {
            this.isPlayType = false;
            if (receiveData.data.result == true) {
              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,
                this.styleData,
                (submit) => {
                  console.log(submit);
                  PrizeResultPopComService.close();
                  this.initData()
                  this.publicData.$emit('pizereFresh', true)

                }
              );
            } else {
              NoPrizeResultPopComService.create(
                this.styleData,
                (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***撒",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "a***3",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "李***云",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***3",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***8",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***3",
              rankData: "500",
            },
          ]; //获奖名单
        }
        if (datasAll) {
          if (datasAll.rank.isOpen == 0) {
            this.isShow = false;
          } else {
            this.winRcordListData = [
              {
                userHeadImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
                userNickName: "z***撒",
                rankData: "500",
              },
              {
                userHeadImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
                userNickName: "a***3",
                rankData: "500",
              },
              {
                userHeadImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
                userNickName: "李***云",
                rankData: "500",
              },
              {
                userHeadImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
                userNickName: "j***3",
                rankData: "500",
              },
              {
                userHeadImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
                userNickName: "j***8",
                rankData: "500",
              },
              {
                userHeadImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
                userNickName: "j***3",
                rankData: "500",
              },
            ]; //获奖名单
          }
        } else {
          this.winRcordListData = [
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "z***撒",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "a***3",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "李***云",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***3",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***8",
              rankData: "500",
            },
            {
              userHeadImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              userNickName: "j***3",
              rankData: "500",
            },
          ]; //获奖名单
        }
      } else {
        //去请求接口
        orderCourtesyRanking((initDtasAll) => {
          if (initDtasAll.data.openStatus == 0) {
            this.isShow = false
            this.publicData.$emit('isOpen', '0')
          } else {
            this.isShow = true
            this.publicData.$emit('isOpen', '1')
            this.flag = initDtasAll.data.status;// 0：可领取， 1:已领取，2：未入榜，3：奖品已发完，4：未到开奖时间
            this.ranking = initDtasAll.data.ranking;
            this.winRcordListData = initDtasAll.data.taskRankUserRecordDTOList;

            this.settlementStartTime = initDtasAll.data.settlementStartTime;
            sessionStorage.setItem('settlementStartTime', initDtasAll.data.settlementStartTime);
            this.settlementEndTime = initDtasAll.data.settlementEndTime;
            this.prizeInfoId = initDtasAll.data.prizeInfoId
            console.log(this.flag,"this.flag")
            
            if(this.nowTime < this.settlementStartTime){
              this.rankStyle = this.styleData.timeStyleDiv
            }else if(this.nowTime > this.settlementStartTime){
              if(this.flag == 2){
                this.rankStyle = this.styleData.dontStyleDiv
              }else if(this.flag == 1){
                this.rankStyle = this.styleData.hasStyleDiv
              }else if(this.flag == 0){
                this.rankStyle = this.styleData.mainStyleDiv
              }
            }
            this.publicData.$emit('getEndTime', this.settlementEndTime);
            
          }

        });

      }
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.mainStyleDiv {
  .noData {
    font-size: 0.24rem;
    width: 100%;
    color: #8c8c8c;
    height: calc(100% - 0.4rem);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.recordListDiv::-webkit-scrollbar {
  width: 0;
}

.maskStyle {
  position: relative;
  margin-bottom: 0.3rem;
}

.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>
