<template>
  <PageLayout>
    <template #header-title v-if="route.query.phone">
      给{{ route.query.phone }}转账
    </template>
    <template #header-right>
      <q-btn dense flat to="/wallet/recharge/history">充值记录</q-btn>
    </template>
    <div class="bg-white q-pa-md">
      <div class="text-caption text-grey">充值金额</div>
      <q-input v-model="money" ref="moneyRef" :rules="[Rules.number(2)]" prefix="￥" dense placeholder="请输入充值金额" hint="* 充值金额：70%可以提现，30%只能用于平台支出">
      </q-input>
    </div>
    <q-list class="bg-white q-mt-sm">
      <q-item-label class="q-pa-md">请选择支付方式</q-item-label>
      <q-item clickable @click="payType = 'alipy'">
        <q-item-section avatar>
          <q-avatar rounded color="blue" text-color="white">支</q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label>支付宝</q-item-label>
          <q-item-label caption>为规避支付宝风控，建议单笔金额低于500</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-icon size="xs" v-if="payType == 'alipay'" name="check" color="blue" />
        </q-item-section>
      </q-item>
      </q-list>
      <div class="q-ma-md">
        <q-btn class="full-width q-py-sm" unelevated="" color="primary" @click="submit">确认充值</q-btn>
      </div>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRouter,useRoute } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { Rules } from 'src/utils/tools.js'
const $q = useQuasar()
const router = useRouter();
const route = useRoute()
const store = useSelfStore();
const moneys = reactive([{value:15},{value:58},{value:92},{value:205},{value:435},{value:1023,hot:true}])
const money = ref(15)
const agree = ref(true)
const payType = ref('alipay')
const moneyRef = ref(null)
// TODO 这个页面需要支持给别人充值(转账)操作,来自转账页面跳转到此页面
function submit() {
  if(!moneyRef.value.validate()){
    return false
  }
  $q.loading.show()
  api.recharge({
    pay_type: payType.value,
    pay_money: money.value,
    phone: route.query.phone||void(0)
  }).then(res=>{
    return api.redirectPay(res.qr_code)
  }).catch(e=>{
    $q.notify({type: 'negative',message: e.message})
  }).finally(()=>{
    $q.loading.hide()
  })
}
</script>
