<template>
  <div>
    <a-card style="box-sizing:border-box;padding:30px">
      <!-- 选择下单的应用列表 -->
      <a-form>
        <div style="display:flex;flex-direction:row">
          <a-form-item label="" class="table-head-layout">
            <span>充值账户：</span>
            <a-select v-model:value="vdata.accountState" style="width:450px" @change="vdata.accountState"  placeholder="请选择充值账户">
              <a-select-option  v-for="(item, index) in vdata.accountList" :key="index" v-model:value="item.type">{{ item.typeNameDesc }} | {{ item.realName }}  |{{ item.phone }}  | 可用余额：{{ (item.balacne / 100).toFixed(2) }} </a-select-option>

            </a-select>
          </a-form-item>
        </div>
      </a-form>
    </a-card>
    <a-card style="box-sizing:border-box;padding:30px;margin-top: 10px;">
      <!-- 支付测试面板 v-if=""-->
      <div  style="width: 100%;" class="paydemo">
        <!-- 订单信息 -->
        <div class="paydemo-type-content">
          <div class="paydemo-type-name article-title" >
            <span  :class="[vdata.orderType == 1?'article-title-span  span-active':'article-title-span']" @click="getOrderType(1)">扫码充值</span>
            <span  :class="[vdata.orderType == 2?'article-title-span  span-active':'article-title-span']" @click="getOrderType(2)">汇款充值</span>
          </div>
          <a-divider />
          <a-form ref="infoFormModel" :model="vdata.saveObject" :rules="vdata.orderType == 1?saveRule:saveRule1" layout="vertical">
          <form class="layui-form">
            <div class="paydemo-form-item">
              <a-form-item label="充值金额" name="orderNumber">
                 <div  class="paydemo-form-item-input">
                   <a-input-number  v-model:value="vdata.saveObject.orderNumber"   style="min-width: 200px;" placeholder="请输入充值金额" />
                   <div v-if="vdata.orderType == 1"  class="jeepay-tip-text">(扫码充值支付通道会收取0.6%的交易手续费，即到账金额=交易金额 * 99.4%，例：充值100元实际到账 99.4元)</div>
                 </div>
              </a-form-item>
            </div>
            <a-form-item label="账号信息" name="pinlu"  v-if="vdata.orderType == 2">
              <div class="paydemo-address">
                  <div class="paydemo-address-div">
                    <p class="span1">账户名</p>
                    <p class="span2">收银呗（武汉）科技有限公司</p>
                    <p class="span3">
                      <a-button v-clipboard:copy="'收银呗（武汉）科技有限公司'" v-clipboard:success="() => $infoBox.message.success('复制成功')" type="link">
                        <template #icon><copy-outlined /></template>
                        复制
                      </a-button>
                    </p>
                  </div>
                  <div class="paydemo-address-div">
                    <p class="span1">账户号</p>
                    <p class="span2">127916047910201</p>
                    <p class="span3">
                      <a-button v-clipboard:copy="'127916047910201'" v-clipboard:success="() => $infoBox.message.success('复制成功')" type="link">
                        <template #icon><copy-outlined /></template>
                        复制
                      </a-button>
                    </p>
                  </div>
                  <div class="paydemo-address-div">
                    <p class="span1">开户支行</p>
                    <p class="span2">招商银行股份有限公司武汉光谷科技支行</p>
                    <p class="span3">
                      <a-button v-clipboard:copy="'招商银行股份有限公司武汉光谷科技支行'" v-clipboard:success="() => $infoBox.message.success('复制成功')" type="link">
                        <template #icon><copy-outlined /></template>
                        复制
                      </a-button>
                    </p>
                  </div>
                  <div class="paydemo-address-div">
                    <p class="span1">开户地</p>
                    <p class="span2">湖北省-武汉市</p>
                    <p class="span3">
                      <a-button v-clipboard:copy="'湖北省-武汉市'" v-clipboard:success="() => $infoBox.message.success('复制成功')" type="link">
                        <template #icon><copy-outlined /></template>
                        复制
                      </a-button>
                    </p>
                  </div>
            </div>
            </a-form-item>

              <div style="margin-top:40px;text-align: left">
                <a-button v-if="$access('ENT_MCH_PAY_TEST_DO')" style="padding:5px 20px;background-color: #1953ff;border-radius: 5px;color:#fff" @click="submitPay">立即充值</a-button>
              </div>
          </form>
          </a-form>
        </div>
      </div>
    </a-card>
  </div>

  <a-card style="box-sizing:border-box;padding:20px;margin-top: 10px;">
    <div  style="width: 100%;" class="paydemo">
      <div class="paydemo-type-content">
        <div class="paydemo-type-name article-title">
          常见问题
        </div>
        <a-divider />
        <div class="title-content" v-if="vdata.orderType == 1">
          <h3>扫码充值到账时效?</h3>
         <p>
           扫码充值后，充值到账时间为 <b style="color: #ff0000">下个工作日内24点前</b>。<br>
           注：实际到账时间请以三方支付公司充值时间为准。<br>
         </p>
        </div>
        <div class="title-content"  v-if="vdata.orderType == 2">
          <h3>汇款充值到账时效</h3>
          <p>
            汇款充值后，充值到账时间为<b style="color: #ff0000">下个工作日内24点前</b>。<br>
            注：实际到账时间请以三方支付公司充值时间为准。<br>

            下列操作可能导致资金无法正常入账：<br>

            （1）央行大额支付系统关闭期间发起汇款<br>

            （2）收款方账户户名、收款方账号、收款银行等关键信息输入错误造成无法入账<br>

            （3）银行端汇款渠道问题，客户提交的汇款资金未成功转出或到账<br>

            （4）使用非本公司同名银行账户或个人银行账户进行充值<br>
          </p>
          <h3> 为什么汇款充值未到账？</h3>
          <p>
            资金未到账可能有两种原因：<br>

            1）我司还未收到充值资金；需要检查资金是否成功转出或收款方银行还未到账，到账时间视银行情况而定。<br>

            2）充值资金在退回过程中 ；没有填写正确的收款账户、单笔转账超过限额等原因会导致汇款充值失败被退回，退回具体到账时间视银行情况而定。<br>
          </p>
        </div>
      </div>
    </div>
    <a-modal
        v-model:visible="vdata.visibleAdd"
        :footer="null"
        @cancel="handleCancel"
        style="top: 35% !important;"
        wrap-class-name="full-modal"
        width="330px"
        :maskClosable="false"
    >
