<template>
  <div class="container">
    <div class="pay-success">
      <van-icon name="passed" color="green" size="5em" v-if="payStatus === 'PAED'"/>
      <van-icon name="close" color="red" size="5em" v-else/>
      <div class="pay-info">
        {{title}}
        <div class="desc" v-if="payStatus === 'PAED'">
          实付金额{{payAmount}}元
        </div>
      </div>
      <div class="pay-desc">
        您可以在丘比养车平台合作门店进行消费</br>
        消费是请将"我的订单"中的二维码出示给门店进行核销
      </div>

      <div class="pay-control">
        <van-button class="btn" plain hairline type="primary" @click="toStore">可用门店</van-button>
        <van-button class="btn" type="danger" @click="toOrderDetail">查看订单</van-button>
      </div>

    </div>

  </div>
</template>

<script>
import { getPayStatus } from '@/api/bundle';
export default {
  name: 'packageDetail',

  data() {
    return {
      payStatus: '',
      payAmount: ''
    };
  },
  computed: {
    title() {
      return this.payStatus === 'PAED' ? '支付成功' : '支付失败';
    }
  },
  methods: {
    toStore() {
      wx.reLaunch({ url: '/pages/store/main' });
    },
    toOrderDetail() {
      const { orderBundleId } = this.$mp.query;
      wx.navigateTo({
        url: `/pages/orderDetail/main?id=${orderBundleId}`
      });
    }
  },

  onShow() {
    console.log(this.$mp.query)
    const { payAmount, payStatus, tradeNo } = this.$mp.query;
    if (payStatus !== 'PAED') {
      getPayStatus({ tradeNo }).then(result => {
        if (result.status === '200') {
          this.payAmount = result.data.payAmount;
          this.payStatus = result.data.payStatus;
        }
      });
    } else {
      this.payAmount = payAmount;
      this.payStatus = payStatus;
    }
  }

};
</script>

<style lang="stylus">
.pay-success {
  text-align: center;
  padding: 30rpx 20rpx;

  .pay-info {
    color: #f44;
    font-weight: bold;
    padding-top: 15rpx;
  }

  .desc {
    padding-top: 25rpx;
    font-size: 0.8em;
  }

  .pay-desc {
    padding-top: 50rpx;
    font-size: 0.7em;
  }

  .pay-control {
    margin-top: 50rpx;

    .btn + .btn {
      margin-left: 20rpx;
    }
  }
}
</style>
