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

import Big from 'big.js'

import { spCoinTradeService } from '#/api/service/sp/coin-trade'
import { mj_form_input, mj_form_money } from '#/components/mj/mj-table'
import hud from '#/utils/hud'

defineOptions({ name: 'TransferToSp' })
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
  },
  set(newVal) {
    emits('update:modelValue', newVal)
    if (newVal) {
      formRef.value?.setData({
        balance: userInfo.value?.providerCurrency,
      })
    }
  },
})

// 表单
const formRef = ref()
const form = {
  titleWidth: 130,
  items: [
    {
      field: 'balance',
      title: '乐贝余额',
      span: 24,
      itemRender: {
        name: mj_form_money,
        props: { disabled: true },
      },
    },
    {
      required: true,
      message: '请输入乐贝数量(10万的倍数)',
      pattern: String.raw`^[1-9][0-9]*00000$`,
      field: 'amount',
      title: '乐贝数量',
      span: 24,
      itemRender: {
        name: mj_form_money,
        props: { clearable: true, showPrefix: false },
      },
    },
    {
      required: true,
      message: '请输入折扣(0-1之间的小数)',
      pattern: String.raw`^(0\.\d*[1-9]\d*|1(\.0+)?)$`,
      field: 'discount',
      title: '折扣',
      span: 24,
      itemRender: {
        name: mj_form_input,
        props: { clearable: true },
      },
    },
    {
      field: 'price',
      title: '原价',
      span: 24,
      itemRender: {
        name: mj_form_money,
        props: { disabled: true, placeholder: '' },
      },
    },
    {
      field: 'discountedPrice',
      title: '折后价格',
      span: 24,
      itemRender: {
        name: mj_form_money,
        props: { disabled: true, placeholder: '' },
      },
    },
    {
      field: 'serviceFee',
      title: '服务费',
      span: 24,
      itemRender: {
        name: mj_form_money,
        props: { disabled: true, placeholder: '' },
      },
    },
    {
      field: 'realAmount',
      title: '实际到账',
      span: 24,
      itemRender: {
        name: mj_form_money,
        props: { disabled: true, placeholder: '' },
      },
    },
  ],
} as any

const submit = () => {
  const data = formRef.value?.getData()
  if (Big(data.amount).gt(userInfo.value?.providerCurrency)) {
    hud.error('余额不足')
    return
  }

  // 发布
  hud.load({
    task: async () => {
      await spCoinTradeService.publish({
        sellerId: userInfo.value.providerId,
        amount: data.amount,
        discount: data.discount,
        price: data.price,
        discountedPrice: data.discountedPrice,
      })
      emits('refresh')
      emits('update:modelValue', false)
    },
    option: '发布',
    hideSuccess: false,
  })
}

watch(
  [
    () => formRef.value?.getData()?.discount,
    () => formRef.value?.getData()?.amount,
  ],
  () => {
    const data = formRef.value?.getData()
    if (!data) return
    if (!data.discount || !data.amount) {
      data.price = ''
      data.discountedPrice = ''
      data.serviceFee = ''
      data.realAmount = ''
      return
    }
    const price = Big(data.amount).div(100)
    data.price = `${price}`
    data.discountedPrice = `${price.times(data.discount)}`
    data.serviceFee = `${Big(data.discountedPrice).times(0.2)}`
    data.realAmount = `${Big(data.discountedPrice).minus(data.serviceFee)}`
  },
  {
    deep: true,
  },
)
</script>

<template>
  <mj-modal
    v-model="show"
    :options="{
      title: '乐贝出售',
      width: 600,
    }"
  >
    <mj-form ref="formRef" :options="form" @submit="submit" />
  </mj-modal>
</template>
