<template>
  <div :style="styleData.shakyPrerent" ref="shakyPrerent" @click="styleClick('click', 'shakyPrerent')"
    @mousemove="styleClick('mousemove', 'shakyPrerent')" @mouseout="styleClick('mouseout')">
    <div :style="styleData.shakyPrerentStyle" v-if="dataList.disStatus == 0 || isTemp">
      <div :style="styleData.titleRow">
        <div :style="styleData.winnerName">活动奖品</div>
        <div :style="styleData.winnerScoll">
          <div>起：{{ startTime }}</div>
          <div class="enddiv">止：{{ receiveTime }}</div>
        </div>
      </div>
      <div :style="styleData.showPrize">
        <div v-for="(item, index) in fissionPrizeList" :key="index" class="showPrizediv">
          <div :style="styleData.prizeImg">
            <img style="width: 100%" :src="item.showImg" alt />
          </div>
          <div :style="styleData.prizeText">{{ item.prizeName }}</div>
        </div>
      </div>
      <div :style="styleData.prizeBtn" v-lz-click="'7'" @click="nowJoin">
        {{ followShop == 1 ? "关注店铺立即参与" : "立即参与" }}
      </div>
      <wait-evaluation-pop @isShadow="childShadow" :styleData="styleData" v-if="isFalse"></wait-evaluation-pop>
    </div>
    <div v-else :style="styleData.shakyEndPrerentStyle">
      <div class="buyEndShow">买家秀点赞排行</div>
      <div class="endTimeShow">{{ receiveTime }}至{{ endTime }}</div>
      <div class="userEndShow">
        <div class="buyShowNameCount">
          名次
          <div class="buyShowContent" v-for="(item, index) in endList" :key="index">
            {{ index + 1 }}
          </div>
        </div>
        <div class="buyShowUserName">
          用户
          <div class="buyShowContent" v-for="item in endList" :key="item" style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              width: 145px;
            ">
            {{ item.nickName }}
          </div>
        </div>
        <div class="buyShowLikes">
          点赞数
          <div class="buyShowContent" v-for="item in endList" :key="item">
            {{ item.clicks }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import bus from "../../../util/bus.js";
import apis1 from "../../../util/apis1.js";
import WaitEvaluationPop from "../popCom/hdzxtWaitEvaluationPop.vue";
import { Toast } from "vant";
let { drawPrize, buyersShow, buyersGetMyOrders, followShop } = apis1;
export default {
  components: {
    WaitEvaluationPop,
  },
  props: [
    "styleData",
    "keyData",
    "datas",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      startTime: 0,
      endTime: 0,
      receiveTime: 0,
      dataList: {},
      fissionPrizeList: [],
      endList: [],
      isFalse: false,
      isTemp: true,
      followShop: 0,
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  methods: {
    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);
      }
    },
    initData() {
      if (this.isTemplate) {
        this.isTemp = true;
        var datasAll = this.templateData;
        this.startTime = this.timer(new Date());
        this.endTime = this.timer(new Date(new Date().getTime() + 1000000));
        this.receiveTime = this.timer(new Date(new Date().getTime() + 1000000));
        console.log(datasAll, "datasAll");
        this.fissionPrizeList = [
          {
            beanNum: 5,
            id: "1428344708146667522",
            position: 9,
            prizeName: "10店铺积分",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
          {
            beanNum: 5,
            id: "1428344708146667522",
            position: 9,
            prizeName: "20店铺积分",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
          {
            beanNum: 5,
            id: "1428344708146667522",
            position: 9,
            prizeName: "30店铺积分",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
          {
            beanNum: 5,
            id: "1428344708146667522",
            position: 9,
            prizeName: "40店铺积分",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
        ];
        if (datasAll) {
          this.startTime = this.timer(new Date());
          this.endTime = this.timer(new Date(datasAll.activity.endTime));
          this.receiveTime = this.timer(
            new Date(datasAll.seniorDraw.issuingTime)
          );
          this.fissionPrizeList = datasAll.draw.prizeList;
        }
        return;
      } else {
        let actStatus = sessionStorage.getItem("actStatus");
        if (actStatus == 2) {
          this.$toast("活动已结束");
        }
        if (actStatus == 1) {
          this.$toast("活动未开始");
        }
        buyersShow((item) => {
          console.log(item.data, "yueyueyue");
          this.dataList = item.data;
          if (item.data.disStatus == 1) {
            this.isTemp = false;
            buyersGetMyOrders(0, 2, (data) => {
              console.log(data.data, "orderList");
              this.endList = data.data;
            });
          }
          this.followShop = item.data.involvementFlag;
          this.startTime = this.formatDatey(new Date(item.data.startTime));
          console.log(this.startTime);
          this.endTime = this.formatDatey(new Date(item.data.endTime));
          this.receiveTime = this.formatDatey(new Date(item.data.receiveTime));
          console.log(this.startTime, this.endTime);
          buyersGetMyOrders(0, 0, (data) => {
            console.log(data.data, "hahaha");
            bus.$emit("data", data.data);
          });
          drawPrize((datas) => {
            //请求奖品接口
            console.log(datas.data.prizeInfo);
            this.fissionPrizeList = datas.data.prizeInfo; //将所有数据赋值到数组
          });
        });
      }
    },
    formatTen(num) {
      return num > 9 ? (num + "") : ("0" + num);
    },
    formatDatey(date) {
      var date = date
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      return year + "-" + this.formatTen(month) + "-" + this.formatTen(day);
    },
    timer(time) {
      //将时间数据做转换处理
      var day = time.getDate();
      var year = time.getFullYear();
      var mouth = time.getMonth();
      if (day < 10) {
        day = "0" + day;
      }
      if (mouth < 10) {
        mouth = "0" + mouth;
      }
      var end = year + "-" + mouth + "-" + day;
      return end;
    },
    nowJoin() {
      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.followShop == 1) {
        followShop();
      }
      this.isFalse = !this.isFalse;
      bus.$emit("isShow", this.isFalse);
    },
    childShadow(val) {
      console.log(val);
      this.isFalse = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.buyEndShow {
  font-size: 0.36rem;
  color: rgb(255, 51, 51);
}
.endTimeShow {
  font-size: 0.24rem;
  color: rgb(153, 153, 153);
}
.userEndShow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
}
.userEndShow {
  text-align: center;
  font-size: 0.24rem;
  color: rgb(255, 51, 51);
}
.enddiv {
  margin-left: 0.2rem;
}
.showPrizediv {
  margin: 0.07rem;
}
.buyShowNameCount {
  width: 1.3rem;
}
.buyShowUserName {
  width: 2.9rem;
}
.buyShowLikes {
  width: 1.5rem;
}
.buyShowContent {
  color: #999;
  line-height: 0.5rem;
}
</style>