<template>
  <div class="van-popup van-popup--bottom" style="background: rgba(0,0,0,0.7); z-index: 100;height: 100vh;" v-if="show" @click='clickEmpty()'>
    <div class="reduce-difficulty-dialog" @click='stopClickEmpty'>
      <template v-if="mainDatas1.needFollowStore == 0 && mainDatas1.needAddCard == 0">
        <div style="font-size: 0.26rem; color: rgb(51, 51, 51); text-align: center">成绩在{{ secondsRead }}s可参与抽奖</div>
      </template>
      <template v-else-if="ifFollowShop == false && ifMember == false">
        <div style="font-size: 0.26rem; color: rgb(51, 51, 51); text-align: center">成绩在{{ secondsRead }}s可参与抽奖</div>
      </template>
      <template v-else>
        <div style="font-size: 0.26rem; color: rgb(51, 51, 51); text-align: center">成绩在{{ minSecond }}s~{{ maxSecond }}s间可参与抽奖</div>
      </template>

      <div class="reduce-difficulty-content" v-if="mainDatas1.needFollowStore == 1 || mainDatas1.needAddCard == 1">
        <div class="task" v-show="mainDatas1.needFollowStore == 1">
          <div
            style="
              display: flex;
              justify-content: flex-start;
              align-items: center;
            "
          >
            <div class="task-image">
              <img src="https://img10.360buyimg.com/imgzone/jfs/t1/127208/10/6471/4624/5f044bccE0334ccdf/cb7bd84a3de47dd0.png" alt="" style="width: auto; height: auto" />
            </div>
            <div style="display: flex; flex-direction: column; margin-left: 0.1rem">
              <div style="font-size: 0.24rem; color: rgb(51, 51, 51)">关注店铺</div>
              <div style="font-size: 0.2rem; color: rgb(153, 153, 153)">关注店铺降低一次难度，并获一次挑战机会</div>
            </div>
          </div>
          <div class="btn" :class="{ gray100: ifFollowShop == true }" @click="followToTask()">关注店铺</div>
        </div>
        <div class="task" v-show="mainDatas1.needAddCard == 1">
          <div
            style="
              display: flex;
              justify-content: flex-start;
              align-items: center;
            "
          >
            <div class="task-image">
              <img src="https://img10.360buyimg.com/imgzone/jfs/t1/127726/18/6469/5019/5f044bccE4091bf7b/aca002034c85b018.png" alt="" style="width: auto; height: auto" />
            </div>
            <div style="display: flex; flex-direction: column; margin-left: 0.1rem">
              <div style="font-size: 0.24rem; color: rgb(51, 51, 51)">加入会员</div>
              <div style="font-size: 0.2rem; color: rgb(153, 153, 153)">加入会员降低一次难度，并获一次挑战机会</div>
            </div>
          </div>
          <div class="btn" :class="{ gray100: ifMember == true }" @click="joinClick()">加入会员</div>
        </div>
      </div>
      <div style="width:100%;height:100%;display: flex;justify-content: center;align-items: center;font-size: .3rem;color:#ccc">暂无任务</div>
      <div class="closeBtn-level" style=" right: 0.3rem" @click="close()"></div>
    </div>
  </div>
</template>
<script>
import apis1 from '../../../util/apis1.js';
import { goToOpenCard } from '../../../util/tools.js';

let { fissionTask, pinshousuFollowShop, memberRequest, readSecondsFollow } = apis1;
import { goToShopPage } from '../../../util/tools.js';
import { getUrlQueryValueByKey } from '../../../util/tools.js';
import Template from '../customTemplate/template';

