<template>
  <div class="pay-result-con">
    <div class="top">
      <div class="loading" v-show="type == 'loading'">
        <div class="result-text">支付结果确认中</div>
        <div class="animation">
          <div class="black" />
          <div class="red" />
        </div>
      </div>
      <div class="success" v-show="type == 'success'">
        <m-icon icon="icon-pay-success" :size="70" className="icon" />
        <div class="result-text">支付成功</div>
      </div>
      <div class="fail" v-show="type == 'fail'">
        <m-icon icon="icon-pay-fail" :size="70" className="icon" />
        <div class="result-text">支付失败</div>
        <div class="reason">账户余额不足</div>
      </div>
    </div>
    <div class="info">
      <div class="item flex-default">
        <div class="label">支付编号：</div>
        <div class="val">{{ pid }}</div>
      </div>
      <div class="item flex-default">
        <div class="label">付款金额：</div>
        <div class="val">￥{{ payInfo[payTypeObj.paidAmtKey].toFixed(2) }}</div>
      </div>
      <div class="item flex-default">
        <div class="label">下单时间：</div>
        <div class="val">{{ payInfo.createTime | timeFilter }}</div>
      </div>
      <div class="item flex-default">
        <div class="label">支付方式：</div>
        <div class="val">{{ PayMethodTypeLabel[payInfo.payType] || '--' }}</div>
      </div>
    </div>
    <div class="opt flex-default">
      <van-button class="normal" @click="goHome" round>返回首页</van-button>
      <van-button
        v-show="type != 'fail'"
        plain
        class="normal"
        @click="toOrder"
        round
      >
        查看订单
      </van-button>
      <van-button
        type="primary"
        v-show="type == 'fail'"
        class="repay"
        @click="repay"
        round
      >
        重新支付
      </van-button>
    </div>
    <div class="tip">
      温馨提醒：支付结果可能因为外部支付服务繁忙，无法及时获取支付结果，您可以稍后到我的订单查看本订单的支付结果！
    </div>
    <van-popup v-model="showPopup" round >
      <div class="goods-detail-con">
        <div class="goods-detail-card">
          <div class="title">恭喜您获得数字藏品</div>
          <img class="thumb" :src="goodsDetail.thumb" alt="" />
          <div class="name">{{goodsName}}</div>
        </div>
        <div class="close-img flex-center" @click="showPopup=false">
          <van-icon name="cross"  color="#ffffff" size="12px"/>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { PayType, PayTypeObj,SalesType } from "@/enums";
import { Icon } from 'vant';
const PayMethodType = {
  DEFAULT: 0,
  ALIPAY: 1,
  WXPAY: 2,
  CCNY: 3,
  CREDIT: 4,
};
const PayMethodTypeLabel = {
  [PayMethodType.DEFAULT]: "默认",
  [PayMethodType.ALIPAY]: "支付宝",
  [PayMethodType.WXPAY]: "微信",
  [PayMethodType.CCNY]: "CCNY",
  [PayMethodType.CREDIT]: "积分",
};
export default {
   components:{
    [Icon.name]: Icon,
  },
  data() {
    return {
      PayMethodType,
      PayMethodTypeLabel,
      type: "loading",
      pid: "",
      payInfo: {
        createTime: 0,
        unpaidAmount: 0,
        paidAmount: 0,
        payType: 0,
      },
      oid:"",
      showPopup:false,
      goodsDetail:{}
    };
  },
  computed: {
    oidList() {
      if (this.payInfo && this.payInfo.oidsJson) {
        return JSON.parse(this.payInfo.oidsJson);
      }
      return [];
    },
    payTypeMap() {
      let map = {};
      Object.keys(PayType).forEach((key) => {
        map[key] = this.payType == PayType[key];
      });
      return map;
    },
    payTypeObj() {
      let obj = PayTypeObj[this.payType];
      return obj || PayTypeObj[PayType.NORMAL];
    },
    goodsName(){
      let name=""
      if(this.goodsDetail.salesType===SalesType.BLINDBOX){
        name=this.goodsDetail.propList?this.goodsDetail.propList[0].value:this.goodsDetail.name
      }else{
        name=this.goodsDetail.name
      }
      return name
    },
  },
  methods: {
    pollingPayState() {
      this.$api({
        apiName: this.payTypeObj.detailApi,
        postData: this.pid,
        success: (res) => {
          this.payInfo = res;
          let { success, loading, fail } = this.payTypeObj.stateMap;
          let state = res[this.payTypeObj.stateKey] || loading;
          if (state == success) {
            this.paySuccess();
          } else if (state == loading) {
            this.payLoading();
          } else if (state == fail) {
            this.payFail();
          }
        },
      });
    },
    payLoading() {
      setTimeout(() => {
        this.pollingPayState();
      }, 1000);
    },
    paySuccess() {
      setTimeout(() => {
        this.type = "success";
        this.getOrderDetail()
      }, 1000);
    },
    getOrderDetail(){
      this.$api({
        apiName:"getOrderDetail",
        postData:this.oid,
        success:(res)=>{
          if(res.orders&&res.orders.length>0){
            this.goodsDetail=res.orders[0]
            this.showPopup=true
          }
        }
      })
    },
    payFail() {
      setTimeout(() => {
        this.type = "fail";
      }, 1000);
    },
    toOrder() {
      this.$router.push({ name: this.payTypeObj.toOrderName });
    },
    repay() {
      let query = { pid: this.pid, type: this.payType };
      this.$router.replace({ name: "payment", query });
    },
  },
  created() {
    this.pid = this.$route.params.pid;
    this.payType = this.$route.query.type;
    this.oid=this.$route.query.oid
    this.pollingPayState();
  },
};
</script>

