<template>
  <div class="pay-info">
    <div class="img2-father row-center-center">
      <img class="img2" src="@/assets/img/pay/img2.png" alt="" />
    </div>

    <div class="row-around-center ff-pp fw-5 fs-32" style="margin-top: 0.28rem">
      <div class="col-center-center">
        <img class="img3" src="@/assets/img/pay/img3.png" alt="" />
        <span style="margin: 0.2rem 0 0.1rem 0">{{
          baseInfo.length > 0 ? baseInfo[0].name : ""
        }}</span>
        <span class="fs-24 fc-21 fw-4">男主角</span>
      </div>
      <div>
        <img class="img-hert" src="@/assets/img/pay/hert.png" alt="" />
      </div>
      <div class="col-center-center">
        <img class="img4" src="@/assets/img/pay/img4.png" alt="" />
        <span style="margin: 0.2rem 0 0.1rem 0">{{
          baseInfo.length > 0 ? baseInfo[1].name : ""
        }}</span>
        <span class="fs-24 fc-21 fw-4">女主角</span>
      </div>
    </div>

    <div
      class="fs-28 fc-sys5 ff-pp fw-4 row-center-center"
      style="margin-top: 0.36rem"
    >
      匹配契合度
    </div>

    <div class="img5-father row-center-center">
      <img class="img5" src="@/assets/img/pay/img5.png" alt="" />
    </div>

    <div class="img6-father row-center-center">
      <img class="img6" src="@/assets/img/pay/img6.png" alt="" />
    </div>

    <!-- 支付信息 -->
    <div class="row-around-center fc-6" style="margin-top: 0.38rem">
      <div>
        <div class="fs-28" style="margin-bottom: 0.12rem">
          特惠价：<span class="fc-sys2">￥{{ cash }}</span>
        </div>
        <div class="fs-24" style="text-decoration: line-through">
          原价：￥{{ originalPrice }}
        </div>
      </div>

      <div>
        <span class="fs-24" style="margin-bottom: 0.12rem">优惠倒计时：</span>
        <div class="fs-32">
          <span class="hour fc-f">{{ hour }}</span>
          <span>:</span>
          <span class="minute fc-f">{{ minute }}</span>
          <span>:</span>
          <span class="second fc-f">{{ second }}</span>
        </div>
      </div>
    </div>

    <!-- 支付按钮 -->
    <div
      class="row-center-center fc-f fs-36 ff-pp fw-5"
      style="margin-top: 0.66rem; position: relative"
    >
      <div
        ref="payBtn"
        class="pay-btn row-center-center"
        @click.once="_payment"
      >
        <div>立即支付</div>

        <div v-if="loading" class="loading"></div>
      </div>
    </div>

    <div class="row-center-center">
      <div class="test row-center-center fs-28 fc-6 fw-4 ff-pp">
        <div>
          已有<span class="fc-sys2">1597325</span>
          人进行了测算，测算结果帮助他们掌握
          了正确的求爱方式，找到了自己的真爱，<span class="fc-sys2">96.7%</span>
          的客户对测算结果表示满意。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import API from "@/service/api";
