<template>
  <likeGood :page-type="4">
    <view class="card">
      <view class="info">
        <image class="info__image" src="https://img.lkbang.net/xcx/pay-fail.png" />
        <text class="info__text">订单支付失败!</text>
      </view>
      <view class="tips">
        <text>{{ reason }}</text>
      </view>
      <button plain="true" type="primary" hover-class="none" @click="goPay">重新支付</button>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view v-if="showDivert && guideUrl" class="priv-divert" @click="navToDivert">
      <image class="priv-divert-img" :src="guideUrl" mode="widthFix" />
    </view>
    <!-- #endif -->
    <tougdunCanvas />
  </likeGood>
</template>
<script>
import { guideStream } from "@/api/pay.api.js";
import likeGood from "@/components/likeGood";
import { saTrackEvent } from "@/utils/sa";

import tougdunCanvas from "@/components/tougdunCanvas.vue";
import { paymentConfig } from "@/utils/mpConfig/types";
import { smTrackEvent } from "@/utils/shumei";

export default {
  async onLoad({ reason, orderNo, payType }) {
    smTrackEvent({
      eventId: "finishOrder",
      orderId: orderNo,
      orderResult: "1",
      passThrough: {
        payErrorReason: reason || ""
      }
    });
    this.showDivert = uni.getStorageSync("tenantId") == 560761 ? true : false; // 羊小咩租户展示私域导流入口
    this.reason = reason || "";
    this.orderNo = orderNo;
    /* #ifdef MP-WEIXIN */
    this.list = {
      payType: payType || 1,
      paySuccess: false,
      orderNo: this.orderNo
    };

    const [data, err] = await guideStream(this.list);
    if (!err) {
      const [guideItem] = (data?.guideList || []).filter(item => item.type === 1);
      console.log(guideItem);
      if (guideItem) {
        this.guideUrl = guideItem.image;
        this.jumpUrl = guideItem.jumpUrl || "";
      }
    }
    /* #endif */
  },
  components: {
    likeGood,
    tougdunCanvas
  },
  data() {
    return {
      guideUrl: "",
      jumpUrl: "",
      reason: "",
      orderNo: "",
      list: {},
      showDivert: false
    };
  },
  methods: {
    goPay() {
      saTrackEvent("PD_YXMMAEC_UserClickCashierPaymentAgainBtn", {
        order_id: this.orderNo
      });
      uni.reportAnalytics("c_cashierpaymentagainbtn", {
        order_id: this.orderNo
      });
      uni.redirectTo({
        url: `${paymentConfig.payUrl}?orderNo=${this.orderNo}`
      });
    },
    navToDivert() {
      saTrackEvent("PD_YXMMAEC_UserClickPaymentPageExtensionBanner", {
        page_name: "支付失败"
      });
      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-col-md $uni-spacing-col-md $uni-spacing-col-md;

  .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;
    }
  }
  .tips {
    margin-top: $uni-spacing-col-lg;
    text-align: center;
    font-size: $font-sm;
    color: $font-color-light;
  }

  button {
    margin-top: 40rpx;
    border-radius: $uni-border-radius-xl;
    font-size: $line-height-md;
    color: #ec1500;
    border: 1px solid #ec1500;
  }
}
.priv-divert {
  padding: 0 20rpx;
  margin-bottom: 6rpx;
  &-img {
    border-radius: 16rpx;
    overflow: hidden;
    width: 100%;
  }
}
</style>
