<template>
  <div class="max-w1280">
    <div class="layer cart-order-pay">
      <template v-if="params.tradeNo&&payStatus&&payStatusNum==0">
        <div class="pay_title">
          <h3 class="f-s-a">您的订单号：<span class="order">{{params.tradeNo}}</span></h3>
          <p class="f-s-a">应付金额：<i>¥{{params.totalFee}}</i></p>
          <p class="f-s-a">
            剩余支付时间：<i>{{timeHtml}}</i>
          </p>
          <p class="tip">合晶芯城已经为此订单预留库存，请尽快付款，超过时限订单将自动取消</p>
        </div>
        <div class="pay_body">
          <p class="pay_select clear ">
            <a class="active" href="javascript:;" data-show="weChat_pay">支付方式</a>
          </p>
          <div class="pay_process">
            <div class="select_payWay custom_pay_case clear">
              <span :class="{active:payType==1}" id="alipay" @click="selectPay(1)"><img class="l" src="@/assets/img/icon/Bitmap.png" /><i>支付宝支付</i><em></em></span>
              <span id="wechat_pay" :class="{active:payType==2}" @click="selectPay(2)"><img src="@/assets/img/icon/weixinzhifu.png" class="l" /><i>微信支付</i><em></em></span>
            </div>
          </div>
        </div>
        <el-button class="btn_main next_btn custom_pay_order_submit" @click="payBtn()">
          下一步
        </el-button>
      </template>
      <template v-if="params.tradeNo&&!payStatus">
        <div class="order_success">
          <img src="@/assets/img/icon/error_72px_1201052.png">
          <h3>订单[{{params.tradeNo}}]已过期</h3>
          <div class="btn">
            <NuxtLink to="/" class="submit">返回首页</NuxtLink>
          </div>
        </div>
      </template>
      <template v-if="payStatusNum==2">
        <div class="order_success">
          <img src="@/assets/img/icon/success.png">
          <h3>订单支付成功</h3>
          <p class="one">我们将尽快为您发货，收货期间请保持手机畅通</p>
          <p class="success">
            订单号：<i>{{params.tradeNo}}</i><br>
            支付方式：<i>{{tipText}}</i><br>
            支付金额：<i class="err">¥{{params.totalFee}}</i>
          </p>
          <div class="btn">
            <NuxtLink to="/" class="submit">返回首页</NuxtLink>
            <NuxtLink to="/home/order/list" class="back">查看订单</NuxtLink>
          </div>
        </div>
      </template>
      <transition name="el-fade-in" v-if="payStatus">
        <div class="mask_layout custom_pay_wechat_box" v-show="payFalg">
          <!-- 微信支付 -->
          <div class="pop_up_box pay_box">
            <div class="pop_up_title clear">
              <h3 class="l"><i></i>微信支付 </h3>
              <span class="r custom_pay_wechat_box_cannel" @click="payFalg=false"></span>
            </div>
            <div class="pay_body" style="border:none;margin-top:2px;">
              <p class="time clear">二维码将于： <i class="custom_pay_timers">{{timeHtml}}</i>后过期，请使用微信扫码完成支付</p>
              <h5>支付金额：<i class="error">{{params.totalFee}}元</i></h5>
              <!-- <img v-if="!isqrCode" src="@/assets/images/wechat_pay_loading.png" class="custom_pay_wechat_qr">
              <div class="qrcode" id="qrcode" v-show="isqrCode">
              </div> -->
              <!-- onerror="this.src='/public/static/images/wechat_pay_loading.png'" -->
              <div class="btn_box">
                <span class="completed submit custom_pay_wechat_box_success" @click="getOrderDetail">已完成支付</span><span class="back custom_pay_wechat_box_cannel" @click="getOrderDetail">返回重新选择支付方式</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import empty from "@/assets/img/empty.svg";
import { showLoadingToast, closeToast } from "vant";
import { useAll } from "~/api/pubAll/service";
const { delCartGood, getUserUnPayHktOrder, getOrderDetail } = useAll();
let pageTitle: any = ref("HOTKING-订单支付");
useHead(() => ({
  title: pageTitle.value,
}));
const user = useUserStore();
user.value.adminTitle = "订单支付";
let timeHtml: any = ref("");
let payStatusNum: any = ref(0);
let payStatus: any = ref(true);
let payFalg: any = ref(false);
let tipText: any = ref("微信");
let payType: any = ref(1);
let alipay_params: any = ref({
  tradeNo: "", //订单编号
});
let params: any = ref({
  tradeNo: "", //订单编号
  totalFee: "", //金额
  goodsDesc: "", //商品描述
});
onMounted(() => {
  getPayOrderFun();
});
function selectPay(type: any) {
  payType.value = type;
}
function creatQrCode() {}
async function getOrderDetailFun() {
  let res: any = await getOrderDetail(params.value.tradeNo);
  if (res.httpCode == 200) {
    payStatusNum.value = res.data.payStatus;
    payFalg.value = false;
  }
}
async function payBtn() {
  let res;
  if (payType.value == 2) {
    // tipText.value = "微信";
    // res = await this.wx_pay(params.value);
    // if (res.httpCode == 200) {
    //   payFalg.value = true;
    //   creatQrCode(res.data);
    // } else {
    //   ElMessage.error(res.message);
    // }
  } else if (payType.value == 1) {
    // let a = document.createElement('a')
    // a.href = "/alipay/pay?tradeNo=" + this.alipay_params.tradeNo
    // a.target = "_blank"
    // a.click()
    // let url = window.location.host
    tipText.value = "支付宝";
    ElMessageBox.confirm("该订单是否已支付成功", "提示", {
      confirmButtonText: "支付成功",
      cancelButtonText: "支付遇到问题",
      type: "warning",
    })
      .then(() => {
        getOrderDetailFun();
      })
      .catch(() => {
        navigateTo({
          path: "/home/order/list",
          query: { pay_status: 0 },
        });
      });
    window.open(
      "https://api.hotking.com/alipay/pay?tradeNo=" +
        alipay_params.value.tradeNo
    );
    //res = await this.alipay_pay(this.alipay_params);
  } else {
    ElMessage.error("请选择支付方式");
    return;
  }
}