<!--      <div  style="text-align: center">-->
<!--        <div style="padding-bottom: 15px">请用支付宝或微信支付 </div>-->
<!--        <div style="text-align: center">-->
<!--          <img :src="vdata.qrCodeUrl" alt="" />-->
<!--        </div>-->
<!--        <div style="margin-top: 10px">充值金额：￥{{vdata.orderAmount}}</div>-->
<!--        <div>实际到账金额：￥{{vdata.orderFinalAmt}}</div>-->
<!--        <div>订单号：{{vdata.extFlowNo}}</div>-->
<!--        <div>充值说明：{{vdata.orderRateRext}}</div>-->
<!--      </div>-->

      <div class="modal-body">
        <!-- 扫条码与刷脸 -->

        <div >
          <img
              v-if="vdata.qrCodeUrl"
              :src="vdata.qrCodeUrl"
              alt=""
              style="width: 200px; height: 200px"
          >
          <div class="zfb-wx" style="margin: 10px 0">
            <img src="/src/assets/svg/alipay.svg" alt="">
            <img
                src="/src/assets/svg/wechatpay.svg"
                alt=""
                style="margin: 0 5px"
            >
            <span style="color: grey">支持支付宝与微信支付</span>
          </div>
        </div>

        <!-- 提示文字 来自函数-->
        <p style="font-size: 20px; font-weight: 500; color: grey">
          请扫描二维码付款
        </p>
        <a-button
            type="primary"
            class="cancel"
            size="large"
            block
            @click="vdata.visibleAdd = false"
        >
          取消收款
        </a-button>
      </div>

    </a-modal>
  </a-card>
</template>

<script setup lang="ts">
import {
  API_MCH_PAY_ACCOUNT_RECHARGE,
  API_MCH_PAY_ACCOUNT,
  req,
  $payTest,
  $payTestOrder,
  $getWebSocketPrefix
} from '@/api/manage' // 接口
import ReconnectingWebSocket from 'reconnectingwebsocket'
import {ref, onMounted, reactive, getCurrentInstance,nextTick} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import {message, Modal} from "ant-design-vue";
const router = useRouter() //这是全部路由
// 获取全局函数
const { $infoBox,$access,$viewerApi,$message } = getCurrentInstance()!.appContext.config.globalProperties


const route = useRoute()
const vdata =  reactive({
  SmallVisible:true,
  qrCodeUrl:'' as any,
  extFlowNo:"" as any,
  orderAmount:"" as any,
  orderFinalAmt:"" as any,
  orderRateRext:"" as any,
  visibleAdd:false,
  saveObject: {} as any, // 数据对象
  mchAppList: [] as any, // app列表
  mchStoreList: [] as any, // 门店列表
  appId: '', // 已选择的appId
  storeId: '', // 已选择的门店ID
  appPaywayList: [] as any, // 商户app支持的支付方式
  currentWayCode: '', // 以何种方式进行支付，默认是微信二维码
  currentPayDataType: '', // 支付参数
  mchOrderNo: '', // 模拟商户订单号
  authCode: '', // 条码的值
  autoPosExtra: {}, // 智能POS参数
  paytestAmount: 0.01, // 支付金额，默认为0.01
  amountInput: false, // 自定金额输入框是否展示
  noConfigText: false, // 尚无任何配置分割线提示文字
  divisionMode: 0, // 订单分账模式
  orderRemarks: '', // 订单标题
  orderNumber: '', // 订单标题
  orderType:1,
  divisionMode1:0.01,  //默认支付金额绑定
  webCashierIsShow: true,  // 是否显示web统一收银台

  payOrderWebSocket: null as any, // 支付订单webSocket对象
  accountState:0,
  accountList:[] as any
})
const saveRule = {
  appId: [{ required: true, message: '请选择应用', trigger: 'blur' }],
  storeId: [{ required: true, message: '请选择门店', trigger: 'blur' }],
  orderNumber: [{ required: true, message: '请输入正确的金额，单笔充值金额区间100-50000', trigger: 'blur', type: 'number',  min: 100,max:50000 }],
}
const saveRule1 = {
  appId: [{ required: true, message: '请选择应用', trigger: 'blur' }],
  storeId: [{ required: true, message: '请选择门店', trigger: 'blur' }],
  orderNumber: [{ required: true, message: '请输入正确的金额，单笔充值金额在100以上', trigger: 'blur', type: 'number',  min: 100 }],
}

