<template>
  <div
    class="mapPresent"
    ref="signPresent"
    @click="styleClick('click', 'signPresent')"
    @mousemove="styleClick('mousemove', 'signPresent')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.mapPresent">
      <div
        v-for="(item, index) in prerentList"
        :key="index"
        :class="`day${item.position}`"
        @click="MapPresentClick"
      >
        <div
          :style="
            allSign > item.position
              ? styleData.activePresent
              : styleData.everydayPresent
          "
          v-if="!isShowDrawPrize(item, index)"
        ></div>
        <div
          v-if="isShowDrawPrize(item, index)"
          :style="styleData.showDrawPrize"
        >
          <img :src="item.showImg" alt class="mapPresentimg" />
          <!-- <div class="mapPresentText">{{ item.prizeName }}</div> -->
        </div>
      </div>
      <div v-if="ButtonClose" class="ShadowShow">
        <basicPopNew title="奖品说明" @closeClick="CloseShadowBox">
          <div :style="styleData.childShadowBox">
            <!-- <div style="padding: 0.2rem 0px">
              <img :src="keyData.titleImg" class="ShadowShowimg" alt />
            </div> -->
            <div class="SignPrerentList">
              <ul>
                <li
                  v-for="item in signPrerentList"
                  :key="item.id"
                  class="SignPrerentLi"
                >
                  <div>
                    <div class="LeftImg">
                      <div style="display: inline-block">
                        <i
                          v-if="item.showDrawType == 1"
                          class="SignPrerentImg"
                          :style="backgroundStyle + item.showImg + ')'"
                        ></i>
                        <i v-else class="SignPrerentImg1"></i>
                      </div>
                      <div class="SignPrerentName">
                        <div
                          v-if="item.showDrawType == 1"
                          class="SignPrerentNamediv"
                        >
                          {{ item.prizeName }}
                        </div>
                        <div v-else class="SignPrerentNamediv">神秘奖品</div>
                        <div class="attendance">
                          连续签到
                          <span class="attendancespan">{{ item.position }}</span
                          >天
                        </div>
                      </div>
                    </div>
                    <div class="RightImg">
                      <i :class="`SignDayImg${item.position}`"></i>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </basicPopNew>
      </div>
    </div>
    <img
      @click="MapPresentClick"
      :style="styleData.imgBtn"
      :src="styleData.imgBtn.imageUrl"
    />
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import bus from "../../../util/bus.js";
import basicPopNew from "../popCom/basicPopNew.vue";
import { Toast } from "vant";
let { drawPrize } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  components: {
    basicPopNew,
  },
  data() {
    return {
      ButtonClose: false,
      backgroundStyle: "background-image:url(",
      activeNum: 1,
      prerentList: [
        {
          beanNum: 213,
          id: "1422907416019894274",
          position: 1,
          prizeName: "213",
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
        },
        {
          beanNum: 213,
          id: "1422907416019894274",
          position: 2,
          prizeName: "213",
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
        },
        {
          beanNum: 213,
          id: "1422907416019894274",
          position: 3,
          prizeName: "213",
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
        },
        {
          beanNum: 213,
          id: "1422907416019894274",
          position: 4,
          prizeName: "213",
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
        },
        {
          beanNum: 213,
          id: "1422907416019894274",
          position: 5,
          prizeName: "213",
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
        },
        {
          beanNum: 213,
          id: "1422907416019894274",
          position: 6,
          prizeName: "213",
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
        },
        {
          beanNum: 213,
          id: "1422907416019894274",
          position: 7,
          prizeName: "213",
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
        },
      ],
      signPrerentList: [],
      status: [],
      signInDays: 0,
      showDrawPrize: [],
      allSign: 0,
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    if (this.isWebClick) {
      this.allSign = 2;
    }
    this.initData();

  },
  updated() {
    bus.$on("signInday", (conent) => {
      this.signInDays = conent;
    });
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
       if(this.isWebClick){
        return
      }
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        this.prerentList = [
          {
            beanNum: 213,
            id: "1422907416019894274",
            position: 1,
            prizeName: "213",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
          {
            beanNum: 213,
            id: "1422907416019894274",
            position: 2,
            prizeName: "213",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
          {
            beanNum: 213,
            id: "1422907416019894274",
            position: 3,
            prizeName: "213",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
          {
            beanNum: 213,
            id: "1422907416019894274",
            position: 4,
            prizeName: "213",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
          {
            beanNum: 213,
            id: "1422907416019894274",
            position: 5,
            prizeName: "213",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
          {
            beanNum: 213,
            id: "1422907416019894274",
            position: 6,
            prizeName: "213",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
          {
            beanNum: 213,
            id: "1422907416019894274",
            position: 7,
            prizeName: "213",
            prizeType: 4,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
          },
        ];
        return;
      } else {
        let actStatus = sessionStorage.getItem("actStatus");
        if (actStatus == 2) {
          Toast("活动已结束");
        }
        if (actStatus == 1) {
          Toast("活动尚未开始");
        }
        drawPrize((data) => {
          //请求接口
          console.log(data, "1111111122222");
          data.data.prizeInfo.forEach((v, i) => {
            if (v.position == this.prerentList[i].position) {
              this.prerentList[i] = v;
            }
            this.$forceUpdate();
          });
        });

        bus.$on("signInday", (content) => {
          console.log(content, "signInday");
          this.signInDays = content;
        });
        bus.$on("allSignDay", (content) => {
          console.log(content, "signInday");
          this.allSign = content;
        });
        bus.$on("status", (content) => {
          console.log(content, "status");
          this.status = content;
        });
        bus.$on("data", (content) => {
          this.showDrawPrize = content.rules;
          console.log(this.showDrawPrize, "showDrawPrize");
        });

      }
    },
    MapPresentClick() {
      if(this.isWebClick){
        return
      }
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        Toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        Toast("活动尚未开始");
        return;
      } else {
        drawPrize((data) => {
          //请求接口
          console.log(data, "drizePrize");
          data.data.prizeInfo.forEach((v, i) => {
            if (v.position == this.prerentList[i].position) {
              this.prerentList[i] = v;
            }
          });

          console.log(this.prerentList, "sukabulie");
          this.signPrerentList = data.data.prizeInfo;
          console.log(this.signPrerentList, "klklkl");
          console.log(this.showDrawPrize, "klklkl");
          this.signPrerentList = this.signPrerentList.reverse();
          this.signPrerentList.map((item) => {
            this.showDrawPrize.map((list) => {
              if (item.position == list.position) {
                // item.showDrawType = list.showDrawType
                this.$set(item, "showDrawType", list.showDrawType);
              }
            });
          });
          this.ButtonClose = !this.ButtonClose; //礼品列表遮罩层开关
          console.log(this.signPrerentList, "ooooo");
        });
      }
    },
    isShowDrawPrize(item, index) {
      var isFalse = false;
      this.showDrawPrize.forEach((v, i) => {
        if (
          v.position == item.position &&
          v.showDrawType == 1 &&
          this.allSign > item.position &&
          this.status[i] == "1"
        ) {
          isFalse = true;
        } else {
          // console.log("222222222222");
        }
      });
      // console.log(isFalse, "hahha");
      return isFalse;
    },
    isShowDraw(item, index) {
      var isFalse = false;

      // console.log(isFalse, item, "hahha");
      return isFalse;
    },
    CloseShadowBox() {
      this.ButtonClose = !this.ButtonClose; //礼品列表遮罩层开关
    },
  },
};
</script>
<style  scoped>
.attendancespan {
  color: rgb(242, 60, 60);
}
.attendance {
  color: rgb(153, 153, 153);
  font-size: 0.24rem;
}
.SignPrerentNamediv {
  color: rgb(245, 98, 100);
  font-size: 0.24rem;
  text-align: left;
}
.mapPresentimg {
  height: 0.7rem;
  border-radius: 50%;
}
.mapPresentText {
  color: #611c62;
  font-size: 0.2rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ShadowShowimg {
  width: 3.3rem;
  height: 0.28rem;
  display: inline-block;
  vertical-align: middle;
}
.day1 {
  position: absolute;
  top: 5.7rem;
  left: 1.75rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.day2 {
  position: absolute;
  top: 4.7rem;
  left: 3.65rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.day3 {
  position: absolute;
  top: 3.65rem;
  left: 5.55rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.day4 {
  position: absolute;
  top: 2.45rem;
  left: 3.2rem;
  width: 1.01rem;
  height: 1.3rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.day5 {
  position: absolute;
  top: 1.35rem;
  left: 1.32rem;
  width: 1.01rem;
  height: 1.3rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.day6 {
  position: absolute;
  top: 0.4rem;
  left: 3.4rem;
  width: 1.01rem;
  height: 1.3rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.day7 {
  position: absolute;
  top: -0.7rem;
  left: 5.5rem;
  width: 1.01rem;
  height: 1.3rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.SignDayImg1 {
  display: inline-block;
  width: 0.56rem;
  height: 0.79rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/407/3/3035/2439/5b973d64E3a062820/614db50782f6cb2d.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.SignDayImg2 {
  display: inline-block;
  width: 0.56rem;
  height: 0.79rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/2347/1/2654/2423/5b973d64E673718f8/d40b19b72c6eb15c.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.SignDayImg3 {
  display: inline-block;
  width: 0.56rem;
  height: 0.79rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/3116/36/2649/1819/5b973d70Ea3f4aa3e/56d90554231bced2.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.SignDayImg4 {
  display: inline-block;
  width: 0.56rem;
  height: 0.79rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/1093/30/2675/2458/5b973d70Ef93ba6b8/4c570520facf186f.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.SignDayImg5 {
  display: inline-block;
  width: 0.56rem;
  height: 0.79rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/122/31/2995/1896/5b973d70E4a628e0f/8a5c01df2972c7b6.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.SignDayImg6 {
  display: inline-block;
  width: 0.56rem;
  height: 0.79rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/1127/8/2667/2535/5b973d70E0e836e57/0a340bf0ea9b16dc.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.SignDayImg7 {
  display: inline-block;
  width: 0.56rem;
  height: 0.79rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/3384/18/2645/1902/5b973d70E40bb15af/bf2963ee196e447f.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.ShadowShow {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1101;
  background: rgba(0, 0, 0, 0.65);
  transition: 0.5s all;
  bottom: 0rem;
}
.SignPrerentList {
  max-height: 9rem;
  overflow: auto;
  margin: 0.2rem 0;
}
.SignPrerentLi {
  height: 1.2rem;
  padding: 0.2rem;
  margin: 0 0.2rem 1px 0.2rem;
  background: #fff;
  font-size: 0.24rem;
}
.LeftImg {
  float: left;
  overflow: hidden;
}
.LeftImg .SignPrerentImg {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.LeftImg .SignPrerentImg1 {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/204072/11/17162/46807/61a4f018E9c1fc062/26c89fb20c99997a.png);
}
.LeftImg .SignPrerentName {
  margin-left: 0.15rem;
  display: inline-block;
  position: relative;
  top: -0.2rem;
  text-align: left;
}

.RightImg {
  float: right;
}
.RightImg .SignDayImg {
  display: inline-block;
  width: 0.56rem;
  height: 0.79rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.mapPresent {
  position: relative;
}
</style>
