<template>
  <div class="ruleMaskDiv" v-if="show">
    <basicPop :title="title" @closeClick="closeClick">
      <div class="goodList">
        <div class="yhq" v-for="item in commodityList">
          <div style="display: flex;justify-content: flex-start;align-items: center">
            <img
              src="https://img10.360buyimg.com/imgzone/jfs/t1/91166/16/6071/3477/5df1b774E4b3354f6/18d54f6c90506f85.png"
              alt="" style="width:1.5rem;height:1.5rem;">
            <div
              style="display: flex;flex-direction: column;justify-content: center;margin-left:.2rem;font-size: .18rem;color:rgb(110, 110, 110);">
              <div><span style="font-size:.24rem;vertical-align: baseline;color:#252525">&yen;</span><span
                style="font-size: .36rem;vertical-align: baseline;color:#252525">
                    {{ item.priceInfo }}</span></div>
              <div>满{{ item.fullPriceInfo }}元使用</div>
              <div style="width: 3.5rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">优惠券名：{{ item.prizeName }}</div>
              <div style="white-space: nowrap" v-if="item.expireType == 0 || item.expireType == 5" >有效日期：{{ item.beginTime | formatDateYMD }} ~ {{ item.endTime | formatDateYMD }}</div>
              <div v-else-if="item.expireType == 1" >有效日期：{{ item.couponValidateDay }}天</div>
            </div>
          </div>
          <div class="get-yhq-btn" :class="{gray100:item.taskStatus == true}" @click="toPurchase(item)">
            <template v-if="item.taskStatus == true">已领取</template>
            <template v-else>去领取</template>
          </div>
        </div>
      </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from "./basicPop.vue";
import apis1 from "../../../util/apis1.js";

let { fansTaskList , fansDrawList } = apis1;
export default {
  props: [],
  components: {
    basicPop,
  },
  data() {
    return {
      title: '',
      score:0,
      commodityList: [],
      completeCount: 0,
    };
  },
  created() {
    document
      .querySelector("body")
      .setAttribute(
        "style",
        "position:#fixed;top:0;height:100%;overflow:hidden"
      );

    this.initData();
  },
  methods: {
    initData() {
      this.commodityList = this.data.prizeInfoVOList;
      this.completeCount = this.data.completeCount;
      this.score = this.data.sendNum;
      this.title = "领取优惠";
    },
    toPurchase(item) {
      if (item.taskStatus == false) {
        fansTaskList(this.data.taskId, item.prizeInfoId, data => {
          if (data.data == true) {
            this.completeCount = this.completeCount + 1;
            item.taskStatus = true;
            this.publicData.$emit('fansFollowShop', this.score);
            this.getCouponsPrize(item.prizeInfoId);
          }
        });
      } else if (item.taskStatus == true) {
        this.$toast("活动内该优惠券已领过");
      } else {
        this.$toast("优惠券不可用");
      }
    },
    getCouponsPrize(prizeInfoId) {
      fansDrawList(prizeInfoId, 1, initDatas => {
        if (initDatas.data.result) {
          this.$toast("优惠券领取成功");
        } else {
          this.$toast("优惠券领取失败");
        }
      });
    },
    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit(this.completeCount);
    },
  },
  filters: {
    formatDateYMD: function (value) {//时间处理，格式年月日
      if (value) {
        var dateTimeStamp = new Date(value)
        var year = dateTimeStamp.getFullYear();
        var month = dateTimeStamp.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var day = dateTimeStamp.getDate();
        day = day < 10 ? '0' + day : day;
        return year + '-' + month + '-' + day
      }
    },
    formatPrice: function (value) {
      if (value) {
        var infoList = value.split(';');
        return infoList[0]
      }
    },
    formatInfo: function (value) {
      if (value) {
        var infoList = value.split(';');
        return infoList[1]
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.ruleMaskDiv {
  .basicPopDiv {
    height: 9.13rem;

    .context1 {
      margin-top: 0.2rem;
      height: 100%;
      display: flex;
      // align-items: center;
      justify-content: center;
      font-size: 0.24rem;
      color: #333333;
    }

    .context {
      height: 7.5rem;
      overflow-y: scroll;
      padding-right: 0.15rem;
      padding-left: 0.15rem;
    }
  }
}

.goodList {
  overflow-y: scroll;
  width: 7.4rem;
  max-height: 7rem;
  margin: .9rem auto 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 .25rem;
}

.goodsItem {
  width: 3.15rem;
  height: 4.8rem;
  background-color: white;
  margin-bottom: .1rem;
  overflow-y: scroll;
}

.goodImg {
  width: 100%;
  height: 3.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem
}

.Img1 {
  max-height: 100%;
  max-width: 100%;
}

.goodBottom {
  width: 100%;
  height: 1.2rem;
}

.goodName {
  max-width: 3.4rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: .24rem;
  padding: 0 .38rem;
}

.goodPrice {
  width: 100%;
  padding: 0 .38rem;
  color: #e2231a;
  font-size: .24rem;
}

.purchaseBtn {
  width: 1.2rem;
  height: 0.4rem;
  font-size: 0.22rem;
  color: rgb(255, 255, 255);
  background: rgb(252, 60, 44);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  margin-left: 1.8rem;
}

.gray100 {
  filter: grayscale(100);
}

.yhq-container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding: 0 .2rem;
  box-sizing: border-box;
}

.yhq {
  width: 100%;
  height: 2rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .2rem;
  box-sizing: border-box;
  margin: 0 auto;
}

.yhq:nth-child(n+2) {
  margin-top: .1rem;
}

.get-yhq-btn {
  width: 1.35rem;
  height: .4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .2rem;
  color: #fff;
  background: #fc3c2c;
  border-radius: 40px;
}
</style>