const infoFormModel = ref()
onMounted(()=>{

})
function handleCancel(e) {
  vdata.visibleAdd = false;
}
function submitPay(){

  infoFormModel.value.validate().then(() => {
    let extType = vdata.orderType - 1
      req.add(API_MCH_PAY_ACCOUNT_RECHARGE,{rechargeAmt:vdata.saveObject.orderNumber*100,accountNo:vdata.accountList[vdata.accountState].accountNo,changeMethod:extType}).then(res => {
         if(extType != 1){
           vdata.qrCodeUrl = res.qrCodeUrl
           vdata.visibleAdd = true
           // vdata.extFlowNo = res.extFlowNo
           vdata.orderAmount =  (res.amount / 100).toFixed(2)
           vdata.orderFinalAmt = (res.finalAmt / 100).toFixed(2)
           // vdata.orderRateRext = res.text
           payOrderWebSocket(res.flowNo);
         }else{
           $infoBox.message.success('订单生成成功')
           router.push({
             path:'/fundList'
           })
         }

    })
  });
}
//轮训信息
function payOrderWebSocket(payOrder){
  // 监听响应结果
  // @ts-ignore
  vdata.payOrderWebSocket = new ReconnectingWebSocket(
      $getWebSocketPrefix() +
      '/api/anon/ws/payOrder/'+payOrder+'/' +
      new Date().getTime()
  )
  vdata.payOrderWebSocket.onopen = () => {}
  vdata.payOrderWebSocket.onmessage = (msgObject) => {
    console.log(msgObject,'msgObjectmsgObject')
    const resMsgObject = JSON.parse(msgObject.data)
    console.log(resMsgObject,'msgObjectmsgObject')
    if (resMsgObject.state === 2) {

      vdata.qrCodeUrl = ''
      vdata.visibleAdd = false
      const succModal = Modal.success({
        title: '支付成功',
        content: '2秒后自动关闭'
      })

      setTimeout(() => {
        router.push({
          path:'/fundList'
        })
        succModal.destroy()
      }, 2000)
    } else {

      Modal.error({
        title: '支付失败',
        content: `错误码：${resMsgObject.errCode}`
      })
    }
  }
}

getAccount()
function  getAccount(){

  req.list(API_MCH_PAY_ACCOUNT,{}).then(res => {
    vdata.accountList = res
    console.log(vdata.accountList,'res')
  })
}

function changeAppId(){

}

function  getOrderType(type){
  vdata.orderType = type
  vdata.saveObject.orderNumber = '';
}
</script>

<style scoped lang="css">
@import './recharge.css';
.article-title-span{
  padding: 0 10px;
}
.span-active{
  color: #1677ff;
}
.span-active::after{
  //content: '' !important;
  //display: block !important;
  //background-color: rgba(44, 110, 246, 1) !important;
  //border-radius: 45px !important;
  //width: 22px !important;
  //height: 4px !important;
}
h4{
  color: #333;
  height: 30px;
  padding: 20px 0;
}
.title-content h3{
  font-weight: bold;
}
.title-content p{
  color: #9b9b9b;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line;
}
.paydemo .paydemo-type-content{
  padding: unset !important;
}
.paydemo-address{
  display: block !important;
  background: #f9f9f9;
  border-radius: 5px;
}
.paydemo-address p{
}

.paydemo-address-div{
  width: 600px;
  display: flex;
}
.span1{
  width: 80px !important;
  text-align:right;
  padding: 15px 10px 0 10px;
}
.span2{
  width: 280px !important;
  text-align:left;
  padding: 15px 5px 0 15px;
}
.span3{
  padding: 5px 0 0 0;
  width: 100px !important;
  text-align:right;
  color: #1677ff;
}
.layui-form{
  margin-top:50px;
}
.paydemo-form-item{
  padding-top:10px ;
  padding-bottom:10px ;
}
.paydemo .paydemo-form-item{
  margin-bottom: 45px;
}
.table-head-layout{
  margin-bottom: unset !important;
}
.paydemo-form-item-input{
  display: grid !important;
}
</style>