let payId: any = ref("");
let time: any = ref(-1);
const pad = (n: number) => String(n).padStart(2, "0");
async function getPayOrderFun() {
  let res: any = await getUserUnPayHktOrder({ id: payId.value });
  if (res.httpCode == 200) {
    if (res.data) {
      params.value.tradeNo = res.data.orderSn;
      alipay_params.value.tradeNo = res.data.orderSn;
      params.value.totalFee = res.data.totalAmount;
      payStatusNum.value = res.data.payStatus;
      params.value.goodsDesc = "订单支付";
      time.value = parseInt(res.data.orderExpired);
      if (time.value > 0) {
        let Interval = setInterval(() => {
          const h = Math.floor(time.value / 3600);
          const m = Math.floor(time.value / 60) % 60;
          const s = time.value % 60;

          timeHtml.value = `${pad(h)}时${pad(m)}分${pad(s)}秒`;
          time.value--;
          if (time.value <= 0) {
            clearInterval(Interval);
          }
        }, 1000);
      } else {
        payStatus.value = false;
      }
    } else {
      //this.$message.error('订单不存在或已支付')
      navigateTo({
        path: "/home/order/list",
      });
    }
  }
}
</script>
<style scoped lang="scss">
.max-w1280 {
  background-color: #f7f7f7;
}
.cart-order-pay {
  background: linear-gradient(180deg, #f7f7f7, #fff0 2.666667rem) !important;
  min-height: calc(100vh - 44px);
  padding: 12px;
  .pay_title {
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    .f-s-a {
      line-height: 24px;
    }
    .tip {
      font-size: 13px;
    }
    h3 {
      span {
        color: #e0212f;
        font-size: 14px;
      }
    }
    p {
      &:last-child {
        margin-top: 10px;
        color: #9fafbc;
      }
      i {
        font-style: normal;
        color: #e0212f;
        font-size: 14px;
      }
    }
  }
  .pay_body {
    padding: 12px;
    background: #fff;
    border-radius: 4px;
    margin-top: 12px;
    .pay_select {
      font-size: 15px;
      color: #333;
      margin-bottom: 10px;
    }
    .select_payWay {
      display: flex;
      align-items: center;
      span {
        width: 120px;
        height: 40px;
        position: relative;
        margin-right: 20px;
        cursor: pointer;
        background: #f7f7f8;
        border-radius: 4px;
        line-height: 36px;
        border: 2px solid #f7f7f8;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active {
          border: 2px solid #0067ed;
          em {
            position: absolute;
            right: -2px;
            bottom: -2px;
            width: 20px;
            height: 20px;
            background: url(@/assets/img/icon/address_selected.png)
              no-repeat;
          }
        }
        i {
          font-style: normal;
          font-size: 13px;
        }
        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }
    }
  }
}
.order_success {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  h3 {
    font-size: 18px;
    color: #1e1f30;
    letter-spacing: 1.42px;
    padding: 25px 0 11px 0;
  }

  p {
    display: inline-block;
    font-size: 12px;
    color: #9fafbc;
    text-align: left;
    line-height: 22px;

    &.success {
      display: block;
    }

    i {
      font-size: 14px;
      color: #1e1f30;
      font-weight: bold;
      font-style: normal;

      &.err {
        color: #e0212f;
      }
    }

    a {
      font-weight: bold;
      margin: 0 5px;
    }

    .one {
      font-size: 12px;
      color: #1e1f30;
      letter-spacing: 0.95px;
      margin-bottom: 12px;
    }

    &.one {
      span {
        color: #0067ed;
        cursor: pointer;
      }
    }
  }

  .btn {
    padding-top: 20px;
    padding-bottom: 20px;

    a {
      display: inline-block;
      width: 120px;
      height: 40px;
      line-height: 40px;
      color: #0067ed;
      border: 1px solid #0067ed;
      background: #fff;
      border-radius: 4px;
      font-size: 12px;

      &.back {
        background: #0067ed;
        color: #ffffff;
        margin-left: 55px;

        &:hover {
          background: #0560d6;
        }
      }

      &.erro {
        color: #fff;
      }
    }
  }
}
.next_btn {
  width: 80%;
  margin: 20px auto !important;
  display: flex;
  align-items: center;
}
</style>