<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 v-if="isApp" :class="['actions', !isOrder && 'no-order']">
      <cr-button type="primary" shape="circle" class="btn-primary" @click="navigateBack"
        >返回订单列表</cr-button
      >
    </div>
  </div>
</template>
<script>
import { queryPayStatus } from '@/api/pay.api';
import cookies from '@/service/cookieStorage.service';
import { goUrlExtends } from './extends';
import { isApp } from '@/service/validation.service';
export default {
  components: {},
  extends: goUrlExtends,
  data() {
    return {
      orderNo: null,
      timer: null,
      time: 10,
      init: false,
      returnUrl: '',
      isOrder: true,
      isApp
    };
  },
  created() {
    this.orderNo = this.$route.query.orderNo || cookies.get('orderNo')?.orderNo;
    if (!isApp) {
      setTimeout(() => {
        window.location.href = 'xyqb://openApp';
      }, 2000);
    }
  },
  mounted() {
    this.$dialog({
      message: '请确认订单已完成支付',
      confirmButtonText: '已完成支付',
      cancelButtonText: '重新支付',
      confirmButtonColor: '#EC1500',
      onCancel: () => {
        this.goPay();
      },
      onConfirm: () => {
        this.init = true;
        this.loop();
      }
    });
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    navigateBack() {
      this.$router.replace({ name: 'orderList', params: { status: 0 } });
    },
    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.replace({ name: 'paySuccess', query: { orderNo: this.orderNo } });
    },
    goPay() {
      this.$router.replace({ name: 'pay', query: { orderNo: this.orderNo } });
    },
    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;
    &.no-order {
      justify-content: center;
    }
    &__back {
      color: @cherry-color-error;
      border: 1px solid @cherry-color-error;
    }

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

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