<style lang="less">
.pay-result-con {
  height: 100%;
  > .top {
    padding: 45px 0 29px 0;
    border-bottom: 1px solid rgba(241, 241, 241, 1);
    margin-bottom: 20px;
    .loading,
    .success,
    .fail {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .icon {
      margin-bottom: 20px;
    }
    .result-text {
      margin-bottom: 10px;
      font-size: 20px;
      color: #140603;
      font-weight: bold;
    }
    .loading .animation {
      width: 50px;
      height: 50px;
      margin: 40px 0;
      position: relative;
      .black,
      .red {
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background: #81A4F9;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-animation: cubemove 1.8s infinite ease-in-out;
        animation: cubemove 1.8s infinite ease-in-out;
      }
      .red {
        background: #2C66F5;
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }

      @-webkit-keyframes cubemove {
        25% {
          -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
        }
        50% {
          -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
        }
        75% {
          -webkit-transform: translateX(0px) translateY(30px) rotate(-270deg)
            scale(0.5);
        }
        100% {
          -webkit-transform: rotate(-360deg);
        }
      }

      @keyframes cubemove {
        25% {
          transform: translateX(30px) rotate(-90deg) scale(0.5);
          -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
        }
        50% {
          transform: translateX(30px) translateY(30px) rotate(-179deg);
          -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
        }
        50.1% {
          transform: translateX(30px) translateY(30px) rotate(-180deg);
          -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
        }
        75% {
          transform: translateX(0px) translateY(30px) rotate(-270deg) scale(0.5);
          -webkit-transform: translateX(0px) translateY(30px) rotate(-270deg)
            scale(0.5);
        }
        100% {
          transform: rotate(-360deg);
          -webkit-transform: rotate(-360deg);
        }
      }
    }
    .fail .reason {
      line-height: 25px;
      width: fit-content;
      border: 1px solid #2C66F5;
      font-size: 12px;
      border-radius: 13px;
      padding: 0 20px;
      color: #2C66F5;
    }
  }
  > .info {
    padding-left: 45px;
    color: #140603;
    margin-bottom: 50px;
    .item {
      align-items: center;
    }
    .item .label {
      width: 75px;
      font-size: 13px;
      line-height: 30px;
      font-weight: bold;
    }
    .item .val {
      font-size: 13px;
      line-height: 30px;
    }
  }
  > .opt {
    padding: 0 60px;
    justify-content: space-between;
    align-items: center;
    button {
      height: 34px;
    }
    .normal {
      width: 113px;
      background: #ffffff;
      border: 1px solid #aeaeae;
      color: #140603;
      font-size: 13px;
    }
    .repay {
      width: 113px;
      font-size: 13px;
    }
  }
  > .tip {
    // margin-top: 200rpx;
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    font-size: 12px;
    color: #aeaeae;
    line-height: 17px;
    padding: 0 13px;
  }
  .van-popup--center.van-popup--round{
    border-radius: 0px;
  }
  .van-popup{
    background: transparent;
  }
  .goods-detail-con{
    .goods-detail-card {
      width:227px ;
      height: 284px;
      text-align: center;
      padding:17px 18px 14px;
      background: #ffffff;
      border-radius: 4px;
      .title{
        color: #030711;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 24px;
        margin-bottom: 21px;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
      }
      > .thumb {
        width: 120px;
        height: 167px;
        margin-bottom: 17px;
        object-fit: cover;
      }
      .name {
          color: #030711;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          height: 24px;
          font-size: 14px;
          font-weight: 500;
          line-height: 24px;
      }
    }
    .close-img{
      margin: 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #333333;
      margin-top: 65px;
    }
  }
}
</style>