<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts">
import type { FormRules } from 'element-plus'

import { useUserStore } from '@vben/stores'

import Big from 'big.js'

import { spLearnWithdrawService } from '#/api/service/sp/learn-withdraw'
import hud from '#/utils/hud'

defineOptions({ name: 'TopUp' })
const props = withDefaults(
  defineProps<{
    modelValue?: boolean
  }>(),
  {
    modelValue: false,
  },
)

const emits = defineEmits(['update:modelValue'])
const { userInfo } = storeToRefs(useUserStore())
const { updateUserInfo } = useAuthStore()

const show = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emits('update:modelValue', newVal)
    if (newVal) {
      updateUserInfo()
    }
  },
})

// 表单
const formRef = ref()
const form = reactive({
  total: '',
  // 线下充值金额
  amount: '',
  // 开户人
  bankPerson: '',
  // 开户行账号
  bankAccount: '',
  // 开户行
  bankName: '',
})
const rules = reactive<FormRules<typeof form>>({
  amount: [
    {
      validator: validateAmount,
      required: true,
      trigger: 'blur',
    },
  ],
  bankPerson: [{ required: true, message: '请输入开户人', trigger: 'blur' }],
  bankAccount: [
    { required: true, message: '请输入开户行账号', trigger: 'blur' },
  ],
  bankName: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
})

function validateAmount(_: any, value: any, callback: any) {
  const val = Number(value)
  if (!val || val < 0) {
    callback(new Error('请输入正确的金额'))
  } else if (Big(val).gt(userInfo.value.learnAmount)) {
    callback(new Error('提现金额不能大于余额'))
  } else {
    callback()
  }
}

// 提交
function submit() {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return
    hud.load({
      task: async () => {
        await spLearnWithdrawService.saveOrUpdate(toRaw(form))
        emits('update:modelValue', false)
      },
      option: '提交',
      hideSuccess: false,
    })
  })
}
</script>

<template>
  <mj-modal
    v-model="show"
    :options="{
      title: '提现申请',
      width: 600,
      height: 600,
    }"
  >
    <div class="container">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item label="余额">
          <mj-form-money
            class="w-full"
            v-model="userInfo.learnAmount"
            disabled
          />
        </el-form-item>
        <el-form-item label="提现金额" prop="amount" required>
          <mj-form-money
            class="w-full"
            v-model="form.amount"
            placeholder="请输入提现金额"
          />
        </el-form-item>
        <el-form-item label="开户人" prop="bankPerson" required>
          <el-input
            class="w-full"
            v-model="form.bankPerson"
            placeholder="请输入开户人"
          />
        </el-form-item>
        <el-form-item label="开户行" prop="bankName" required>
          <el-input
            class="w-full"
            v-model="form.bankName"
            placeholder="请输入开户行"
          />
        </el-form-item>
        <el-form-item label="开户行账号" prop="bankAccount" required>
          <el-input
            class="w-full"
            v-model="form.bankAccount"
            placeholder="请输入开户行账号"
          />
        </el-form-item>
      </el-form>
      <el-button
        class="mt-2 h-10 w-full text-base font-bold"
        type="primary"
        @click="submit"
      >
        提交
      </el-button>
    </div>
  </mj-modal>
</template>

<style lang="scss" scoped>
.container {
  :deep(.el-form) {
    .el-form-item {
      margin-bottom: 30px;
    }

    .el-form-item__label {
      width: 125px;
    }

    .el-form-item__content,
    .el-form-item__label {
      font-size: 16px;
    }
  }
}
</style>