import utils from "@/utils";
export default {
  data() {
    return {
      hour: "00",
      minute: "00",
      second: "00",
      cash: 0,
      originalPrice: "139",
      baseInfo: [],
      loading: false,
    };
  },

  mounted() {
    let endTime = new Date().getTime() + 0.5 * 60 * 60 * 1000;
    let timer = setInterval(() => {
      this.showtime(endTime);
      if (new Date().getTime() >= endTime) {
        clearInterval(timer);
        this.hour = "00";
        this.minute = "00";
        this.second = "00";
      }
    }, 1000);

    this.baseInfo = JSON.parse(utils.getCookie("baseInfo"));

    this._payConfig();
  },

  methods: {
    // 获取支付价格
    _payConfig() {
      let h5LogsObj = JSON.parse(decodeURI(utils.getCookie("h5LogsObj")));

      API.API_payConfig({
        pkg: h5LogsObj.pkg ? h5LogsObj.pkg : "com.h5game.peidui",
        zygt: "hzwz",
        tgtk: 1,
        uid: 1008611,
      }).then((res) => {
        this.cash = res.result.data.goodsList[0].cash;
        this.originalPrice = res.result.data.goodsList[0].originalPrice;
      });
    },

    // 支付
    async _payment() {
      this.$refs.payBtn.style.opacity = "0.5";
      this.loading = true;

      const h5LogsObj = JSON.parse(decodeURI(utils.getCookie("h5LogsObj")));
      let link = decodeURI(utils.getCookie("link"));

      let params_createorder = {
        zygt: "hzwz",
        tgtk: 1,
        uid: 122193,
        pkg: "com.h5game.peidui",
        source: h5LogsObj.source ? h5LogsObj.source : "toutiao",
      };

      // 获取订单号
      let res_order = await API.API_createorder(
        params_createorder,
        this.baseInfo
      );

      const orderId = res_order.result.data.orderId;
      utils.setCookie("orderId", orderId, 0); // 将orderId放入cookie中

      // 上报-- > 信息收集;
      API.API_h5Logs({
        outTradeNo: orderId,
        link: link,
        clickId: h5LogsObj.source == 'kuaishou' ? h5LogsObj.callback : h5LogsObj.clickid,
        source: h5LogsObj.source,
        pkg: h5LogsObj.pkg,
      }).then((res) => {
        console.log("收集数据===", res);
      });

      // 支付
      API.API_gatewayCreateorder({
        payPlatform: 1,
        payType: 2,
        wxType: "H5Page",
        orderType: 5,
        // pkg: h5LogsObj.pkg,
        pkg: h5LogsObj.pkg ? h5LogsObj.pkg : "com.h5game.peidui",
        outTradeNo: orderId,
        totalFee: 1,
      }).then((res) => {
        this.$refs.payBtn.style.opacity = "1";
        this.loading = false;
        let mwebUrl = res.result.data.wakeup.mwebUrl;
        let tempUrl = window.location.href;
        tempUrl = tempUrl.replace("pay", "result");
        window.location.href = `${mwebUrl}&redirect_url=${tempUrl}?pay_cb=1`;
      });
    },

    // 倒计时
    showtime(endTime) {
      let nowTime = new Date().getTime();
      let final = endTime - nowTime;

      this.hour = Math.floor((final / (1000 * 60 * 60)) % 24); //计算小时数
      this.hour = this.hour < 10 ? "0" + this.hour : this.hour;

      this.minute = Math.floor((final / (1000 * 60)) % 60); //计算分钟数
      this.minute = this.minute < 10 ? "0" + this.minute : this.minute;

      this.second = Math.floor((final / 1000) % 60); //计算秒数
      this.second = this.second < 10 ? "0" + this.second : this.second;
    },
  },
};
</script>

<style scoped>
.pay-info {
  width: 7.5rem;
  min-height: 10.1rem;
  background-color: #fff;
  border-radius: 0 0 0.2rem 0.2rem;
  position: relative;
  /* display: flex; */
}

.img2-father {
  width: 100%;
  height: 0.36rem;
  padding: 0.22rem 0;
  border-bottom: 0.02rem solid #dadada;
}

.img2 {
  width: 5.04rem;
  height: 0.36rem;
}

.img3,
.img4 {
  width: 0.4rem;
  height: 0.4rem;
}

.img-hert {
  width: 1.22rem;
  height: 0.88rem;
}

.img5-father {
  width: 100%;
  height: 0.4rem;
  margin-top: 0.2rem;
}

.img5 {
  width: 2.9rem;
  height: 0.4rem;
}

.img6-father {
  width: 100%;
  padding: 0.22rem 0;
  margin-top: 0.6rem;
  border-bottom: 0.02rem solid #dadada;
  border-top: 0.02rem solid #dadada;
}

.img6 {
  width: 5.04rem;
  height: 0.36rem;
}

.hour,
.minute,
.second {
  display: inline-block;
  width: 0.5rem;
  height: 0.52rem;
  background-color: #fa004b;
  border-radius: 0.04rem;
  line-height: 0.52rem;
  text-align: center;
}

.pay-btn {
  width: 6.7rem;
  height: 1rem;
  border-radius: 0.5rem;
  background-color: #fa004b;
}

.test {
  width: 6.78rem;
  height: 1.52rem;
  margin-top: 0.36rem;
  margin-bottom: 0.28rem;
  border: 0.02rem solid #ffb3d0;
  border-radius: 0.24rem;
  padding: 0.16rem;
  line-height: 0.4rem;
}

.loading {
  width: 0.2rem;
  height: 0.2rem;
  margin-left: 0.2rem;
  border-radius: 50%;
  border-top: 0.05rem solid #1f9fff;
  border-left: 0.05rem solid #1f9fff;
  animation: rotate 0.8s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>