<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts">
import { useUserStore } from '@vben/stores'

import { orderService } from '#/api/service/order'
import obj from '#/utils/obj'

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

const emits = defineEmits(['update:modelValue', 'refresh'])

const { userInfo } = storeToRefs(useUserStore())

const show = computed({
  get() {
    return props.modelValue
  },
  async set(newVal) {
    emits('update:modelValue', newVal)
    if (newVal) {
      topUpRef.value?.reset()
    }
  },
})

const moneyOptions = obj.joinObjs(
  !userInfo.value.isSelf || { label: '1元', value: 1 },
  {
    label: '10元',
    value: 10,
  },
  {
    label: '100元',
    value: 100,
  },
  {
    label: '500元',
    value: 500,
  },
  {
    label: '1000元',
    value: 1000,
  },
  {
    label: '自定义',
    value: 0,
  },
)

const topUpRef = ref()

// 充值成功
function topUpSuccess() {
  emits('refresh')
}

// 充值
async function pay(money: any) {
  return await orderService.createCoinTopUpOrder({
    money,
    schoolId: userInfo.value.schoolId,
  })
}
</script>

<template>
  <mj-modal
    v-model="show"
    :options="{
      title: '乐贝充值',
      width: 600,
      height: 300,
    }"
  >
    <wx-top-up
      ref="topUpRef"
      title="请选择充值金额(1元=100乐贝)"
      :money-options="moneyOptions"
      @success="topUpSuccess"
      :pay="pay"
    />
  </mj-modal>
</template>

<style lang="scss" scoped></style>
