<template>
  <view>
    <view
      class="tails_box"
      :style="
        'height:' + CenterCoupon.AllowOfflineWriteOff ? '640rpx' : '400rpx'
      "
    >
      <view class="tails_couname">
        <text>
          {{ CenterCoupon.activity_name }}
          <span
            style="font-size: 12rpx; margin-left: 6rpx; color: #ff9933"
            v-if="CenterCoupon.activity_on_is_off === 1"
            >(线下使用)</span
          >
        </text>
      </view>
      <view class="tails_mon"
        ><label
          style="font-size: 30rpx; margin-right: 8rpx; margin-left: 25%"
          >{{ __("￥") }}</label
        ><label
          style="font-size: 60rpx; margin-right: 24rpx; ont-weight: bold"
          >{{
            CenterCoupon.voucher_price ||
            CenterCoupon.activity_rule.voucher_price
          }}</label
        ><label style="font-size: 24rpx; color: #9b9b9b">{{
          sprintf(
            __("满￥%s可用"),
            CenterCoupon.voucher_subtotal ||
              CenterCoupon.activity_rule.requirement.buy.subtotal
          )
        }}</label></view
      >
      <view class="tails_time" style="width: 100%"
        >{{
          sprintf(
            __("有效日期至：%s"),
            CenterCoupon.voucher_end_date || CenterCoupon.activity_endtime
          )
        }}
      </view>
      <view class="tails_time" v-if="CenterCoupon.AllowOfflineWriteOff">
        <image
          :src="CenterCoupon.WriteOffCodeUrl"
          style="width: 64%; height: 289rpx"
        ></image>
      </view>
      <view
        class="tails_time"
        style="font-size: 24rpx; color: #9b9b9b"
        v-if="CenterCoupon.AllowOfflineWriteOff"
      >
        {{ CenterCoupon.WriteOffCode }}
      </view>
      <view
        class="btn_box"
        v-if="!CenterCoupon.AllowOfflineWriteOff"
        style="height: 100rpx"
      >
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          @tap="receivenowWeixin"
          v-if="
            CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL &&
            CenterCoupon.CouponType == 2
          "
          :data-id="CenterCoupon.activity_id"
          >{{ __("立即领取") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          @tap="receivenow"
          v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL"
          :data-id="CenterCoupon.activity_id"
          >{{ __("立即领取") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          v-if="
            (CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_FINISHED ||
              CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_CLOSED) &&
            CenterCoupon.voucher_state_id != StateCode.VOUCHER_STATE_USED
          "
          :data-id="CenterCoupon.activity_id"
          >{{ __("已领完") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          :data-id="CenterCoupon.activity_id"
          v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_USED"
          >{{ __("已使用") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          :data-id="CenterCoupon.activity_id"
          v-if="
            CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_TIMEOUT
          "
          >{{ __("已过期") }}
        </view>
        <block
          v-if="
            CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED &&
            CenterCoupon.AllowOfflineWriteOff == false
          "
        >
          <view
            class="but-stl"
            style="margin-right: 86rpx"
            v-if="isOnLine"
            :data-id="CenterCoupon.activity_id"
            :data-store_id="CenterCoupon.store_id"
            @tap="usenow"
            >{{ __("立即使用") }}
          </view>
          <view
            class="but-stl"
            style="margin-right: 86rpx"
            v-else
            :data-id="CenterCoupon.activity_id"
            :data-store_id="CenterCoupon.store_id"
            :data-writeoff_code="CenterCoupon.writeoff_code"
            @tap="Make"
            >{{ __("立即使用") }}
          </view>
        </block>

        <view
          class="but-stl"
          style="margin-right: 86rpx"
          v-if="
            CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED &&
            CenterCoupon.AllowOfflineWriteOff
          "
          :data-id="CenterCoupon.activity_id"
          :data-store_id="CenterCoupon.store_id"
          @tap="usenow"
          >{{ __("在线使用") }}
        </view>

        <view
          :data-id="CenterCoupon.activity_id"
          :data-name="CenterCoupon.Name"
          @tap="shareBox"
          class="but-stl02"
          v-if="false"
          >{{ __("分享给好友") }}
        </view>
      </view>
    </view>
    <view class="img_box">
      <image
        src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/coupon/partingLine.png"
        style="width: 100%; height: 100%; vertical-align: top"
      ></image>
    </view>
    <view class="tailfoli" style="overflow: hidden">
      <view
        class="btn_box"
        style="margin: 9px auto 0 auto; overflow: hidden"
        v-if="CenterCoupon.AllowOfflineWriteOff"
      >
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          @tap="receivenowWeixin"
          v-if="
            CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL &&
            CenterCoupon.CouponType == 2
          "
          :data-id="CenterCoupon.activity_id"
          >{{ __("立即领取") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          @tap="receivenow"
          v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL"
          :data-id="CenterCoupon.activity_id"
          >{{ __("立即领取") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          v-if="
            (CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_FINISHED ||
              CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_CLOSED) &&
            CenterCoupon.voucher_state_id != StateCode.VOUCHER_STATE_USED
          "
          :data-id="CenterCoupon.activity_id"
          >{{ __("已领完") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          :data-id="CenterCoupon.activity_id"
          v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_USED"
          >{{ __("已使用") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          :data-id="CenterCoupon.activity_id"
          v-if="
            CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_TIMEOUT
          "
          >{{ __("已过期") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          v-if="
            CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED &&
            CenterCoupon.AllowOfflineWriteOff == false
          "
          :data-id="CenterCoupon.activity_id"
          :data-store_id="CenterCoupon.store_id"
          @tap="usenow"
          >{{ __("立即使用") }}
        </view>
        <view
          class="but-stl"
          style="margin-right: 86rpx"
          v-if="
            CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED &&
            CenterCoupon.AllowOfflineWriteOff
          "
          :data-id="CenterCoupon.activity_id"
          :data-store_id="CenterCoupon.store_id"
          @tap="usenow"
          >{{ __("在线使用") }}
        </view>
        <view
          class="but-stl02"
          :data-id="CenterCoupon.activity_id"
          @tap="shareBox"
          :data-name="CenterCoupon.Name"
          v-if="false"
          >{{ __("分享给好友") }}
        </view>
        <view class="btn_mx" v-if="CenterCoupon.AllowOfflineWriteOff">{{
          __("支持线下使用（在门店购物时，向店员出示此码抵扣）")
        }}</view>
      </view>
      <view class="tails_tox" v-if="!CenterCoupon.AllowOfflineWriteOff">
        <view class="tail_fo1">{{ __("使用条件") }}</view>
        <view class="tail_fo2">
          <view style="margin-bottom: 10rpx"
            >1、{{
              sprintf(
                __("满￥%s可用"),
                CenterCoupon.voucher_subtotal ||
                  CenterCoupon.activity_rule.requirement.buy.subtotal
              )
            }}</view
          >
          <view>
            <label style="margin-right: 57rpx"
              >2、{{ CenterCoupon.store_name }}{{ __("可用") }}</label
            >
            <label
              v-if="CenterCoupon.activity_on_is_off === 0"
              style="color: #ffca81"
              :data-id="CenterCoupon.activity_id"
              @tap="usenow"
              :data-store_id="CenterCoupon.store_id"
              >{{ __("查看") }}</label
            >
          </view>
        </view>
      </view>
    </view>
    <view class="tails_tox" v-if="CenterCoupon.AllowOfflineWriteOff">
      <view class="tail_fo5">{{ __("使用条件") }}</view>
      <view class="tail_fo6">
        <view style="margin-bottom: 10rpx"
          >1、{{
            sprintf(
              __("满￥%s可用"),
              CenterCoupon.voucher_subtotal ||
                CenterCoupon.activity_rule.requirement.buy.subtotal
            )
          }}</view
        >
        <view
          ><label style="margin-right: 57rpx"
            >2、{{ CenterCoupon.store_name }}{{ __("可用") }}</label
          ><label
            style="color: #ffca81"
            :data-id="CenterCoupon.activity_id"
            :data-store_id="CenterCoupon.store_id"
            @tap="usenow"
            >{{ __("查看") }}</label
          >
        </view>
      </view>
    </view>
    <view
      style="width: 100%"
      v-if="
        (CenterCoupon.Description != '' && CenterCoupon.Description != null) ||
        CenterCoupon.AllowOfflineWriteOff
      "
    >
      <view class="tails_tox" style="width: 85%; padding-bottom: 60rpx">
        <view class="tail_fo1" style="color: #fff">{{ __("使用说明") }}</view>
        <view
          class="tail_fo3"
          style="color: #fff; height: 43rpx"
          v-if="CenterCoupon.AllowOfflineWriteOff"
        >
          {{ __("支持线下使用，领取后向店员展示优惠券详情") }}
        </view>
        <rich-text
          style="
            color: #fff;
            white-space: pre-line;
            font-size: 22rpx;
            word-break: break-all;
          "
          v-if="CenterCoupon.Description"
          nodes="CenterCoupon.Description"
        ></rich-text>
      </view>
    </view>
    <template is="shareMskTpl" data="PageQRCodeInfo" />

    <view :class="bannerShow ? 'canvas' : 'hide'" @click="setHide">
      <canvas
        class="m-canvas"
        canvas-id="qrcode"
        style="width: 200px; height: 200px"
      />
    </view>
  </view>
</template>

<script>
import $ from "../../helpers/util";

import uQRCode from "@/components/uni-qrcode/uqrcode.js";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      options: {},
      CenterCoupon: {
        activity_rule: {
          requirement: {
            buy: {},
          },
        },
      },
      cid: "",
      couponItemId: "",
      bannerShow: false,
      isOnLine: false, //是否线上优惠券
    };
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: this.__("优惠券详情"),
    });

    this.setData({
      cid: options.cid,
      couponItemId: options.couponItemId,
    });

    var that = this;
    that.GetCouponInfo();

    /*
        	this.forceUserInfo(function(user) {
				if (user) {
					that.GetCouponInfo()
				}
			});
			*/
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),

    GetCouponInfo: function (e) {
      var params = {
          activity_id: this.cid,
          user_voucher_id: this.couponItemId,
        },
        that = this;

      that.$.request({
        url: this.Config.URL.user.voucher_get,
        data: params,
        success: function (data, status, msg, code) {
          if (status == 200) {
            data.AllowOfflineWriteOff = false;
            that.setData({
              CenterCoupon: data,
            });
          }
        },
      });
    },
    onGotUserInfo: function (e) {
      if (null != e.detail.userInfo) {
        var a = {
          Photo: e.detail.userInfo.avatarUrl,
          NickName: e.detail.userInfo.nickName,
          UserName: app.globalData.UserInfo.UserName,
        };
        $.xsr($.makeUrl(userapi.UpdateUserPhotoAndNickName, a), function (e) {
          //console.log("个人信息：", e)
        }),
          (app.imageUrl = e.detail.userInfo.avatarUrl),
          (app.nickName = e.detail.userInfo.nickName),
          (app.authorize = true),
          this.shareQRCode();
      }
    },
    shareQRCode: function (e) {
      //console.log("2：", this.cid);
      var a = this,
        o = {
          vendorId: app.globalData.VendorInfo.Id,
          userId: app.globalData.UserInfo.Id,
          couponId: this.cid,
        };
      $.xsr($.makeUrl(userapi.QRCouponCodePoster, o), function (e) {
        //console.log("图片", e), a.setData({PageQRCodeInfo: {Path: e.Info, IsShare: true, IsShareBox: false, IsJT: true}})
      });
    },
    showCodeImg: function () {
      wx.previewImage({
        current: this.PageQRCodeInfo.Path,
        urls: [this.PageQRCodeInfo.Path],
      });
    },
    saveImg: function () {
      var a = this;
      $.loading(),
        wx.downloadFile({
          url: this.PageQRCodeInfo.Path,
          success: function (e) {
            $.hideloading(),
              wx.saveImageToPhotosAlbum({
                filePath: e.tempFilePath,
                success: function () {
                  a.setData({
                    PageQRCodeInfo: {
                      Path: "",
                      IsShare: false,
                      IsShareBox: false,
                      IsJT: false,
                    },
                  }),
                    $.alert("保存图片成功！");
                },
                fail: function (e) {
                  $.hideloading();
                },
              });
          },
          fail: function (e) {
            $.hideloading();
          },
        });
    },
    cancelShare: function () {
      this.setData({
        PageQRCodeInfo: {
          Path: "",
          IsShare: false,
          IsShareBox: false,
          IsJT: false,
        },
      });
    },
    usenow: function (e) {
      let that = this;
      var t = e.currentTarget.dataset.store_id;
      that.$.redirectTo({
        url: "/member/product/coupon?store_id=" + t,
      });
    },

    receivenow: function (e) {
      let that = this;
      that.getCoupon(e.currentTarget.dataset.id);
    },

    setHide: function () {
      this.setData({
        bannerShow: false,
      });
    },

    Make: function (e) {
      var that = this;

      that.setData({
        bannerShow: true,
      });
      let writeoff_code = e.currentTarget.dataset.writeoff_code;
      if (writeoff_code != null && writeoff_code != "") {
        that.couponItemId = writeoff_code;
      }

      uQRCode.make({
        canvasId: "qrcode",
        componentInstance: this,
        text: that.couponItemId,
        size: 200,
        margin: 10,
        backgroundColor: "#ffffff",
        foregroundColor: "#000000",
        fileType: "jpg",
        // correctLevel: uQRCode.errorCorrectLevel.H,
        success: (res) => {
          // console.log(res);
        },
        fail: (error) => {
          console.log(error);
        },
      });
    },
    getCoupon: function (t) {
      let that = this;
      var params = {
        activity_id: t,
        user_is_new: 0,
      };

      this.forceUserInfo((user) => {
        if (user) {
          $.request({
            url: this.Config.URL.user.voucher_add,
            data: params,
            success: function (data, status, msg, code) {
              if (200 == status) {
                that.getCouponlist();

                that.$.confirm(that.__("领取成功!,去消费"), function (a) {
                  if (a.confirm) {
                    that.$.navigateTo({
                      url:
                        "/pagesub/index/store?store_id=" +
                        that.CenterCoupon.store_id,
                    });
                  }
                });
              } else {
                $.alert(msg);
              }
            },
          });
        }
      });

      /*
				t && $.clearxsr($.makeUrl(userapi.UserReceiveCoupon, params), function (t) {
					0 == t.Code ? (that.setData({isCancelSuccess: false, mskType: 2, Coupons: t.Info}), wx.showToast({
						title: "领取成功！",
						icon: "none"
					})) : wx.showToast({title: t.Msg, icon: "none"})
				})

				*/
    },
    shareBox: function () {
      this.setData({
        PageQRCodeInfo: {
          Path: "",
          IsShare: true,
          IsShareBox: true,
          IsJT: false,
        },
      });
    },
  },
};
</script>



<style lang="scss">
@import "../../styles/_variables";

/* pages/Receivetails/Receivetails.wxss */
page {
  background: #db384c;
}

.tails_box {
  width: 94%;
  /*height: 345rpx;*/
  background: #fff;
  margin: 70rpx auto 0 auto;
  position: relative;
  padding-top: 18rpx;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}

.tails_logo {
  width: 112rpx;
  position: absolute;
  top: -14%;
  left: 42%;
  border-radius: 50%;
  overflow: hidden;
}

.tails_shopname {
  width: 100%;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
}

.tails_couname {
  width: 100%;
  color: #db384c;
  font-size: 36rpx;
  text-align: center;
  margin-top: 10rpx;
  font-weight: bold;
}

.tails_mon {
  width: 100%;
  color: #db384c;
  text-align: center;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.tails_but {
  width: 54%;
  margin: 43rpx auto 0 auto;
  height: 50rpx;
  background: #fff;
  border-radius: 54rpx;
  text-align: center;
  font-size: 24rpx;
  line-height: 50rpx;
  color: #db384c;
}

.tails_time {
  width: 64%;
  /*margin: 25rpx auto 0 auto;*/
  text-align: center;
  font-size: 22rpx;
  color: #db384c;
}

.tails_tox {
  width: 89%;
  margin: 0 auto;
}

.tail_fo1 {
  font-size: 24rpx;
  color: #000000;
  line-height: 62rpx;
}

.tail_fo5 {
  font-size: 24rpx;
  color: #fff;
  padding-left: 20rpx;
  line-height: 62rpx;
}

.tail_fo2 {
  width: 100%;
  font-size: 24rpx;
  color: #9b9b9b;
  border-radius: 10rpx;
}

.tail_fo6 {
  width: 100%;
  font-size: 24rpx;
  color: #fff;
  padding-left: 20rpx;
  border-radius: 10rpx;
}

.tail_fo3 {
  width: 100%;
  height: 137rpx;
  font-size: 22rpx;
  border-radius: 10rpx;
}

.but-stl {
  width: 42%;
  float: left;
  text-align: center;
  height: 61rpx;
  border-radius: 50rpx;
  border: 1px solid #fff;
  background: #db384c;
  font-size: 26rpx;
  color: #fff;
  line-height: 61rpx;
}

.but-stl02 {
  width: 42%;
  float: left;
  text-align: center;
  height: 61rpx;
  border-radius: 50rpx;
  border: 1px solid #db384c;
  background: #fff;
  font-size: 26rpx;
  color: #db384c;
  line-height: 61rpx;
}

.tailfoli {
  width: 94%;
  height: 88px;
  background: #fff;
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
  margin: 0 auto;
}

.btn_box {
  width: 88%;
  margin: 22px auto 0 auto;
  wxcs_style_margin: 22px auto 0 auto;
  /*height: 100rpx;*/
  display: flex;
}

.img_box {
  width: 94%;
  height: 72rpx;
  margin: 0 auto;
}

.btn_mx {
  text-align: center;
  font-size: 22rpx;
  color: #9b9b9b;
  margin: 88rpx 0 0;
}

.m-canvas {
  position: absolute !important;
  /*重要的一步是设置绝对定位*/
  margin: auto;
  /*将四周边距都设为auto自动*/
  left: 0;
  /*离包含元素的距离均设为零*/
  right: 0;
  top: 0;
  bottom: 0;
}

.canvas {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99;
}
</style>