<template>
  <view class="page-wrapper">
    <view class="pay-wait">
      <view class="pay-number">
        <text class="icon">￥</text>
        {{ vdata.payment }}
      </view>
      等待用户付款
    </view>
    <view class="but-content">
      <JButton @tap="cancel">取消付款</JButton>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { req, $appPay, API_URL_PAY_ORDER_LIST } from '@/http/apiManager'
import wxTextToSpeach from '@/commons/utils/wxTextToSpeach'
import { onLoad, onReady } from '@dcloudio/uni-app'
onLoad((options) => {
  vdata.payment = options.payment
})
onReady(() => {
  wxfaceapp.onRemoteMessage(function (res) {
    console.log('刷脸结果:' + res.content)
    const data = JSON.parse(res.content)
    $appPay(vdata.payment, data.faceCode || data.code).then((r) => {
      console.log('支付后结果', r)
      findOrderState(r.bizData)
    })
  })
  postFront({ type: 'amount', amount: vdata.payment }) // 通知 支付页面 支付金额
})
const vdata = reactive({
  payment: '0.00',
})
const cancel = () => {
  postFront({ type: 'toBanner' })
  uni.navigateBack()
}
const postFront = (content) => {
  wxfaceapp.postMsg({
    targetAppid: 'wx4710a1619fbb3714',
    content: JSON.stringify(content),
    success(res) {
      console.log('通信成功', res)
    },
    fail(res) {
      console.log('通信失败  ', res)
    },
  })
}

function findOrderState(val) {
  switch (val.orderState) {
    case 2:
      if (val.payDataType == 'aliapp' || val.wayCode == 'ALIPAY') {
        wxTextToSpeach(`支付宝支付成功金额${vdata.payment}元`)
      }
      if (val.payDataType == 'ysfapp' || val.wayCode == 'YSFPAY') {
        wxTextToSpeach(`云闪付支付成功金额${vdata.payment}元`)
      }
      uni.$J.showToast('支付成功').then((res) => {
        uni.redirectTo({
          url: '/pages/paySuc/paySuc?amount=' + vdata.payment,
        })
        postFront({ type: 'toBanner' }) //支付成功后  返回支付页面
      })
      break
    case 3:
      uni.$J.showToast('支付失败' + val.errMsg)
      break
    case 4:
      uni.$J.showToast('订单撤销')
      break
    case 1:
      // 支付中 进行查单操作
      console.log('订单状态1进行查单 操作 ')
      findOrder(val.payOrderId)
      break
  }
}
let num = 1
function findOrder(payOrderId) {
  if (num > 15)
    return uni.showModal({
      title: '确认订单状态',
      content: '订单状态查询失败 请与客户确认订单状态 点击确认跳转订单列表页面',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (confirm) {
          uni.navigateTo({
            url: '/pages/order/order',
          })
        }
      },
    })
  uni.$J.showToast(`支付中正在进行第${num}次订单查询`).then((res) => {
    req.getById(API_URL_PAY_ORDER_LIST, payOrderId).then(({ bizData }) => {
      num += 1
      console.log('查单结果', bizData)
      bizData.orderState = bizData.state
      findOrderState(bizData)
    })
  })
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  padding: 0.1rpx 30rpx;

  .pay-wait {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 140rpx;
    height: 220rpx;
    background: linear-gradient(135deg, rgba(86, 222, 114, 1) 0%, rgba(58, 233, 174, 1) 100%);
    border-radius: 15rpx;
    color: #fff;

    .pay-number {
      display: flex;
      align-items: flex-end;
      margin-bottom: 15rpx;
      font-size: 60rpx;
      font-weight: 700;

      .icon {
        transform: translateY(-7rpx);
        font-size: 28rpx;
      }
    }
  }

  .but-content {
    transform: translateY(400rpx);
  }
}
</style>
