<template>
  <div class="result">
    <status-bar>
      <span>趣味配对</span>
    </status-bar>

    <div class="banner">
      <img class="img1" src="@/assets/img/result/img1.png" alt="" />

      <img class="img2" src="@/assets/img/result/img2.png" alt="" />
      <div class="fc-f fs-40 fw-4 ff-f4">
        {{ baseInfo[0].name + "&" + baseInfo[1].name }}
      </div>
    </div>

    <div class="row-center-center">
      <div class="content">
        <div class="fs-28 fc-6 ff-pp fw-4">
          <template v-if="is_result">
            <div class="desc">
              <div class="rate row-center-center fc-sys5 fs-40 fw-5">
                {{ result.rate }}契合度
              </div>
              <div class="ln">{{ result.desc }}</div>
            </div>

            <div>
              <div class="row-center-center img-father">
                <img class="img-" src="@/assets/img/result/img3.png" alt="" />
              </div>
              <div class="ln">
                {{ result.man }}
              </div>
            </div>

            <div>
              <div class="row-center-center img-father">
                <img class="img-" src="@/assets/img/result/img4.png" alt="" />
              </div>
              <div class="ln">
                {{ result.female }}
              </div>
            </div>

            <div>
              <div class="row-center-center img-father">
                <img class="img-" src="@/assets/img/result/img5.png" alt="" />
              </div>
              <div class="ln">
                {{ result.both }}
              </div>
            </div>

            <div>
              <div class="row-center-center img-father">
                <img class="img-" src="@/assets/img/result/img6.png" alt="" />
              </div>
              <div class="ln">
                {{ result.marryChange }}
              </div>
            </div>

            <div>
              <div class="row-center-center img-father">
                <img class="img-" src="@/assets/img/result/img7.png" alt="" />
              </div>
              <div class="ln">{{ result.sugg }}</div>
            </div>
          </template>
          <template v-else>
            <div class="row-center-center">支付完成后延迟2s左右</div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StatusBar from "@/components/StatusBar";
import API from "@/service/api";
import utils from "@/utils";

export default {
  components: {
    StatusBar,
  },

  data() {
    return {
      is_result: false,
      result: {},
      baseInfo: [],
      counter: 0,
      countdown: 0,
    };
  },

  mounted() {
    const n = JSON.parse(utils.getCookie("baseInfo")).baseInfo;
    this.baseInfo = n ? n : ["name", "name"];

    this._queryOrder();
    // this._fetchInfo();
  },

  methods: {
    // 网络请求，获取支付结果
    _fetchInfo() {
      const orderId = utils.getCookie("orderId");

      let params = {
        pkg: "com.h5game.peidui",
        orderId: orderId,
      };
      API.API_fetchInfo(params).then((res) => {
        if (res.status != 200) {
          setTimeout(() => {
            this.counter += 1;
            if (this.counter >= 80) {
              return;
            } else {
              this.is_result = false;
              return this._fetchInfo();
            }
          }, 1000);
          return;
        } else {
          this.result = res.result.data;
          this.is_result = true;
        }
      });
    },

    // 网络请求，当支付失败时，跳转到支付页面
    _queryOrder() {
      let orderId = utils.getCookie("orderId");
      let h5LogsObj = JSON.parse(decodeURI(utils.getCookie("h5LogsObj")));

      let params = {
        outTradeNo: orderId,
        mediaType: 'h5'
      };
      API.API_gatewayQueryOrder(params).then((res) => {
        let status = res.result.data.status;
        if (this.is_result == true) {
          return;
        }
        if (status == 200) {
          this._fetchInfo();
          return;
        } else {
          // 支付不成功
          setTimeout(() => {
            if (this.countdown > 1) {
              return this.$router.push({ path: "/pay", query: this.baseInfo });
            }
            this.countdown += 1;
            this._queryOrder();
          }, 1000);
        }
      });
    },
  },
};
</script>

<style scoped src='./index.css'>
</style>
