<template>
  <likeGood :page-type="4" :is-show="isShow">
    <view class="card">
      <view class="info">
        <image class="info__image" src="https://img.lkbang.net/xcx/pay-success.png" />
        <view class="info__desc">
          <text class="info__text">订单支付成功!</text>
          <text class="info__text info__money">实付¥{{ money }}</text>
          <text v-if="freeAmount > 0" class="info__text info__free">已优惠¥{{ freeAmount }}</text>
        </view>
      </view>
      <!-- **会员权益2.0版本去掉了** -->
      <!-- <view class="tips">
        <text>您可在“我的-我的订单”中查看详情</text>
      </view> -->

      <view v-if="$config('yxm') && eventPoint" class="growth">
        <view class="growth__leftdesc">
          <!-- <image class="growth__image" src="https://img.lkbang.net/xcx/growth.png" /> -->
          <image class="growth__image" :src="icon" />
          <text class="growth__growtext">{{ text }}</text>
        </view>
        <view class="growth__rightdesc">
          <text class="growth__text growth__color">+{{ eventPoint }}</text>
          <text class="growth__text">成长值</text>
        </view>
      </view>

      <view class="actions">
        <button
          class="actions__back"
          plain="true"
          hover-class="none"
          type="primary"
          @click="goHome"
        >
          返回首页
        </button>
        <button
          class="actions__order"
          plain="true"
          hover-class="none"
          type="primary"
          @click="setSubMsg"
        >
          查看订单
        </button>
      </view>
    </view>
    <couponSwiper :coupon-list="couponList" />
    <!-- #ifdef MP-WEIXIN -->
    <view v-if="showDivert && guideUrl" class="priv-divert" @click="navToDivert">
      <image class="priv-divert-img" :src="guideUrl" mode="widthFix" />
    </view>
    <!-- #endif -->
    <popCard
      v-if="isShow"
      :denomination="denomination"
      :limit-desc="limitDesc"
      :card-valid-period="cardValidPeriod"
      class="pop"
      @closePopCard="closePopCard"
    />
    <tougdunCanvas />
  </likeGood>
