<template>
  <page-layout>
    <template #header-right>
      <q-btn dense flat to="/wallet/draw/history">提现记录</q-btn>
    </template>
    <div class="bg-white q-pa-md text-dark text-center">
      <div class="text-h4 q-pb-sm">{{ formatMoney(store.shop.balance_withdraw) }}</div>
      <div class="text-caption">可提现额度（元）</div>
      <div class="text-caption">每次最多49999元</div>
    </div>
    <q-form ref="formRef" @submit="submit">
      <q-list class="bg-white q-mt-sm" separator>
        <q-item>
          <q-item-section class="col-4">
            <q-item-label>姓名</q-item-label>
          </q-item-section>
          <q-item-section>
            {{ store.shop.seller_name }}
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section class="col-4">
            <q-item-label>提现渠道</q-item-label>
          </q-item-section>
          <q-item-section>
            <span>

              <q-radio v-for="item in store.shop.withdraw_type" :key="item"
              v-model="form.type" size="xs" :val="PAY_TYPES[item].id" :label="PAY_TYPES[item].name" />
            <!-- <q-radio v-model="form.type" size="xs" :val="1" label="支付宝" /> -->
            <!-- <q-radio v-model="form.type" size="xs" :val="2" label="银行卡" /> -->
          </span>
          </q-item-section>
        </q-item>
        <template v-if="form.type == 2">
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>银行卡号</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.bank_no"
              :rules="form.type==2?[Rules.required]:[]"
              borderless
              dense
              clearable
              placeholder="请填写银行卡号"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>开户行</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.bank_master"
              :rules="form.type==2?[Rules.required]:[]"
              borderless
              dense
              clearable
              placeholder="请填写开户行"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>支行</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.bank_branch"
              :rules="form.type==2?[Rules.required]:[]"
              borderless
              dense
              clearable
              placeholder="请填写支行"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>银行卡所在地</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.bank_area"
              :rules="form.type==2?[Rules.required]:[]"
              borderless
              dense
              clearable
              placeholder="请填写银行卡所在地"/>
          </q-item-section>
        </q-item>
      </template>
        <q-item v-else class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>支付宝</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.ali_account"
              :rules="form.type==1?[Rules.required]:[]"
              borderless
              clearable
              dense
              placeholder="请填写支付宝账号"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>提现金额</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.money"
              :rules="[Rules.required,Rules.lessEqualThan(store.shop.balance_withdraw),Rules.greaterThan(0)]"
              autocomplete="off"
              type="number"
              borderless
              clearable
              dense
              :placeholder="'最多可提款'+formatMoney(store.shop.balance_withdraw)+'元'"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>支付密码</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.password_pay"
              :rules="[Rules.required]"
              type="password"
              autocomplete="off"
              clearable
              borderless
              dense
              placeholder="请输入支付密码"/>
          </q-item-section>
        </q-item>
      </q-list>
      <div class="q-ma-md">
        <q-btn unelevated color="primary" class="fit" type="submit">确认</q-btn>
      </div>
    </q-form>
  </page-layout>
</template>
<script setup>
import {ref,reactive} from 'vue'
import { useSelfStore } from 'stores/self';
import { useQuasar } from 'quasar';
import { Rules,formatMoney } from 'src/utils/tools';
import { api } from 'boot/axios'
import {PAY_TYPES} from 'src/utils/const'
import { useRouter } from 'vue-router';
const store = useSelfStore()
const $q = useQuasar()
const router= useRouter()

if(!store.shop.withdraw_type?.length){
  // $q.notify('暂不支持提款')
  $q.dialog({
    title: "系统提示",
    message: "还未设置店铺可用提现方式，暂无法发起提现",
    ok: '去设置',
    cancel:true
  }).onOk(() => {
    router.push("/shop/info");
  });
} else if(!store.user.real_identity){
  $q.dialog({
    title: "系统提示",
    message: "为了您的资金安全请先实名认证",
    ok: '去认证',cancel:true
  }).onOk(() => {
    router.push("/my/auth");
  });
} else if(!store.user.has_pay_password){
  $q.dialog({
    title: "系统提示",
    message: "您还未设置支付密码，无法发起提现",
    ok: '去设置',cancel:true
  }).onOk(() => {
    router.push("/my/change_pay_pwd");
  });
}
const form = reactive({
  type: store.shop.withdraw_type?.[0],
  money: '',
  ali_account:'',
  bank_no:'',
  bank_area:'',
  bank_master:'',
  bank_branch:'',
  password_pay: ''
})
function submit(){
  // TODO提现
  $q.loading.show()
  api.withdrawMoney(form).then((res)=>{
    $q.notify({type: 'positive',message: res.message||'发起成功' })
  }).catch(e=>{
    $q.notify({type: 'negative',message: e.message})
  }).finally(()=>{
    $q.loading.hide()
  })
}
</script>
<style lang="scss" scoped>

</style>
