<template>
  <div class="card">
    <div class="info">
      <cr-image
        width="63px"
        height="63px"
        class="info__image"
        src="../../assets/images/pay/paying.png"
      />
      <div v-if="init" class="info__desc">
        <p class="info__text">
          <span v-if="time">（{{ time }}s）</span>支付中...
        </p>
      </div>
    </div>
    <p class="tips">
      努力返回支付结果中，请留心查看！
    </p>
    <div class="actions">
      <cr-button
        class="actions__back"
        :plain="true"
        type="primary"
        shape="circle"
        @click="goHome('正在支付')"
        >返回首页</cr-button
      >
      <cr-button shape="circle" type="primary" @click="goOrderDetail('正在支付')"
        >查看订单</cr-button
      >
    </div>
  </div>
</template>
<script>
import { queryPayStatus } from '@/api/pay.api';
import cookies from '@/service/cookieStorage.service';
import localStorage from '@/service/localStorage.service';
import { goUrlExtends } from './extends';
import { isIOS } from '@/service/validation.service';
export default {
  components: {},
  extends: goUrlExtends,
  data() {
    return {
      orderNo: null,
      timer: null,
      time: 10,
      init: false,
      isWx: false
    };
  },
  created() {
    this.orderNo = this.$route.query.orderNo || cookies.get('orderNo')?.orderNo;
    this.isWx = this.$route.query.isWx;
    if (!localStorage.get('isAppInner')) {
      const schema = isIOS ? 'xincheng://' : 'app://xincheng/splash';
      setTimeout(() => {
        window.location.href = schema;
      }, 2000);
    }
  },
  mounted() {
    this.$track?.registeredEvents('h5_RechargeResultPageExposure', {
      pay_status: '正在支付'
    });
    const amount = cookies.get('amount') || {};
    const payTrackInfo = cookies.get('payTrackInfo') || {};
    this.$track?.registeredEvents('H5_2BPaymentPageExposure', {
      order_no: this.orderNo,
      pay_result: '正在支付',
      vcc_state: payTrackInfo.vcc_state,
      pay_method: payTrackInfo.pay_method,
      pay_amount: amount.finalAmt
    });
    this.$dialog({
      message: '请确认订单已完成支付',
      confirmButtonText: '已完成支付',
      cancelButtonText: '重新支付',
      confirmButtonColor: '#EC1500',
      onCancel: () => {
        this.$track?.registeredEvents('h5_RechargeResultPageClick', {
          pay_status: '正在支付',
          buttons_name: '重新支付'
        });
        this.goPay();
      },
      onConfirm: () => {
        this.init = true;
        this.loop();
      }
    });
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    loop() {
      this.query();
      this.timer = setInterval(() => {
        this.time -= 1;
        if (this.time % 2 === 0) {
          this.query();
        }
        if (this.time < 1) {
          clearInterval(this.timer);
        }
      }, 2000);
    },
    goSuccess() {
      // 支付成功
      this.$router.push({ name: 'paySuccess' });
    },
    goPay() {
      if (this.isWx) {
        this.$router.go(-2);
        return;
      }
      this.$router.go(-1);
    },
    async query() {
      const [data, error] = await queryPayStatus({ orderNo: this.orderNo });
      if (error) {
        this.$router.push({
          name: 'payFail',
          query: { reason: error.message, orderNo: this.orderNo }
        });
        return;
      }
      if (+data?.payStatus === 3) {
        this.goSuccess();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.card {
  margin: @padding-sm;
  background-color: @white;
  border-radius: @border-radius-sm;
  padding: 28px @padding-sm @padding-sm @padding-sm;

  .info {
    display: flex;
    justify-content: center;
    align-items: center;

    &__image {
      width: 100px;
      height: 100px;
    }

    &__text {
      .text-16;
      margin-left: @padding-md;
    }

    &__desc {
      display: flex;
      flex-direction: column;
    }

    &__money {
      margin-top: @padding-xs;
    }
    &__free {
      .text-13;
      margin-top: @padding-xs;
      color: @font-color-light;
    }
  }

  .tips {
    .text-12;
    text-align: center;
    margin-top: @padding-lg;
    color: @font-color-light;
  }

  .actions {
    display: flex;
    flex-direction: row;
    margin-top: @padding-lg;
    justify-content: space-between;

    &__back {
      color: @cherry-color-error;
      border: 1px solid @cherry-color-error;
    }

    &__order {
      @primary-bg();
      margin-left: @padding-sm;
    }

    button {
      .text-17;
      width: 161px;
    }
  }
  .info_button {
    width: 100%;
  }
}
</style>
