<template>
  <div class="order-card-panel">
    <div class="header">
      <div class="order-no">
        <span>订单编号: </span><span>{{options.number}}</span>
      </div>
      <div class="order-status" :class="options.orderFlag">
        {{getPayStatus}}
      </div>
    </div>
    <div class="content">
      <div class="product-img" @click="toDetail()">
        <img class="img" :src="options.bundle.icon2" alt="">
      </div>
      <div class="product-info">
        <div @click="toDetail()">
          <div class="title">{{options.bundleName}}</div>
          <div class="desc">{{options.bundle.tag}}</div>
        </div>
        <div>
          <div class="price">
            ￥{{options.totalAmount}}
          </div>
          <div class="btn-control" v-if="options.orderFlag === 'UNPA'">
            <van-button class="btn" size="small" @click="cancelHandler()">取消订单</van-button>
            <van-button class="btn" size="small" type="danger" :disabled="payLoading" :loading="payLoading" @click="toPay()">立即支付</van-button>
          </div>
          <div class="btn-control" v-else>
            <van-button class="btn" size="small" @click="toDetail()">查看详情</van-button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { objToUrl } from '@/utils/index';
import { cancelOrder, wxPay, getPayStatus } from '@/api/bundle';
import { subscribePayMessage, subscribeHxMessage } from '@/utils/index.js';
export default {
  name: 'OrderCard',
  props: {
    options: {
      type: 'Object',
      default: function(){
        return {}
      }
    }
  },
  data() {
    return {
      payLoading: false
    }
  },
  computed: {
    getPayStatus() {
      const dict = {
        'UNPA': '未支付',
        'INPA': '支付中',
        'PAED': '已支付',
        'CAEL': '已取消',
        'SYCA': '已取消',
        'RUND': '已退款'
      };
      return dict[this.options.orderFlag];
    }
  },
  methods: {
    cancelHandler() {
      const { options } = this;
      const _this = this;
      cancelOrder({
        id: options.id
      }).then(res => {
        let icon = 'none';
        if (res.status === '200') {
          _this.$emit('refresh');
          icon = 'success';
        }
        wx.showToast({
          title: res.message,
          icon: icon,
          duration: 2500
        });
      });
    },
    // 查询支付状态
    queryPayStatus (tradeNo){
      getPayStatus({ tradeNo: tradeNo }).then(result => {
        wx.hideLoading()
        if (result.status === '200') {
          wx.redirectTo({ url: `/pages/paySuccess/main?` + objToUrl(result.data) });
        }
      });
    },
	  // 去支付
    toPay() {
	  let _this = this
	  if(this.payLoading){return}
    this.payLoading = true
      //订阅消息
      subscribePayMessage(function(res){
        wx.showLoading({title:'正在支付中...'})
        wxPay({
          id: _this.options.id
        }).then(res => {
          if (res.status === '200') {
            setTimeout(function(){
              _this.queryPayStatus(res.tradeNo)
            },500)
          } else {
            wx.showToast({
              title: res.message,
              icon: 'none',
              duration: 2500
            });
          }
          _this.payLoading = false
        }).catch(err => {
          let message = '支付失败!';
          if (err.errMsg === 'requestPayment:fail cancel') {
            message = '您取消了支付';
          }
          wx.showToast({
            title: message,
            icon: 'none',
            duration: 2500
          });
          _this.payLoading = false
        });
         _this.$emit('refresh');
      })
    },
    toDetail() {
      const { options } = this;
      wx.navigateTo({
        url: `/pages/orderDetail/main?id=${options.id}`
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.order-card-panel {
  margin-top: 10rpx;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 25rpx;

  .header, .content {
    box-sizing: border-box;
    padding: 15rpx 25rpx;
  }

  .header {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    border-bottom: 1px solid #e9eaec;
    .order-no {
      color: #80848f;
    }
    .UNPA {
      color: #ed3f14;
    }
    .INPA {
      color: #00aaff;
    }
    .PAED {
      color: #00aa00;
    }
    .CAEL {
      color: #999999;
    }
    .SYCA {
      color: #999999;
    }
    .RUND {
      color: red;
    }
  }

  .content {
    display: flex;
    width: 100%;
    height: 250rpx;

    .product-img {
      width: 35%;
      border-radius : 0.5em;
      overflow: hidden;
      border: 1px solid #f8f8f8;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.product-info {
  padding-left: 1em;
  box-sizing: border-box;
  font-size: 25rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    font-size: 1.2em;
    padding: 10rpx 0;
  }

  .desc {
    color: #80848f;
    font-size: 0.85em;
  }

  .price {
    color: #ff5500;
    font-size: 1.4em;
    font-weight: bold;
  }

  .btn-control {
    text-align: right;

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