<script setup lang="ts">
import { createRechargeOrderApi } from '@/api'
import hud from '@/utils/hud'
import num from '@/utils/num'
import { computed, ref } from 'vue'

defineOptions({ name: 'Recharge' })

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

const show = computed({
  get: () => props.modelValue,
  set: val => {
    emit('update:modelValue', val)
  },
})

// 金额
const defaultMoneyType = 10
const customMoneyType = 0
const moneyTypeOptions = [
  {
    label: '10元',
    value: defaultMoneyType,
  },
  {
    label: '50元',
    value: '50',
  },
  {
    label: '100元',
    value: '100',
  },
  {
    label: '自定义',
    value: customMoneyType,
  },
]
const moneyType = ref(defaultMoneyType as any)
const customMoney = ref('')

// 确定充值
async function ok() {
  let money = moneyType.value
  if (moneyType.value === customMoneyType) {
    money = customMoney.value
  }
  money = Number(money)
  if (Number.isNaN(money) || money < defaultMoneyType || !num.isPositiveInt(num.toFixed2(money))) {
    hud.error(`请输入大于等于${defaultMoneyType}的正整数金额`)
    return
  }

  // 生成订单
  const data = await createRechargeOrderApi(money)
  console.log(data)
}
</script>

<template>
  <mj-dialog v-model="show" title="乐贝充值" :ok="ok">
    <view class="title">请选择充值金额(1元=100乐贝)</view>
    <mj-segment v-model="moneyType" :options="moneyTypeOptions" />
    <input
      class="single-input"
      v-if="moneyType == customMoneyType"
      type="number"
      v-model="customMoney"
      placeholder="请输入自定义金额"
    />
  </mj-dialog>
</template>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  font-size: 30rpx;
  margin-bottom: 40rpx;
}

.single-input {
  margin-top: 30rpx;
}
</style>