</template>
<script>
import { guideStream } from "@/api/pay.api.js";
import likeGood from "@/components/likeGood";
import popCard from "./components/popCard.vue";
import { payTypeMap } from "./STATIC_DATA";
import couponSwiper from "./components/couponSwiper";
import { saTrackEvent } from "@/utils/sa";
import { h5Mixin } from "@/utils/h5Mixin";
import { getVaildTmplIds, submitSubcribeInfo, getAcceptList } from "@/utils/subscribe";
import { getVaildSubTmplIds } from "@/api/home.api";
import tougdunCanvas from "@/components/tougdunCanvas.vue";
import cfg from "@/config/index";
import { smTrackEvent } from "@/utils/shumei";
const tmplIds = [
  cfg.SUB_MSG_LIST.SELLER_SHIP,
  cfg.SUB_MSG_LIST.ORDER_RECEIPT,
  cfg.SUB_MSG_LIST.COUPON_RECEIPT
];
let vaildTmplIds = [];
export default {
  components: {
    likeGood,
    couponSwiper,
    popCard,
    tougdunCanvas
  },
  mixins: [h5Mixin()],
  data() {
    return {
      guideUrl: "",
      jumpUrl: "",
      couponList: [],
      money: "00.00",
      orderNo: null,
      freeAmount: null,
      list: {},
      showDivert: false,
      isShow: false,
      denomination: "",
      limitDesc: null,
      cardValidPeriod: null,
      eventPoint: null,
      text: "",
      icon: ""
    };
  },
  async onLoad({ amount, orderNo, freeAmount, payType }) {
    this.showDivert = uni.getStorageSync("tenantId") == 560761 ? true : false; // 羊小咩租户展示私域导流入口
    console.log({ amount, orderNo, freeAmount, payType });
    smTrackEvent({
      eventId: "finishOrder",
      orderId: orderNo,
      orderResult: "2",
      passThrough: {
        payErrorReason: ""
      }
    });
    this.money = amount;
    this.orderNo = orderNo;
    this.freeAmount = freeAmount;
    console.log(this.isShow, "11111");
    this.list = {
      payType: payType,
      paySuccess: true,
      orderNo: this.orderNo
    };
    const [data, err] = await guideStream(this.list);
    if (!err) {
      if (data.cardInfo) {
        this.denomination = data.cardInfo.denomination;
        this.limitDesc = data.cardInfo.limitDesc;
        this.cardValidPeriod = data.cardInfo.cardValidPeriod;
      }
      /* #ifdef MP-WEIXIN */
      data.guideList.forEach(item => {
        if (item.type === 1) {
          this.guideUrl = item.image;
          this.jumpUrl = item.jumpUrl || "";
        }
      });
      /* #endif */
      this.eventPoint = data?.eventPointInfo?.eventPoint;
      this.icon = data?.eventPointInfo?.icon;
      this.text = data?.eventPointInfo?.text;
      this.couponList = data?.couponList;
      this.isShow = !!(this.denomination && this.limitDesc && this.cardValidPeriod);
      this.$ry?.payment(orderNo, amount, "CNY", payTypeMap[payType]);
      // #ifdef MP-WEIXIN
      vaildTmplIds = await getVaildSubTmplIds(tmplIds);
      // #endif
    }
  },
  methods: {
    goHome() {
      uni.switchTab({
        url: "/pages/index/index"
      });
    },
    closePopCard() {
      this.isShow = false;
    },
    setSubMsg() {
      if (!this.$config("yxm")) {
        this.goOrderDetail();
        return;
      }
      // #ifdef MP-WEIXIN
      // 非羊小咩不触发订阅消息
      if (!vaildTmplIds.length) return;
      wx.requestSubscribeMessage({
        tmplIds: vaildTmplIds,
        success: res => {
          this.submitInfo(res);
          this.goOrderDetail();
          const vaildIds = getVaildTmplIds(res);
          saTrackEvent("MINI_MessageSubscriptionPopupBtnClick", {
            trigger_node: "点击支付成功页查看订单",
            check_content: vaildIds,
            buttons_name: "允许"
          });
        },
        fail: err => {
          console.error("requestSubscribeMessage", err);
          saTrackEvent("MINI_MessageSubscriptionPopupBtnClick", {
            trigger_node: "点击支付成功页查看订单",
            check_content: "商家发货通知,优惠券到账通知,优惠券过期通知",
            buttons_name: "取消"
          });
          this.goOrderDetail();
        }
      });
      // #endif
      /* #ifndef MP-WEIXIN */
      this.goOrderDetail();
      saTrackEvent("MINI_MessageSubscriptionPopupBtnClick", {
        trigger_node: "点击支付成功页查看订单",
        check_content: [],
        buttons_name: "允许"
      });
      /* #endif */
    },
    submitInfo(res) {
      const acceptList = getAcceptList(res);
      submitSubcribeInfo(acceptList);
    },
    goOrderDetail() {
      saTrackEvent("PD_YXMMAEC_UserClickCashierCheckOrderBtn", {
        order_id: this.orderNo
      });
      uni.reportAnalytics("c_cashiercheckorderbtn", {
        order_id: this.orderNo
      });
      uni.redirectTo({
        url: `/pages/order/orderList?state=0`
      });
      // uni.redirectTo({
      //   url: `/pages/order/orderDetail?orderNo=${this.orderNo}`
      // });
    },
    navToDivert() {
      const activityType = this.jumpUrl.split("activityType=")[1];
      uni.navigateTo({
        url: `/pages/activity/divertPrivDomain?activityType=${activityType}`
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.card {
  margin: $uni-spacing-col-md;
  background-color: white;
  border-radius: $uni-border-radius-lg;
  padding: 56rpx $uni-spacing-row-base $uni-spacing-row-base $uni-spacing-row-base;

  .info {
    display: flex;
    justify-content: center;
    align-items: center;

    &__image {
      width: 100px;
      height: 100px;
    }

    &__text {
      margin-left: $uni-spacing-row-lg;
      font-size: $font-lg;
    }

    &__desc {
      display: flex;
      flex-direction: column;
    }

    &__money {
      margin-top: $uni-spacing-col-base;
    }
    &__free {
      color: $font-color-light;
      font-size: $font-md;
      margin-top: $uni-spacing-col-base;
    }
  }

  // .tips {
  //   margin-top: $uni-spacing-col-lg;
  //   text-align: center;
  //   font-size: $font-sm;
  //   color: $font-color-light;
  // }
  .growth {
    display: flex;
    width: 654rpx;
    height: 88rpx;
    background-color: #fffbf2;
    align-items: center;
    justify-content: space-between;
    margin-top: 18rpx;
    border-radius: 16rpx;
    &__image {
      width: 43px;
      height: 54px;
      opacity: 0.5;
    }
    &__growtext {
      color: #282828;
      font-size: $font-sm;
      position: absolute;
      top: 10rpx;
      left: calc((100% - 232rpx) / 2 + 40rpx);
    }

    &__text {
      // margin-left: $uni-spacing-row-lg;
      color: #282828;
      font-size: $font-sm;
    }

    &__color {
      color: #ffa130;
      margin-right: 10rpx;
    }

    &__leftdesc {
      width: 344rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    &__rightdesc {
      margin: 22rpx 20rpx 26rpx 0;
    }
  }

  .actions {
    display: flex;
    flex-direction: row;
    margin-top: 42rpx;

    &__back {
      border: 1px solid $uni-text-color-grey;
      color: $uni-text-color-grey;
    }

    &__order {
      margin-left: $uni-spacing-row-base;
      color: #ec1500;
      border: 1px solid #ec1500;
    }

    button {
      flex: 1;
      border-radius: $uni-border-radius-xl;
      font-size: $line-height-md;
    }
  }
}
.priv-divert {
  padding: 0 20rpx;
  margin-bottom: 10rpx;
  &-img {
    border-radius: 16rpx;
    overflow: hidden;
    width: 100%;
  }
}
// .mark {
//   position: absolute;
//   height: 100%;
//   color: #fff;
//   background: rgba(0, 0, 0, 0.5);
//   left: 0%;
//   right: 0%;
//   font-size: 26rpx;
//   text-align: center;
//   box-shadow: 2px -3px 100px -5px #ffffff;
//   z-index: 99;
// }
/* .pop {
  position: fixed;
  top: 260rpx;
  left: 39rpx;
  z-index: 999;
} */
</style>