export default {
  name: 'levelDialog',
  components: { Template },
  data() {
    return {
      challengeMilliSecond: 0,
      challengeSecond: 0,
      secondsRead: '',
      challengeMilliSecondVal: 0,
      needFollowStore: 0,
      tmpSecond: 0.1,
      minSecond: 0,
      maxSecond: 0,
      finishCount: '',
      ifMember: false,
      ifFollowShop: false,
      mainDatas1: [],
      openCardUrl: ''
    };
  },
  created() {
    document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');

    this.initData();
  },
  methods: {
    async initData() {
      this.mainDatas1 = this.mainDatas;
      this.ifMember = this.mainDatas1.ifMember;
      this.ifFollowShop = this.mainDatas1.ifFollowShop;
      this.challengeMilliSecond = this.mainDatas1.challengeMilliSecond;
      this.challengeSecond = this.mainDatas1.challengeSecond;

      if (this.challengeSecond < 10 && this.challengeSecond >= 0 && this.challengeMilliSecond < 10 && this.challengeMilliSecond >= 0) {
        this.secondsRead = '0' + this.challengeSecond + '.0' + this.challengeMilliSecond;
      } else if (this.challengeSecond < 10 && this.challengeSecond >= 0) {
        this.secondsRead = '0' + this.challengeSecond + '.' + this.challengeMilliSecond;
      } else if (this.challengeMilliSecond < 10 && this.challengeMilliSecond >= 0) {
        this.secondsRead = this.challengeSecond + '.0' + this.challengeMilliSecond;
      } else {
        this.secondsRead = this.challengeSecond + '.' + this.challengeMilliSecond;
      }

      this.minSecond = parseFloat(this.secondsRead);
      this.maxSecond = parseFloat(this.secondsRead);
      this.minSecond = this.minSecond.toFixed(2);
      this.maxSecond = this.maxSecond.toFixed(2);

      if (this.ifFollowShop && this.mainDatas1.needFollowStore == 1) {
        this.minSecond = parseFloat(this.minSecond) - this.tmpSecond;
        this.maxSecond = parseFloat(this.maxSecond) + this.tmpSecond;
        this.minSecond = this.minSecond.toFixed(2);
        this.maxSecond = this.maxSecond.toFixed(2);
      }

      if (this.ifMember && this.mainDatas1.needAddCard == 1) {
        this.minSecond = parseFloat(this.minSecond) - this.tmpSecond;
        this.maxSecond = parseFloat(this.maxSecond) + this.tmpSecond;
        this.minSecond = this.minSecond.toFixed(2);
        this.maxSecond = this.maxSecond.toFixed(2);
      }
    },
    //加入会员
    joinClick() {
      if (this.ifMember == false) {
        this.openCardUrl = this.mainDatas1.openCardUrl;
        goToOpenCard(this.openCardUrl.replace(/%/g, '%25'));
        this.minSecond = parseFloat(this.minSecond) - this.tmpSecond;
        this.maxSecond = parseFloat(this.maxSecond) + this.tmpSecond;
        this.minSecond = this.minSecond.toFixed(2);
        this.maxSecond = this.maxSecond.toFixed(2);
        this.publicData.$emit('readSeconds', 1);
      }
    },
    close() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    },
    //点击空白处关闭弹框
    clickEmpty(){
     document.querySelector('body').removeAttribute('style');
     this.submit();
    },
    //阻止冒泡
    stopClickEmpty(event){
      event.stopPropagation();
    },
    //关注店铺
    followToTask(toTask) {
      let actStatus = sessionStorage.getItem('actStatus');
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      if (actStatus == 2) {
        // Toast
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动尚未开始');
        // Toast('活动尚未开始');
        return;
      }
      if (this.ifFollowShop == false) {
        pinshousuFollowShop(data => {
          this.ifFollowShop = true;
          this.minSecond = parseFloat(this.minSecond) - this.tmpSecond;
          this.maxSecond = parseFloat(this.maxSecond) + this.tmpSecond;
          this.minSecond = this.minSecond.toFixed(2);
          this.maxSecond = this.maxSecond.toFixed(2);
          this.$toast('关注店铺成功');
          this.publicData.$emit('readSeconds', 1);
        });
      } else {
        this.$toast('您已关注过店铺！');
      }
    }
  }
};
</script>
<style scoped>
.van-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: rgb(211, 31, 70);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-overflow-scrolling: touch;
}

/* .van-popup  */
.van-popup--bottom {
  bottom: 0;
  left: 0;
  width: 100%;
}

.listItem img {
  height: 2.9rem;
  width: 2.3rem;
}

.reduce-difficulty-dialog {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/137116/36/7563/26722/5f3e4518E90552aa7/4c9d14f015620c24.png) no-repeat;
  background-size: 100%;
  height: 6.05rem;
  padding-top: 1.7rem;
  box-sizing: border-box;
  bottom: 0;
  position: fixed;
  max-height: 10.57rem;
  width: 100%;
  z-index: 201;
}

.reduce-difficulty-content {
  width: 6.9rem;
  height: 3.25rem;
  margin: 0.1rem auto 0;
  overflow-y: scroll;
}

.reduce-difficulty-content .task {
  width: 100%;
  height: 1.5rem;
  border-radius: 10px;
  background: #fff3df;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.reduce-difficulty-content .task .task-image {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background: #fff;
  box-shadow: 0 2px 40px #fde1b4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reduce-difficulty-content .task .btn {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/143462/26/2354/4296/5f044a5fE48af56e0/39d40b22134779e5.png) no-repeat;
  background-size: 100%;
  width: 1.53rem;
  height: 0.57rem;
  font-size: 0.24rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reduce-difficulty-content .task:nth-child(n + 2) {
  margin-top: 0.26rem;
}

.closeBtn-level {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  right: 0.23rem;
  top: 0.1rem;
}
.gray100 {
  filter: grayscale(100%);
}
</style>
