<template>
  <!-- #ifdef H5 -->
  <view>
    <Loading :type="3" :loadStatus="loadStatus" :showText="errorText" />

    <zj-page-layout v-if="detail" :hasFooter="true">
      <view style="padding: 1rpx 30rpx">
        <view class="top-container card mt30">
          <view class="icon">
            <text class="iconfont icon-chenggong true" v-if="result === 1"></text>
            <text class="iconfont icon-shibai false" v-if="result === 0"></text>
          </view>
          <view class="title" v-if="result === 1">支付成功</view>
          <view class="title" v-if="result === 0">支付失败</view>
          <view class="price"
            >¥<text>{{ detail.totalAmount | priceFilter }}</text></view
          >
        </view>

        <view class="pay-container card mt30" v-if="result === 1">
          <view class="title">支付信息</view>
          <view class="row">
            <view class="label">支付单号：</view>
            <view class="value">{{ orderId }}</view>
          </view>
          <view class="row">
            <view class="label">支付金额：</view>
            <view class="price">¥{{ detail.totalAmount | priceFilter }}</view>
          </view>
          <view class="row">
            <view class="label">支付时间：</view>
            <view class="value">{{ detail.payTime || '' }}</view>
          </view>
          <view class="row">
            <view class="label">支付方式：</view>
            <view class="value">{{ detail.payType | payTypeFilter }}</view>
          </view>
          <view class="row">
            <view class="label">支付结果：</view>
            <view class="value" v-if="result === 1">成功</view>
            <view class="value" v-if="result === 0">失败</view>
          </view>
        </view>
      </view>

      <template slot="footer">
        <view class="footer-btn-group">
          <u-button text="返回订单" type="primary" size="large" @click="toOrderDetail" v-if="result === 1"></u-button>
          <u-button text="重新扫码" type="primary" size="large" @click="backPage" v-if="result === 0"></u-button>
        </view>
      </template>
    </zj-page-layout>
  </view>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view
    :src="webViewHref(`/packageMaterial/pages/newSale/result`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
  filters: {
    payTypeFilter(val) {
      const MAP = {
        WECHAT: '微信支付',
        LINE: '线下支付',
      }
      return MAP[val];
    }
  },

  data() {
    return {
      orderId: null,
      wbId: null,
      refresherTriggered: false,
      loadStatus: 0,
      errorText: '',
      detail: null,
      result: 0
    };
  },

  onLoad({ handleOrderId, result, wbId }) {
    this.orderId = handleOrderId;
    this.result = Number(result);
    this.wbId = wbId;
    this.getDetail();
  },

  methods: {
    getDetail() {
      let url = '', params = {};
      if(this.wbId) {
        url = '/engin/material/detail';
        params.id = this.orderId;
      }else {
        url = '/pay/getOrder';
        params.orderId = this.orderId;
      }
      this.$api.post(url, params).then(res => {
        this.detail = res.data;
        this.loadStatus = 0;
      }).catch(res => {
        this.errorText = res.message;
        this.loadStatus = 2;
      }).finally(res => {
        this.refresherTriggered = false;
      })
    },

    toOrderDetail() {
      this.$navToPage({
        url: `/packageMaterial/pages/index?type=P`,
      }, 'reLaunch');
    },

    backPage() {
      this.crossPage.$emit('reScanCode', '');
      this.$navToPage({
        delta: 1
      }, 'navigateBack')
    }
  },
};
// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },
  onLoad(pam) {
    this.pam = pam;
  }
}
// #endif
</script>

<style lang="scss" scoped>
.card {
  background: #ffffff;
  box-shadow: -10rpx 12rpx 96rpx 2rpx rgba(31, 36, 99, 0.05);
  border-radius: 20rpx;
  overflow: hidden;
}

.top-container {
  padding: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .icon {
    text {
      font-size: 110rpx;
      &.true {
        color: $success-color;
      }
      &.false {
        color: $minor-color;
      }
    }
  }
  .title {
    font-size: 32rpx;
    margin-top: 20rpx;
    font-weight: 500;
  }
  .price {
    font-size: 32rpx;
    margin-top: 12rpx;
    font-weight: 500;
    text {
      font-size: 48rpx;
    }
  }
}

.pay-container {
  padding: 30rpx;
  .title {
    font-size: 32rpx;
    font-weight: 500;
  }
  .row {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    .label {
      color: $sec-font;
    }
    .price {
      color: $minor-color;
      font-weight: 500;
    }
  }
}
</style>
