<template>
  <div class="mapPresent" ref="signPresent" :style="styleData.mapPresent">
    <div>
      <div v-for="(item, index) in prerentList" :key="index" :class="`day${item.position}`">
        <div :class="`signDay${item.position}`" v-if="allSign > item.position"></div>
        <!--   -->
        <!-- <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> -->
      </div>
      <div v-if="ButtonClose" class="ShadowShow">
        <basicPopNew title="奖品说明" @closeClick="CloseShadowBox">
          <div :style="styleData.childShadowBox">
            <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>
    <div class="btnAll">
      <div></div>
      <div @click="MapPresentClick" class="seeBtn"></div>
    </div>
  </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() {
      if (this.isWebClick) {
        this.allSign = 2;
      }
      this.initData();

    },
    updated() {
      bus.$on("signInday", (conent) => {
        this.signInDays = conent;
      });
    },
    methods: {
      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;
  }

  .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;
  }
  .day1 {
    width: 0.3rem;
    height: 0.36rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/302707/1/22581/2184/68788fb0Fc760eb2a/97fd15478d9a19db.png);
    background-size: 100%;
    position: absolute;
    left: 3.7rem;
    top: 2.93rem;
  }
  .day2 {
    width: 0.36rem;
    height: 0.38rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/307842/25/17810/2675/68788fb0Ffc4bd2e0/ff9ae4eb4bb5099a.png);
    background-size: 100%;
    position: absolute;
    left: 3.1rem;
    top: 3.3rem;
  }
  .day3 {
    width: 0.4rem;
    height: 0.42rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/321420/3/16607/2827/68788fb0F9fc4cdb6/4d684ec655516efa.png);
    background-size: 100%;
    position: absolute;
    left: 3.3rem;
    top: 4rem;
  }
  .day4 {
    width: 0.41rem;
    height: 0.48rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/290256/14/17246/3488/68788fb0F103f0658/8fbc73eaf12a1ef7.png);
    background-size: 100%;
    position: absolute;
    left: 3.8rem;
    top: 4.42rem;
  }
  .day5 {
    width: 0.54rem;
    height: 0.61rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/294038/27/16100/5685/68788fb1Fa263aca0/9f52f5bcb4d17a1a.png);
    background-size: 100%;
    position: absolute;
    left: 4.2rem;
    top: 5.4rem;
  }
  .day6 {
    width: 0.64rem;
    height: 0.75rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/302170/32/19234/5949/68788fb1F7f2b2b1a/f968994c5d8e42ab.png);
    background-size: 100%;
    position: absolute;
    left: 3.8rem;
    top: 6.4rem;
  }
  .day7 {
    width: 0.9rem;
    height: 1.33rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/306389/14/18891/13490/68788fb1F7f4ffca7/390b0d54c94087ad.png);
    background-size: 100%;
    position: absolute;
    left: 3.25rem;
    top: 7.2rem;
  }
  .signDay1 {
    width: 0.3rem;
    height: 0.36rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/316584/30/16294/1317/687895daF4a576871/cd431bcffe91ecb1.png);
    background-size: 100%;
    left: 3.7rem;
    top: 2.93rem;
  }
  .signDay2 {
    width: 0.36rem;
    height: 0.38rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/288298/33/10394/2038/687895daF1b2783cf/1c5cafaf2007f5f6.png);
    background-size: 100%;
    left: 3.1rem;
    top: 3.3rem;
  }
  .signDay3 {
    width: 0.4rem;
    height: 0.42rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/313544/18/17819/2363/687895dbF7d8f2875/e831bb4a501d9932.png);
    background-size: 100%;
    left: 3.3rem;
    top: 4rem;
  }
  .signDay4 {
    width: 0.41rem;
    height: 0.48rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/295308/32/15495/2993/687895dbFc7ddb413/5b4715d7e33cfea3.png);
    background-size: 100%;
    left: 3.8rem;
    top: 4.42rem;
  }
  .signDay5 {
    width: 0.54rem;
    height: 0.61rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/288833/4/14781/4274/687895dbF29873639/3f538b0abf0214ce.png);
    background-size: 100%;
    left: 4.2rem;
    top: 5.4rem;
  }
  .signDay6 {
    width: 0.64rem;
    height: 0.75rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/311844/24/17630/6008/687895dcF0238a673/64ea0bab841e371b.png);
    background-size: 100%;
    left: 3.8rem;
    top: 6.4rem;
  }
  .signDay7 {
    width: 0.9rem;
    height: 1.33rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/286861/30/21438/10638/687895dcF05cfb42e/191ee4a2a1e2bfae.png);
    background-size: 100%;
    left: 3.25rem;
    top: 7.2rem;
  }
  .btnAll {
    width: 5.94rem;
    height: 1.17rem;
    position: absolute;
    left: calc(50% - 5.94rem / 2);
    bottom: 1rem;
    display: flex;
    justify-content: space-between;
  }
  .seeBtn {
    width: 2.52rem;
    height: 1.17rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/313424/2/17558/6644/6878675bF626ea701/47758c0b5d7b35ba.png);
    background-size: 100%;
  }
  .signBtn {
    width: 2.52rem;
    height: 1.17rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/309715/31/17732/6751/6878675bF4d8fca5e/ad4be575291d54e1.png);
    background-size: 100%;
  }
</style>
